.elementor-kit-6{--e-global-color-primary:#004D40;--e-global-color-secondary:#EEF9EF;--e-global-color-text:#000000;--e-global-color-accent:#004D40;--e-global-color-da5a9aa:#FFFFFF;--e-global-color-305aadf:#000000;--e-global-color-8802f32:#B90808;--e-global-color-c4c802e:#B908082A;--e-global-color-7c64a2d:#067800;--e-global-color-646aea1:#0678002A;--e-global-color-b54aa7d:#001CDF;--e-global-typography-primary-font-family:"Afacad";--e-global-typography-primary-font-size:16px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Afacad";--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Afacad";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Afacad";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-da5a9aa );font-family:"Afacad", Sans-serif;font-size:16px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-da5a9aa );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:4px 4px 4px 4px;}.elementor-kit-6 p{margin-block-end:16px;}.elementor-kit-6 h1{font-family:"Afacad", Sans-serif;font-weight:700;}.elementor-kit-6 h2{font-family:"Afacad", Sans-serif;font-size:32px;font-weight:600;}.elementor-kit-6 h3{font-family:"Afacad", Sans-serif;font-size:24px;font-weight:600;}.elementor-kit-6 h4{font-family:"Afacad", Sans-serif;}.elementor-kit-6 h5{font-family:"Afacad", Sans-serif;}.elementor-kit-6 h6{font-family:"Afacad", Sans-serif;font-weight:400;}.elementor-kit-6 img{border-style:none;border-radius:4px 4px 4px 4px;}.elementor-kit-6 label{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{accent-color:var( --e-global-color-primary );background-color:var( --e-global-color-da5a9aa );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-secondary );border-radius:4px 4px 4px 4px;}.elementor-kit-6 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea:focus,.elementor-kit-6 .elementor-field-textual:focus{accent-color:var( --e-global-color-primary );background-color:var( --e-global-color-secondary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-6 h2{font-size:44px;line-height:1.2em;}.elementor-kit-6 h6{font-size:12px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-primary-font-size );}.elementor-kit-6 label{font-size:var( --e-global-typography-primary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-primary-font-size );}.elementor-kit-6 label{font-size:var( --e-global-typography-primary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================================
   SITE-WIDE CUSTOM STYLES
   ============================================================================
   
   Description: Custom padding, responsive breakpoints, table styling, and
   professional article link effects using Elementor global colors
   
   Breakpoints:
   - Mobile Portrait: 767px and below
   - Tablet Portrait: 768px - 1024px
   - Desktop: 1025px and above
   
   Elementor Global Colors Used:
   - --e-global-color-primary
   - --e-global-color-secondary
   - --e-global-color-text
   - --e-global-color-accent
   ============================================================================ */


/* ============================================================================
   1. DESKTOP STYLES (Default - 1025px and above)
   ============================================================================ */

/* Default padding for all major layout elements */
section, 
header, 
footer,
aside, 
.navbar {
    padding: 150px 80px;
}

/* Navbar specific overrides - horizontal padding only */
.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ============================================================================
   2. UTILITY CLASSES
   ============================================================================ */

/* Remove vertical padding completely */
.no-padding-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove only top padding */
.no-padding-top {
    padding-top: 0 !important;
}

/* Remove only bottom padding */
.no-padding-bottom {
    padding-bottom: 0 !important;
}


/* ============================================================================
   3. TABLE STYLING (Using Elementor Global Colors)
   ============================================================================ */

main table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* Table header styling with Elementor primary color */
main table thead {
    background-color: var(--e-global-color-primary);
    color: #ffffff;
}

main table thead th {
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

/* Table body styling */
main table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s ease;
}

/* Alternating row colors with Elementor secondary color (subtle) */
main table tbody tr:nth-child(even) {
    background-color: rgba(var(--e-global-color-secondary-rgb, 168, 13, 82), 0.05);
}

/* Hover effect using secondary color */
main table tbody tr:hover {
    background-color: rgba(var(--e-global-color-secondary-rgb, 168, 13, 82), 0.1);
    cursor: pointer;
}

main table tbody td {
    padding: 1rem 1.5rem;
    color: var(--e-global-color-text, #000000);
}

/* First column styling (often contains labels) */
main table tbody td:first-child {
    font-weight: 500;
    color: var(--e-global-color-primary);
}

/* Responsive table wrapper for horizontal scrolling on small screens */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================================
   4. ARTICLE LINK STYLES - Modern & Professional
   ============================================================================
   Gradient underline with smooth animation - minimal but irresistible
   ============================================================================ */

article p a {
    /* Base styling */
    color: var(--e-global-color-accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
    
    /* Subtle dotted underline by default */
    border-bottom: 1px dotted var(--e-global-color-accent, #2563eb);
    padding-bottom: 2px;
}

/* Animated gradient underline effect */
article p a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(
        90deg, 
        var(--e-global-color-primary, #6366f1),
        var(--e-global-color-accent, #2563eb)
    );
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

article p a:hover {
    color: var(--e-global-color-primary, #6366f1);
    border-bottom-color: transparent;
}

article p a:hover::after {
    width: 100%;
}

/* Active/Click state */
article p a:active {
    transform: translateY(1px);
}

/* Focus state for accessibility */
article p a:focus {
    outline: 2px solid var(--e-global-color-accent, #2563eb);
    outline-offset: 4px;
    border-radius: 2px;
}

/* External link indicator (optional but professional) */
article p a[href^="http"]::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

article p a[href^="http"]:hover::before {
    opacity: 1;
}


/* ============================================================================
   5. COMPONENT SPECIFIC STYLES
   ============================================================================ */

/* TypeScript preview container */
.ts-preview > div {
    height: 100%;
}


/* ============================================================================
   6. TABLET STYLES (768px - 1024px)
   ============================================================================ */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    /* Tablet padding adjustments */
    body section, 
    body header,
    body footer,
    body aside, 
    body .navbar {
        padding: 100px 40px !important;
    }
    
    /* Keep navbar with no vertical padding */
    body .navbar {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Utility classes still work */
    body .no-padding-vertical {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    body .no-padding-top {
        padding-top: 0 !important;
    }
    
    body .no-padding-bottom {
        padding-bottom: 0 !important;
    }
    
    /* Table adjustments for tablets */
    main table {
        font-size: 0.9375rem;
    }
    
    main table thead th,
    main table tbody td {
        padding: 0.875rem 1.25rem;
    }
    
    /* Link adjustments for tablets */
    article p a {
        font-size: 1em;
        /* Slightly larger tap target on tablets */
        padding-top: 2px;
        padding-bottom: 4px;
    }
}


/* ============================================================================
   7. MOBILE STYLES (767px and below)
   ============================================================================
   IMPORTANT: Must be at the end to override default and tablet styles
   ============================================================================ */

@media screen and (max-width: 767px) {
    
    /* Mobile padding with higher specificity */
    body section, 
    body header,
    body footer,
    body aside, 
    body .navbar {
        padding: 75px 20px !important;
    }
    
    /* Keep navbar with no vertical padding on mobile */
    body .navbar {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Ensure utility classes still work on mobile */
    body .no-padding-vertical {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    body .no-padding-top {
        padding-top: 0 !important;
    }
    
    body .no-padding-bottom {
        padding-bottom: 0 !important;
    }
    
    /* Mobile table styling */
    main table {
        font-size: 0.875rem;
    }
    
    main table thead th,
    main table tbody td {
        padding: 0.75rem 1rem;
    }
    
    /* Link adjustments for mobile */
    article p a {
        /* Larger tap target for mobile */
        padding-top: 4px;
        padding-bottom: 6px;
        display: inline-block;
    }
    
    /* Remove subtle effects on mobile for performance */
    article p a::after {
        transition-duration: 0.2s;
    }
    
    /* Hide external link indicator on very small screens */
    article p a[href^="http"]::before {
        display: none;
    }
}


/* ============================================================================
   8. SMALL MOBILE STYLES (480px and below)
   ============================================================================
   Extra small devices - additional adjustments
   ============================================================================ */

@media screen and (max-width: 480px) {
    
    body section, 
    body header,
    body footer,
    body aside, 
    body .navbar {
        padding: 50px 15px !important;
    }
    
    body .navbar {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Tighter table spacing on very small screens */
    main table thead th,
    main table tbody td {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    /* Link adjustments for very small screens */
    article p a {
        font-size: 1em;
        line-height: 1.6;
    }
}


/* ============================================================================
   9. PRINT STYLES
   ============================================================================ */

@media print {
    /* Remove padding for print */
    section, 
    header,
    footer,
    aside, 
    .navbar {
        padding: 0 !important;
    }
    
    /* Ensure tables print properly */
    main table {
        page-break-inside: avoid;
    }
    
    main table tbody tr:hover {
        background-color: transparent !important;
    }
    
    /* Remove link decorations for print */
    article p a {
        color: var(--e-global-color-text, #000000);
        text-decoration: underline;
    }
    
    article p a::after,
    article p a::before {
        display: none;
    }
}/* End custom CSS */