/* ==================================================
   1. MODERN CSS RESET & GLOBAL STYLES
   ================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(100, 100, 100);
    font-size: 16px;
    line-height: 1.3;
    background: linear-gradient(to bottom, #F5FAFF 0%, #FFFFFF 45%, #FFFFFF 55%, #F5FAFF 100%);
}

body, h1, h2, h3, h4, h5, h6, p, ul, img {
    color: #015878;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==================================================
   2. TYPOGRAPHY
   ================================================== */

h1 { clear: both; font-size: 2.25rem; padding: 0 15px 0; } /* Top padding: 0, Left/Right: 15px and Bottom: 0 */
h2 { color: #001a4d; font-size: 1.75rem; padding: 10px 5px 5px; } /* Top padding: 10px, Left/Right: 5px and Bottom: 5px */

.page-subtitle {
  color: #001a4d;
  font-size: 1.75rem;
  font-weight: 600;
  padding: 20px 15px 10px; /* Top padding: 20px, Left/Right: 15px and Bottom: 10px */
}

h3 { font-size: 1.25rem; padding: 10px; }
.main-content .main_row h3 {
    margin-left: 0; 
    padding-left: 0;
}

h4 { font-size: 18px; font-weight: bold; text-decoration: none; font-style: normal; margin: 0; padding: 5px; }
h5 { font-size: 16px; font-weight: normal; text-decoration: underline; font-style: italic; margin: 0; padding: 5px; }

p { font-size: 18px; font-weight: normal; text-align: justify; padding: 5px; }
p.partners, p.faqs { margin-left: 20px; }
p.team { font-size: 16px; }
p.center { text-align: center; }
p.center_i { font-size: 16px; font-style: italic; text-align: center; margin-top:-7px; }
p.legal { font-size: 26px; font-weight:bold; }

.white { color: white; }
.bold { font-weight: bold; }
.italic { font-style: italic; }

/* Links */
a:link { font-weight: normal; text-decoration: underline; color: #00258F; }
a:hover { font-weight: bold; text-decoration: underline; color: #5C82FF; }
a:focus, button:focus {
    outline: 3px solid #0055aa;
    outline-offset: 2px;
}

ul.item { margin-top: 0; }
ol { margin: 0 18px; padding:0; }
ol.a { list-style-type: lower-alpha; }
ol.b { list-style-type: none; margin:0 20px 0 0; padding:0; }
.a li { margin-bottom:10px; margin-left:10px; }

.big_bullet { 
    list-style-type: square; 
    margin: 0.5em 0.5em 0 2em;
    text-align: justify; 
}

.small_bullet { 
    list-style-type: disc; 
    margin: 0.5em 0.5em 0 2em;
}

.tiny_bullet { font-size: 16px; list-style-type:circle; margin:0.5em 5em 0.7em; }

.main-content ul.item li.small_bullet {
    font-size: 18px;
    margin: 0.5em 0 0.7em 20px;
    padding-left: 0;
}

.clearfix:after { content: ""; display: table; clear: both; }

.space_10 { margin-top: 10px; }
.space_20 { margin-top: 20px; }
.space_40 { margin-top: 40px; }
.space_60 { margin-top: 60px; }
.space_150 { margin-top: 150px; }

/* ==================================================
   3. LAYOUT
   ================================================== */
.wrapper, .site-header, .footer {
    max-width: 1200px;
    margin: 10px auto;
    padding: 0 15px;
}

.wrapper, .main-content, .sidebar {
    padding-left: 5px;
    padding-right: 5px;
}

.middle {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 20px;
}

.main-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px;
    border-radius: 1em;
    border: 1px solid #BEBDBD;
}

.sidebar {
    flex: 0 0 300px;
    max-width: 300px;
    padding: 5px;
    margin-left: 15px;
    background: white;
    border-radius: 1em;
    border: 1px solid #BEBDBD;
    box-sizing: border-box;
}

/* Mobile stacking */
@media (max-width: 992px) {
    .middle { flex-direction: column; }
    .sidebar { 
        flex: 1 1 100%; 
        max-width: 100%; 
        margin-left: 0; 
        margin-top: 15px;
    }
}

/* ==================================================
   4. HEADER — FINAL RESPONSIVE VERSION
   ================================================== */

/* Base header + footer (keep this) */
.site-header,
.footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* Base site header (common to all pages) */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 15px;                /* safe spacing inside header */
    gap: 10px;
    background-clip: padding-box;  /* ensures border shows correctly */
    border: 1px solid #BEBDBD;     /* grey border */
    border-radius: 1em;            /* rounded corners */
    box-sizing: border-box;
    overflow: hidden;
}

.header-common {
    background-size: 100% 100%;  /* stretch background image */
    background-position: center;
    padding: 0;                  /* internal spacing handled by .site-header */
}

/* Desktop: wide screens */
@media (min-width: 1025px) {
    .header-common {
        height: 350px;      /* fixed height for large screens */
        min-height: 0;
        max-height: 350px;
    }
}

/* Tablet and mobile: grow to fit content */
@media (max-width: 1024px) {
    .header-common {
        height: auto;       /* allow content to determine height */
        min-height: 0;
        max-height: none;
        padding-bottom: 15px; /* optional extra spacing inside header */
    }
}

/* Individual background images */
.header_index { background-image: url("img/fotolia_59334097_s.jpg"); }
.header_about { background-image: url("img/fotolia_16618977_s.jpg"); }
.header_clients { background-image: url("img/fotolia_20565270_s.jpg"); }
.header_contact { background-image: url("img/fotolia_67027071_s.jpg"); }
.header_join { background-image: url("img/fotolia_25847669_s.jpg"); }
.header_services { background-image: url("img/fotolia_16863820_s.jpg"); }
.header_resources { background-image: url("img/fotolia_68710882_s.jpg"); }
.header_faqs { background-image: url("img/fotolia_56955404_s.jpg"); }
.header_404 { background-image: url("img/Pexels6804.jpg"); }

/* Mobile-specific background images */
@media (max-width: 768px) {
    .header_index { background-image: url("img/fotolia_59334097_mobile.jpg"); }
    .header_about { background-image: url("img/fotolia_16618977_mobile.jpg"); }
    .header_clients { background-image: url("img/fotolia_20565270_mobile.jpg"); }
    .header_contact { background-image: url("img/fotolia_67027071_mobile.jpg"); }
    .header_join  { background-image: url("img/fotolia_25847669_mobile.jpg"); }
    .header_services { background-image: url("img/fotolia_16863820_mobile.jpg"); }
    .header_resources { background-image: url("img/fotolia_68710882_mobile.jpg"); }
    .header_faqs { background-image: url("img/fotolia_56955404_s.jpg"); }
    .header_404 { background-image: url("img/Pexels6804_mobile.jpg"); }
}

/* ==================================================
   5. FOOTER
   ================================================== */
.footer {
    border: none;
    border-radius: 0;
    overflow: auto;
    margin-top: 15px;
    background-color: #f8f8f8;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.visually-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.footer-addresses {
    border: 1px solid #BEBDBD;
    border-radius: 1em;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    background-color: #f8f8f8;
}

.contact-card.uk {
    flex: 1 1 35%;   /* UK column slightly wider */
    min-width: 250px;
}

.contact-card.us {
    flex: 1 1 40%;   /* US column wider */
    min-width: 250px;
}

.contact-card.il {
    flex: 0 0 auto;  /* Israel column shrinks to content width */
    margin-left: auto; /* push it to the right edge */
}

.contact-card h4 { font-weight: bold; margin-bottom: 10px; }

.contact-card ul.item {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-addresses .item {
    list-style-position: outside;
    padding-left: 20px;
}

.footer-addresses .item li {
    text-indent: -10px;
    padding-left: 10px;
    font-style: normal;
    margin-bottom: 5px;
    list-style-type: disc;
    list-style-position: inside;
}

.contact-card ul.item li a[href^="tel"] { text-decoration: none; color: inherit; }
.contact-card ul.item li a[href^="mailto"] { text-decoration: underline; color: #00258F; }

.footer-copyright {
    width: 100%;
    border: 1px solid #BEBDBD;
    border-radius: 0.5em;
    padding: 10px 20px;
    text-align: center;
    box-sizing: border-box;
}

.footer-nav {
    margin-bottom: 10px;   /* small gap above copyright text */
}

.footer-nav ul {
    display: flex;
    justify-content: center; /* center links horizontally */
    gap: 15px;               /* space between links */
    padding: 0;
    list-style: none;
    margin: 0;
}

.footer-nav a {
    color: #015878;
    text-decoration: underline;
}

.footer-nav a:hover {
    color: #5C82FF;
}

@media (max-width: 768px) {
    .footer-addresses { flex-direction: column; }
    .contact-card { flex: 1 1 100%; min-width: 100%; }
}

.footer + .wrapper { margin-top: 20px; }

/* ==================================================
   6. LOGO & MENU
   ================================================== */
.logo_container { flex-shrink: 0; }
.logo_container img {
    width: 200px;   /* fixed size */
    max-width: 100%; /* keeps it responsive on very small screens */
    height: auto;
    margin-top: 20px;
    margin-left: 20px;
}
.menu_container { flex-grow: 1; }

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    font-family: Arial, sans-serif;
}

.menu li { position: relative; }
.menu li a { text-decoration: none; color: #0066CC; padding: 10px 15px; display: block; font-size: 16px; }
.menu > li > a {
    margin-top: 15px; /* adjust as needed */
}


.menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 5px 0;
    background: #ffffff;
    border: 1px solid #BEBDBD;
    border-radius: 0.5em;
    z-index: 10;
}
.menu li:hover > ul { display: block; }
.menu li ul li a { padding: 4px 15px; font-size: 16px; white-space: nowrap; }

/* ==================================================
   7. ACTION BUTTONS — CLEAN C-2 BEHAVIOR
   ================================================== */
/* Container for all buttons */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;  /* left-aligned */
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Each button */
.action-buttons a.button {
    display: flex;
    align-items: center;
    flex-shrink: 0; 
    flex-grow: 0;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    font-size: 18px;
    box-sizing: border-box;
    white-space: normal;
}

/* White text bubble */
.action-buttons a.button span.text {
    display: block;
    float: left;
    background-color: rgba(255,255,255,0.85);
    padding: 4px 8px;
    border-radius: 0.5em;
    white-space: normal;         /* allow wrapping */
    width: auto;
    clear: both;
    box-sizing: border-box;
}

/* Arrow after text */
.action-buttons a.button::after {
    content: "\27A0";
    font-size: 30px;
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: 
        1px 1px 0 #000,   /* Bottom-right */
       -1px 1px 0 #000,   /* Bottom-left */
        1px -1px 0 #000,  /* Top-right */
       -1px -1px 0 #000,  /* Top-left */
        1px 0 0 #000,     /* Right */
       -1px 0 0 #000,     /* Left */
        0 1px 0 #000,     /* Bottom */
        0 -1px 0 #000;    /* Top */
    flex-shrink: 0;              /* never shrink */
    margin-left: 6px;            /* gap from text */
}

/* Remove arrow for last button if needed */
.action-buttons a.button:last-child::after {
    content: "";
}

/* Responsive stacking */
@media (max-width: 620px) {
    .action-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-buttons a.button {
	width: auto;
        max-width: 100%;           /* occupy full line */
    }

    .action-buttons a.button span.text {
        max-width: 100%;           /* shrink inside button */
    }
}

/* =================
   8. COUNTRY TABLE — Card-style appearance
   ================== */

.country-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 2rem;

    border: 1px solid #ddd;      /* container border */
    border-radius: 12px;          /* rounded corners */
    overflow: hidden;             /* clip columns to corners */
    padding: 1rem;                /* spacing inside the border */
    background: #fff;             /* optional background */
}

.country-list-container h3 {
    margin-top: 2rem;     /* more space above */
    margin-bottom: 0.25rem; /* less space below */
    font-weight: 700;
    text-align: left;     /* optional, if you want it left-aligned */
}

/* Each column becomes a “card” inside the container */
.country-list-container .country-column {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;             /* spacing inside each card */
    border-radius: 8px;           /* slightly rounded corners per card */
    background: #f9f9f9;          /* subtle card background */
    border: 1px solid #eee;       /* light border for each card */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* subtle shadow for depth */
}

/* Headings in each column */
.country-list-container .country-column h4 {
    margin-bottom: 0.5rem;
    text-align: left;
    font-weight: 700;
    text-decoration: underline;
}

/* Lists inside each column */
.country-list-container ul.item {
    list-style-position: inside;
    padding-left: 20px;
    margin-left: 0;
}

.country-list-container ul.item li.small_bullet {
    list-style-type: disc;
    margin-left: 8px;
    padding-left: 0;
}

section[aria-label="Countries where Mediclever offers reimbursement services"] > h3 {
    margin-top: 2rem;        /* more space above */
    margin-bottom: 0;   /* less space below */
    font-size: 1.25rem;      /* match H3 elsewhere */
    font-weight: 700;
    text-align: left;        /* left-aligned */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .country-list-container {
        grid-template-columns: 1fr;  /* stack cards on mobile */
    }
    .country-list-container .country-column {
        width: 100%;
    }
}


/* =================
   9. SERVICES TABLE
   ================= */
.responsive-table {
  width: 100%;
  border-collapse: separate;   /* required for border-radius */
  border-spacing: 0;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;            /* ensures rounded corners clip cells */
  font-size: 1.125rem;         /* 18px if root is 16px */
}

/* Table headers - desktop */
.responsive-table th {
  text-align: left !important;          /* left-align header text */
  text-decoration: underline !important; /* underline text */
  font-weight: 700;
  padding: 0.75rem 1rem;
  vertical-align: top;
  border: none;                         
  border-bottom: 1px solid #ddd;        /* horizontal separator */
  background: #f5f5f5;                  /* optional header background */
}

/* Top corners rounding for first row */
.responsive-table thead th:first-child {
  border-top-left-radius: 12px;
}

.responsive-table thead th:last-child {
  border-top-right-radius: 12px;
}

/* Bottom corners rounding for last row */
.responsive-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

.responsive-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

/* Table cells */
.responsive-table td {
  border: none;
  border-bottom: 1px solid #eee;  /* horizontal separation only */
  padding: 0.75rem 1rem;
  vertical-align: top;
}

/* Caption styling */
.responsive-table caption h3 {
  text-align: left;   
  font-size: 1.25rem; 
  font-weight: 700;
  margin: 0 0 0.5rem 0; 
}

/* Bullets with hanging indent */
.cell-item {
  margin: 0.15rem 0;
  padding-left: 1.3rem;   /* adjust indent */
  text-indent: -1.3rem;   /* hanging indent */
  line-height: 1.4;
}

/* Proper hanging indent for bullets inside cells */
.responsive-table td .cell-item {
  margin: 0.15rem 0;
  padding-left: 1.3rem;
  text-indent: -1.3rem;
  line-height: 1.4;
}

/* Bullets for May Impact items, except the last one */
.responsive-table td[data-label="May Impact"] .cell-item {
    display: block;               /* normal block */
    position: relative;           /* needed for pseudo-element */
    padding-left: 1.25rem;        /* space for the bullet */
    text-indent: 0;               /* reset hanging indent */
    line-height: 1.4;
}

/* Add the bullet using ::before */
.responsive-table td[data-label="May Impact"] .cell-item:not(:last-child)::before {
    content: "•";                 /* bullet character */
    position: absolute;
    left: 0;                      /* place bullet at start */
    color: #000;                  /* bullet color */
    font-weight: bold;
}

/* Style the last cell-item */
.responsive-table td[data-label="May Impact"] .cell-item:last-child {
    display: block;
    padding-left: 0;              /* no indent */
    font-size: 1.0rem;          /* smaller font */
    font-style: italic;           /* italics */
}


/* --- MOBILE STACKED VIEW --- */
@media (max-width: 640px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
    width: 100%;
    font-size: 1.125rem; /* 18px */
  }

  /* Hide desktop headers */
  .responsive-table thead {
    display: none;
  }

  /* Remove extra row borders on mobile */
  .responsive-table tr {
    margin-bottom: 1.75rem;
    padding: 1rem;
    border: none;
    border-radius: 0;
  }

  .responsive-table td {
    border: none;
    padding: 0.5rem 0;
  }

  /* Mobile header labels */
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 700;
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.125rem;      /* match table text */
    text-indent: 0;
    padding-left: 0;
    text-decoration: underline; /* underline mobile “headers” */
    text-align: left;           /* left-align mobile labels */
  }

  /* Multi-line description spacing */
  .responsive-table td[data-label="Description"] {
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }

  /* Caption styling for mobile */
  .responsive-table caption {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 0.75rem;
  }

  .responsive-table caption h3 {
    font-size: 1.125rem; /* slightly smaller on mobile */
    margin: 0;
  }
}

