.elementor-2607 .elementor-element.elementor-element-b48694c{--display:flex;}/* Start custom CSS for html, class: .elementor-element-035c2bd */.profile-image img {
    width: 150px;    /* Adjust size as needed */
    height: 150x;      /* Keep it square */
    object-fit: cover;  /* Crop nicely */
    border-radius: 15%; /* Makes it circular */
    border: 4px solid #3498db; /* Blue border */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Optional shadow */
}

/* Fix WhatsApp Contact Item Alignment */
.contact-grid .contact-item {
    display: flex;
    align-items: left !important;   /* Ensures icon & text stay aligned vertically */
}

.contact-grid .contact-item i {
    flex-shrink: 0;        /* Prevents icon from shrinking or overlapping */
    margin-right: 15px;    /* Adds spacing between icon and text */
}

.contact-grid .contact-item div {
    display: flex;
    flex-direction: column;  /* Ensures WhatsApp title & subtitle stack properly */
}
/* Center align gradient buttons */
.elementor a.cta-button,
.elementor a.download-btn,
.elementor button.download-btn {
    display: block !important;
    margin: 20px auto !important;  /* centers the button */
    text-align: center !important;
    width: fit-content !important; /* keeps button width tight to content */
    
    /* keep existing styles */
    background: linear-gradient(135deg, #1e3a8a, #3b82f6, #60a5fa) !important;
    color: #fff !important;
    padding: 18px 50px !important;
    border-radius: 50px !important;
    border: none !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s ease !important;
}

/* Hover effect */
.elementor a.cta-button:hover,
.elementor a.download-btn:hover,
.elementor button.download-btn:hover {
    transform: translateY(-4px) scale(1.03) !important;
    background: linear-gradient(135deg, #3b82f6, #60a5fa, #1e3a8a) !important;
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5) !important;
}

/* Button Row: keep them side by side & centered */
.button-row {
    display: flex;
    justify-content: center;
    gap: 20px; /* spacing between buttons */
    flex-wrap: wrap;
}

.download-btn {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6, #60a5fa);
    color: #fff;
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.download-btn:hover {
    transform: translateY(-3px) scale(1.05);
    background: linear-gradient(135deg, #3b82f6, #60a5fa, #1e3a8a);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5);
}

.certificate-image {
    width: 100%;
    height: auto; /* Let image control height */
    border-radius: 15px;
    margin-bottom: 25px;
    overflow: hidden;
}

.certificate-image::before {
    content: none; /* Remove shimmer overlay */
}
.certificate-image img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Show whole certificate */
    border-radius: 15px;
    display: block;
}

@media (max-width: 768px) {
    /* Add these new rules to your existing mobile styles */
    
    /* Family Risk Calculator Mobile Fixes */
    #family-risk-calculator {
        margin-right: 80px; /* Account for right nav */
        padding: 20px 15px;
    }
    
    #family-risk-calculator .service-card {
        padding: 25px 15px; /* Reduce side padding */
        margin-bottom: 120px; /* Space for floating buttons */
    }
    
    /* Fix input grid for mobile */
    #family-risk-calculator .services-grid,
    #riskIncomeForm > div:first-child {
        grid-template-columns: 1fr !important; /* Force single column */
        gap: 15px;
        margin-bottom: 20px;
    }
    
    /* Input field mobile optimization */
    #riskIncomeForm input[type="number"] {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 15px 12px;
    }
    
    /* Total income display mobile */
    #riskIncomeForm .total-income-section {
        margin: 25px 0;
        padding: 20px 15px;
    }
    
    /* Result section mobile */
    #riskResultNew {
        margin: 30px 0 20px 0;
        padding: 25px 15px;
    }
    
    /* Reference table mobile */
    #family-risk-calculator table {
        font-size: 0.85rem;
    }
    
    #family-risk-calculator th,
    #family-risk-calculator td {
        padding: 10px 8px;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile fixes */
    #family-risk-calculator {
        margin-right: 70px; /* Account for smaller nav */
    }
    
    #family-risk-calculator .section-title {
        font-size: 1.8rem;
        text-align: center;
    }
    
    /* Make inputs more touch-friendly */
    #riskIncomeForm input[type="number"] {
        padding: 18px 15px;
        font-size: 16px;
    }
    
    /* Adjust label spacing */
    #riskIncomeForm label {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }
    
    /* Button mobile optimization */
    #riskIncomeForm button {
        padding: 16px 30px;
        font-size: 1rem;
        margin: 25px auto;
    }
}


.profile-img, .brand-logo {
  backface-visibility: hidden;
}


/* Fix for HLV result overlap */
#hlvResult,
#hlvChartContainer {
    display: block !important;
    margin-top: 30px !important;
    margin-bottom: 50px !important; /* pushes insurance plans down */
    padding: 20px !important;
    background: rgba(30, 41, 59, 0.95) !important;
    border-radius: 15px !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    text-align: center !important;
    position: relative !important;  /* ensures it flows in normal layout */
    clear: both !important;         /* forces stacking order */
    float: none !important;
}

#hlvChartContainer {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#hlvResult.show {
    display: block;
    animation: slideInResult 0.5s ease;
    margin-top: 20px;
    padding: 20px;
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
}

@keyframes slideInResult {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.input-group {
    background: rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    padding: 12px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
}





/* --- Fix Family Income Risk Calculator Spacing & Inputs --- */
#family-risk-calculator {
    margin: 20% auto !important;   /* Center content */
    padding: 20px 15px !important;
    max-width: 100% !important;
}

#family-risk-calculator .inputs-grid {
    display: grid;
    grid-template-columns: 1fr !important; /* always stack cleanly on mobile */
    gap: 20px !important;
}

@media (min-width: 768px) {
    #family-risk-calculator .inputs-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* allow 3 per row on bigger screens */
    }
}

#family-risk-calculator .calculator-input {
    width: 100% !important;
    font-size: 1.05rem !important;
    min-height: 55px !important; /* taller for selects */
    padding: 14px 12px !important;
}


/* Side Navbar Default (Inactive State) */
.sidebar {
    width: 60px !important;     /* shrink when inactive */
    transition: width 0.3s ease;
    overflow: hidden;
}

/* Sidebar when Active (on hover or expanded) */
.sidebar:hover,
.sidebar.active {
    width: 200px !important;    /* expand on hover or when active */
}

/* Ensure icons always visible */
.sidebar i {
    font-size: 0rem;
    margin: 15px auto;
    display: block;
    text-align: center;
}

/* Hide text labels when inactive */
.sidebar span {
    display: none;
}

.sidebar:hover span,
.sidebar.active span {
    display: inline-block;
    margin-left: 10px;
}


/* Force full-screen content fill */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #0f172a !important; /* your main background color */
    overflow-x: hidden !important;  /* prevent sideways scrolling */
}

/* Make Elementor sections span full width */
.elementor-section,
.page-wrapper,
#content,
#main,
.site-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    background: #0f172a !important; /* match your theme */
}

/* Ensure calculator & cards expand properly */
.service-card,
.calculator-section {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important; /* optional: remove rounded edges */
}/* End custom CSS */