.elementor-21815 .elementor-element.elementor-element-1c6267f9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0px;--margin-bottom:25px;--margin-left:0px;--margin-right:0px;}.elementor-21815 .elementor-element.elementor-element-6885ff65{width:auto;max-width:auto;background-color:#77ABCE;border-radius:5px 5px 5px 5px;}.elementor-21815 .elementor-element.elementor-element-6885ff65.elementor-element{--align-self:center;}@media(min-width:768px){.elementor-21815 .elementor-element.elementor-element-1c6267f9{--content-width:906px;}}/* Start custom CSS for html, class: .elementor-element-6885ff65 */.horizontal-menu {
    list-style: none;        /* Remove bullets */
    padding: 8px;            /* Remove padding */
    margin: 0 auto;          /* Center the menu horizontally */
    display: flex;           /* Set horizontal layout */
    justify-content: center; /* Center the items */
    gap: 5px;                /* Add spacing between items */
    box-sizing: border-box;  /* Ensure padding doesn't affect size */
}

.horizontal-menu li {
    display: flex;           /* Make <li> a flex container */
    justify-content: center; /* Center text horizontally */
    align-items: center;     /* Center text vertically */
    text-align: center;      /* Ensure text inside <li> is centered */
    padding: 5px;            /* Add padding for click area */
    min-width: 100px;        /* Set a minimum width to avoid uneven alignment */
    flex-wrap: wrap;         /* Allow text to wrap to a new line */
    box-sizing: border-box;  /* Prevent padding from affecting layout */
}

.horizontal-menu a {
    font-size: 13px;
    text-decoration: none;   /* Remove underline */
    color: white;            /* Set link color */
    border-radius: 5px;      /* Optional: Rounded corners */
    display: block;          /* Make <a> a block element */
    text-align: center;      /* Center text inside the link */
    width: 100%;             /* Allow full-width for text alignment */
    word-wrap: break-word;   /* Wrap long words */
    box-sizing: border-box;  /* Prevent padding from affecting layout */
    padding: 5px;            /* Set consistent padding */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
}

.horizontal-menu a:hover {
    background-color: #f0f0f0; /* Hover background */
    color: #0056b3;            /* Hover text color */
    border: 0px solid #0056b3; /* Optional hover effect */
    padding: 5px;              /* Maintain consistent padding */
    box-sizing: border-box;    /* Prevent layout shifts */
}

/* Responsive Design */
@media (max-width: 800px) {
    .horizontal-menu {
        flex-direction: column;  /* Switch to vertical layout */
        align-items: center;     /* Center items vertically */
        gap: 10px;               /* Adjust spacing for vertical layout */
    }

    .horizontal-menu li {
        margin-right: 0; /* Remove horizontal spacing */
        width: 100%;     /* Ensure full width for alignment */
    }

    .horizontal-menu a {
        text-align: center; /* Center-align text inside the block */
    }
}/* End custom CSS */