/* ==================================================
   10. CONSULTANTS GRID — REVERTED TO LAST WORKING STATE
   ================================================== */

.consultants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 20px 0 40px 0;
}

/* CARD */
.consultant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    /* Keeps the 3D context to avoid some rendering bugs */
    backface-visibility: hidden; 
}

.consultant-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
}

/* PHOTO BLOCK */
.consultant-photo {
    position: relative;
    width: 100%;
    max-width: 220px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    /* Using !important here to lock in the context, preventing icon escape */
    position: relative !important; 
}

.consultant-photo img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.consultant-card:hover img {
    transform: scale(1.05);
}

/* OVERLAY (Global Hidden State) */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    color: #003366;
    border-radius: 12px;
    padding: 15px;
    box-sizing: border-box;
    
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 2;
}

/* Overlay Scroll Content (Global) */
.overlay-content {
    max-height: 100%;
    overflow-y: hidden; 
    box-sizing: border-box;
    /* Kept the scrollbar hacks for stability, just in case */
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: auto;
}
.overlay-content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none;
}

/* Desktop Hover */
.consultant-photo:hover .overlay {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.consultant-photo:hover .overlay-content {
    overflow-y: auto;
    max-height: 100%;
}

/* NAME & TITLE (Omitted for brevity) */


/* EMAIL ICON WRAPPER STYLES (REQUIRED FOR REVERTED HTML) */
.email-icon-wrapper {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    z-index: 3;
    overflow: hidden; /* CRITICAL FIX: Contain the touch area */
    transform: translateZ(0); /* Isolation fix */
}

.email-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background 0.2s ease, transform 0.2s ease;
}

