.elementor-30352 .elementor-element.elementor-element-a6eda4d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-30352 .elementor-element.elementor-element-88afb8b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-30352 .elementor-element.elementor-element-b99810b{margin:0px 20px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-30352 .elementor-element.elementor-element-f6cb781{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:480px){.elementor-30352 .elementor-element.elementor-element-88afb8b{--width:70%;}.elementor-30352 .elementor-element.elementor-element-f6cb781{--width:30%;}}/* Start custom CSS for html, class: .elementor-element-b99810b *//* ==================================== */
/* ALPHABET BUTTON STYLING */
/* ==================================== */
.alphabet-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
}

.alphabet-buttons a {
    padding: 10px 15px;
    border: 1px solid #4aa3df;
    background: #ffffff;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    color: #2a6f9e;
    transition: 0.25s ease;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.letter-table {
    /* ... existing styles ... */
    
    /* ADD THIS NEW LINE: */
    /* Adjust this value (e.g., 80px) to be slightly more than your fixed header's height */
    scroll-margin-top: 100px; 
}

.no-scroll-anchor {
  display: block;
  position: relative;
  top: -120px; /* Adjust based on header height */
  visibility: hidden;
}

/* Light blue hover */
.alphabet-buttons a:hover {
    background: #42B3E5;
    border-color: #42B3E5;
    color: white;
    transform: translateY(-2px);
}

/* ==================================== */
/* LETTER TABLE STYLING (REAL TABLE) */
/* ==================================== */

.letter-table {
    /* 1. HIDES ALL TABLES BY DEFAULT */
    display: none; 
    padding: 20px;
    border: 1px solid #ddd;
    margin-top: 10px;
    border-radius: 8px;
    animation: fadeIn 0.4s ease;
    background: #fff;
    
}


/* 2. SHOWS ONLY THE TARGETED TABLE (The one whose ID matches the #URL fragment) */
.letter-table:target {
    display: block;
}

/* Table design */
.az-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.az-table tr td {
    padding: 12px 15px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 16px;
}

/* Light blue row hover */
.az-table tr:hover td {
    background: #42B3E5; 
    color: white;
}

/* Ensures the link text stays white on row hover */
.az-table tr:hover a {
    color: white;
}

/* Fade animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}/* End custom CSS */