.section-donation-form h3, .section-company-donation-form h3 {
    display: block;
    position: relative;
    margin: 0 auto 8px;
    font-weight: bold;
    font-size: 20px;
    text-align: center; /* Center the heading */
}

.section-donation-form label, .section-company-donation-form label {
    display: block;
    position: relative;
    margin-bottom: 8px; /* Space below labels */
    font-weight: bold;
    padding-left: 10px; /* Spacing for labels */
}

.section-donation-form button:hover, 
.section-company-donation-form button:hover {
    background-color: #218838; /* Darker background on hover */
}

.donation-buttons {
    display: flex;
    justify-content: space-between; /* Space between buttons */
    gap: 10px; /* Gap between buttons */
}

.donation-button.selected {
    background-color: #28a745; /* Selected background color */
    color: #fff; /* Selected text color */
}

.donation-description {
    font-size: 14px; /* Text size */
    margin-bottom: 15px; /* Space below description */
}

.consent-label {
    display: flex;
    align-items: center; /* Align items in center */
}

.form-columns {
    display: flex;
    justify-content: space-between; /* Space between columns */
    flex-wrap: wrap; /* Wrap columns on small screens */
    margin: 20px;
}

.form-column {
    flex: 1; /* Flex grow to fill space */
    box-sizing: border-box; /* Include padding/border in element's total width and height */
}

.form-column > h3 {
    font-weight: 700;
}

.form-column.first {
    margin-right: 20px;
}

.address-row {
    display: flex;
    justify-content: space-between; /* Space between address fields */
    flex-wrap: wrap; /* Wrap address fields on small screens */
}

.address-column {
    flex: 0 0 48%; /* Adjust width for columns */
    box-sizing: border-box; /* Include padding/border in element's total width and height */
}

/* Ensuring all input fields take full width within their columns */
.address-column input {
    width: 100%;
}

.tooltip-container {
    min-height: 74px; /* Adjust based on the expected height of the tooltip */
    margin: 0 0 15px 8px !important;
}

.tooltip-box {
    padding: 10px;
    margin: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    min-height: 74px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
}

/* Media query for responsive design */
@media (max-width: 768px) {
    .form-columns {
        flex-direction: column; /* Stack columns vertically */
    }

    .address-row {
        flex-direction: column; /* Stack address fields vertically */
    }

    .address-column {
        flex: 1 0 100%; /* Full width on small screens */
    }
}

@media (max-width: 425px) {
    .tooltip-box {
        min-height: 100px; /* Minimum height for tooltip */
    }

    .tooltip-container {
        min-height: 100px; /* Minimum height for tooltip container */
    }

    .donation-buttons {
        flex-direction: column; /* Stack buttons vertically */
    }

    .donation-button {
        margin: 5px 0; /* Margin for vertical buttons */
    }
}

.section-company-donation-form label.required:after {
    content:"*";
    color:red;
}

/* Donatie Tabs */

.donation-tabs-container {
    width: 100%;
    margin: 0 auto;
	margin-top: -44px;
	z-index: 100;
}

.donation-tabs-container * {
	z-index: 100;
}

.donation-tabs {
    display: flex;
    width: 40%;
	
}

@media (max-width:768px) {
	.donation-tabs{
	width: 75%;
	}
}

.donation-tab-button {
    flex: 1;
    cursor: pointer;
    background: #3088cf;
    transition: background 0.3s, border-bottom 0.3s;
    height: 64px;
    font-size: 14px; /* Base font size for smallest screens */
	padding-top: 5px;
	padding-bottom: 5px;
}

@media (min-width: 451px) {
    .donation-tab-button {
        font-size: 16px;
    }
}

@media (min-width: 601px) {
    .donation-tab-button {
        font-size: 18px;
    }
}

@media (min-width: 751px) {
    .donation-tab-button {
        font-size: 20px;
    }
}

@media (min-width: 901px) {
    .donation-tab-button {
        font-size: 22px;
    }
}

@media (min-width: 1051px) {
    .donation-tab-button {
        font-size: 24px;
    }
}

.donation-tab-button:nth-child(1) {
	border-radius: 20px 0 0 0;
}

.donation-tab-button:nth-child(2) {
	border-radius: 0 20px 0 0;
}

.donation-tab-button:hover {
    background: var(--color-4);
}
.donation-tab-button.active {
    background: var(--color-1) !important; 
    font-weight: bold;
}

.donation-tab-content {
    /* You can add additional styling here if needed */
}

.donation-tab-pane {
    /* Ensure smooth transitions */
    transition: all 0.3s ease-in-out;
}

/* Optional: Style the forms inside the tabs for consistency */
.section-donation-form,
.section-company-donation-form {
    /* Add any desired styles here */
}