.email-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain; /* Retaining this fix for the envelope image distortion */
}


/* MOBILE STYLES (max-width: 768px) - REVERTED TO STABLE STATE */
@media (max-width: 768px) {

    .consultant-photo img { height: 250px; }
    .consultant-title { text-align: center; }

    /* 1. Disable Desktop Hover (Essential) */
    .consultant-photo:hover .overlay {
        opacity: 0;
        pointer-events: none;
        transform: translateY(30px);
    }

    /* 2. OPEN State (Activated by JS click) - Now fully stable */
    .consultant-photo.open .overlay {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    /* 3. Enable Scroll when OPEN */
    .consultant-photo.open .overlay-content {
        overflow-y: auto;
        max-height: 100%;
        padding: 0 18px 40px 0; 
        -webkit-overflow-scrolling: touch; 
    }
}

/* ==================================================
   11. SIDEBAR WINDOWS & TESTIMONIALS — MODERNIZED
   ================================================== */
.sidebar_window {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    margin: 8px 0;
    background: linear-gradient(to bottom, #e0e0e0 0%, #ffffff 100%);
    border-radius: 0.5em;
}

.sidebar_window h3 {
    margin-left: 5px;
    padding-left: 0;
}

.sidebar h5 {
    font-size: 16px;       /* new size */
    font-weight: bold;     /* bold text */
    text-decoration: none; /* remove underline */
    font-style: normal;    /* remove italics */
    margin: 0;
    padding: 5px;
}

.sidebar_window ul.item li.big_bullet { margin-left: 20px; }
.sidebar_window ul.item li.small_bullet { margin-left: 35px; }

.sidebar .testimonials,
.sidebar_window .testimonials {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.scroll-up {
    height: 220px;
    overflow: hidden;
    position: relative;
}

.testimonial-track {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    animation: scroll-continuous 55s linear infinite;
}

/* Pause scrolling on hover/focus */
.testimonial-track:hover,
.testimonial-track:focus-within {
    animation-play-state: paused;
}

@keyframes scroll-continuous {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* ==========================
   12. TESTIMONIALS — FINAL CLEAN
   ========================== */

/* Each testimonial item */
.testimonials li {
    padding: 14px 6px;
    border-bottom: 1px dashed #999;  /* dashed line between testimonials */
    color: #015878;
}


/* Testimonial text */
.testimonials li article blockquote {
    font-size: 15px;      /* desired size */
    font-style: italic;   
    line-height: 1.35;
    margin: 0 0 8px 0;    /* vertical space to footer */
    padding-left: 5px;    /* aligns blockquote text */
    color: #015878;
}

.testimonials li article blockquote p {
    font-size: 15px;     
    font-style: italic;
    line-height: 1.35;
    margin: 0;
    padding: 0;
}

/* Footer: cite, role, time */
.testimonials li article footer {
    font-size: 14px;
    font-style: normal;  /* no italic */
    font-weight: normal;
    color: #015878;
    padding-left: 5px;   /* aligns with blockquote */
    margin-top: 8px;     /* vertical gap from blockquote */
}

/* Inline elements: cite and role stay inline */
.testimonials li article footer cite,
.testimonials li article footer .role {
    display: inline;
    font-style: normal;
    font-weight: normal;
}

/* Comma between cite and role */
.testimonials li article footer cite::after {
    content: ", ";
}

/* Space after role, before date */
.testimonials li article footer .role::after {
    content: " ";
}

/* Date on a new line, aligned with blockquote */
.testimonials li article footer time {
    display: block !important;
    margin-top: 2px;
    margin-left: 0;    /* remove extra indent */
    font-style: normal;
    font-weight: normal;
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
    .sidebar .testimonials li article h5 { font-size: 16px; }
    .sidebar .testimonials li article blockquote,
    .testimonials li article footer time { margin-left: 5px; }
}


/* ==================================================
   13. WRAPPER MARGINS
   ================================================== */
.wrapper { margin-top: 15px; margin-bottom: 15px; }

@media (max-width: 480px) {
    body { font-size: 15px; line-height: 1.4; }
    p, li, .main-content { font-size: 17px; }
}

/* === TESTIMONIAL FONT SIZE BOOST (SAFE & ISOLATED) === */

.sidebar .testimonials li article blockquote,
.sidebar .testimonials li article blockquote p {
    font-size: 17px;     /* Main testimonial text */
    line-height: 1.45;
}

.sidebar .testimonials li article footer {
    font-size: 16px;     /* Author + role + date */
}

/* ==================================================
   TABLET & MOBILE HEADER FIX — LOGO, MENU, BUTTONS
   ================================================== */

/* Tablet view: stack logo, menu, and buttons vertically */
@media (max-width: 1024px) {
    .site-header {
        align-items: stretch;        /* fill full width */
        overflow: visible;           /* allow action buttons to show */
        padding-bottom: 20px;        /* extra spacing at bottom */
    }

    .header-common {
        height: auto;                /* grow to fit content */
        min-height: 0;
        max-height: none;
        padding-bottom: 30px;        /* extra space for buttons */
        background-size: cover;       /* maintain image aspect ratio */
        background-position: center;  /* keep image centered */
        background-repeat: no-repeat; /* prevent tiling */
    }

    .menu {
        justify-content: flex-end;   /* RIGHT aligned menu */
        flex-wrap: wrap;
        margin-top: 15px;
    }
}

/* Mobile view (smaller than 768px) */
@media (max-width: 768px) {
    .header-common {
        background-size: cover;       /* maintain aspect ratio on mobile */
        background-position: center;
        background-repeat: no-repeat;
        padding-bottom: 40px;         /* extra space for stacked buttons */
    }

    .menu {
        justify-content: flex-end;
        flex-wrap: wrap;
	margin-top: 5px;
    }
}

.inline-pair {
    display: inline-flex;       /* inline-flex instead of flex */
    flex-wrap: wrap;            /* allow wrapping only if needed */
    align-items: flex-start;
    gap: 6px;
}

.inline-pair h3 {
    margin: 0;
    padding: 0;
    white-space: nowrap;        /* prevent H3 from breaking */
    flex-shrink: 0;
}

.inline-pair p {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;             /* fill remaining space */
    min-width: 0;
}

.main-content .inline-pair {
    /* Use the same left/right padding (20px) as your original .main-content block */
    padding-left: 20px; 
    padding-right: 20px;
    /* This rule will ensure the H3/P pair starts at the correct horizontal position */
}

@media (max-width: 768px) {
    .inline-pair {
        display: block;         /* stack on small screens */
    }
    .inline-pair h3,
    .inline-pair p {
        display: block;
        width: 100%;
        margin-bottom: 6px;
        white-space: normal;
    }
}