html, body {
    height: 100%; /* Ensure the body takes full height */
    margin: 0; /* Remove default margin */
}

.footer-icon {
    width: 24px; /* Set the width of the icon */
    height: auto; /* Maintain aspect ratio */
    margin-left: 15px; /* Space between icons */
    vertical-align: middle; /* Align with text */
}
.page-wrapper {
    display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Keep sidebar and content in a row */
}

@media (min-width: 768px) {
    .footer-collapse {
        display: block !important; /* Always show footer collapsibles on larger screens */
    }
    .footer-collapse.show {
        display: block !important; /* Ensure expanded footer sections are visible */
    }
}



@media (min-width: 768px) {
    .arrow {
        display: none; /* Hide arrows on larger screens */
    }
    .divider-mid {
        display: none; /* Hide dividers on larger screens */
    }
}

.page-sidebar {
    height: 100%; /* Allow height to adjust based on content */
}

.black-text {
    color: #4d4d4d; /* Set the text color to black */
    text-decoration: none; /* Optional: Remove underline */
    font-size: 1rem;
}
.black-link {
    color: #4d4d4d; /* Set the text color to black */
    text-decoration: none; /* Optional: Remove underline */
    font-size: 1rem;
}
.black-link:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
}

.size {
    font-size: 1.5rem; /* Adjust size as needed */
    font-weight: bold;
}
.content {
    flex: 1; /* Allow content to grow and fill available space */
    margin-left: 250px; /* Leave space for the sidebar */
    padding: 20px; /* Add padding for content */
}
.divider {
    width: 100%; /* Set the width to 100% */
    height: 1px; /* Set the height of the line */
    background-color: rgb(218, 222, 226); /* Set the color of the line */
    margin: 20px 0; /* Add vertical spacing */
}
.divider-mid {
    width: 100%; /* Set the width to 100% */
    height: 1px; /* Set the height of the line */
    background-color: rgb(218, 222, 226); /* Set the color of the line */
    margin: 20px 0; /* Add vertical spacing */
}
.icon {
    margin-left: 15px; /* Space between icons */
    color: #4d4d4d; /* Change icon color if needed */
    font-size: 1.5rem; /* Adjust icon size */
}

.arrow {
    margin-left: 20px; /* Space between title and arrow */
    transition: transform 0.3s; /* Smooth transition for rotation */
}
.collapse {
    transition: height 0.3s ease; /* Smooth animations */
}

@keyframes flyingTurn {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(10px) rotate(90deg);
    }
    100% {
        transform: translateX(0) rotate(180deg);
    }
}

@keyframes reverseFlyingTurn {
    0% {
        transform: translateX(0) rotate(180deg);
    }
    50% {
        transform: translateX(-10px) rotate(90deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}

.arrow i {
    display: inline-block;
    transition: transform 0.3s ease;
}

.arrow.animate i {
    animation: flyingTurn 0.5s ease forwards;
}

.arrow.animate-reverse i {
    animation: reverseFlyingTurn 0.5s ease forwards;
}

.collapse.show ~ .arrow i {
    transform: rotate(180deg); /* Optional arrow rotation for better UX */
}

.page-footer {
    background: #fff; /* Background color for the footer */
    padding: 1rem; /* Adjust padding as needed */
    height: auto;
}

@media (max-width: 768px) {
    .page-sidebar {
        position: relative; /* Change to relative on small screens */
        height: auto; /* Allow height to adjust based on content */
    }
    .content {
        margin-left: 0; /* Remove margin on small screens */
    }
}

/* Hide the reCAPTCHA badge */
.grecaptcha-badge {
    display: none !important;
}