/* ==================================================
   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: 36px; padding: 15px; }
h2 { color: #001a4d; font-size: 28px; padding: 15px; }
h3 { font-size: 20px; padding: 10px; }
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
   ================================================== */
.site-header,
.footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.site-header {
    overflow: hidden;               /* keeps content inside header */
    border-radius: 1em;             /* rounded corners */
    border: 1px solid #BEBDBD;      /* border around header */
    background-size: cover;         /* better scaling for background image */
    background-position: center;    /* center the image */
    padding: 0 15px 20px 15px;      /* only bottom padding, no top padding */

    display: flex;                  /* flex layout for logo + menu */
    justify-content: space-between; /* logo left, menu right */
    align-items: flex-start;        /* align logo & menu to top */
    flex-wrap: wrap;                /* stack logo + menu on small screens */

    box-sizing: border-box;         /* includes padding in height calculation */
}

.header-common {
    height: 350px;               /* fixed header height */
    min-height: 0;               /* prevent content from stretching it */
    max-height: 350px;           /* enforce max height */
    background-size: 100% 100%;  /* stretch image */
    background-position: center;
    overflow: hidden;            /* hide overflowing content */
    padding: 0;                  /* remove padding so height is consistent */
}

   .header_index { background-image: url("img/fotolia_59334097_s.jpg"); }     /* Index */
   .header_about { background-image: url("img/fotolia_16618977_s.jpg"); }     /* Team, Partners */
   .header_clients { background-image: url("img/fotolia_20565270_s.jpg"); }   /* Clients */
   .header_contact { background-image: url("img/fotolia_67027071_s.jpg"); }   /* Contact */
   .header_join { background-image: url("img/fotolia_25847669_s.jpg"); }      /* Join, Privacy */
   .header_services {background-image: url("img/fotolia_16863820_s.jpg"); }   /* Services */
   .header_resources { background-image: url("img/fotolia_68710882_s.jpg"); } /* Resources */
   .header_faqs { background-image: url("img/fotolia_56955404_s.jpg"); }      /* FAQs */
   .header_404 { background-image: url("img/Pexels6804.jpg"); }               /* 404 page */

@media (max-width: 768px) {
   .header-common { min-height: 350px; }  /* shared for all headers */

   .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 { float: none; height: auto; width: 70%; max-width: 300px; padding: 0; margin-top: 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
   ================================================== */
.action-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-left: 15px;
}

.action-buttons a.button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    font-size: 18px;
}

.action-buttons a.button span.text {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 0.5em;
    background-color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

/* General action button arrow (used in header) */
.action-buttons a.button::after {
    content: "\21E8"; 
    font-size: 28px;  
    margin-left: 5px; 
    text-decoration: none;
}

/* White arrow only for header buttons */
.site-header .action-buttons a.button::after {
    color: white;
}

/* Bottom action buttons get standard color */
.bottom-buttons a.button::after {
    color: #015878;  /* Replace with your standard color */
}

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

@media (max-width: 600px) {
    .action-buttons {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-left: 15px;
    }
    .action-buttons a.button {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        width: auto;
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ==================================================
   8. COUNTRY LIST
   ================================================== */
.country-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.country-list-container .country-column { display: flex; flex-direction: column; }
.country-list-container .country-column h4 { margin-bottom: 5px; }
.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; }

.country-list-container .country-column h4 { text-align: left; margin-left: 6px; }

@media (min-width: 769px) {
    .country-list-container ul.item { list-style-position: outside; padding-left: 20px; margin-left: 5px; }
    .country-list-container ul.item li.small_bullet { margin-left: 5px; }
}

@media (max-width: 768px) {
    .country-list-container { grid-template-columns: 1fr; }
    .country-list-container .country-column { width: 100%; }
}

/* Remove bullets from empty items */
.country-list-container ul.item li.small_bullet:empty,
.country-list-container ul.item li.small_bullet:only-child:empty,
.country-list-container ul.item li.small_bullet:only-child:empty::before {
    list-style: none;
    content: '';
}

.country-list-container h4.big_bullet:empty {
    list-style: none;
    content: '';
}


/* ==================================================
   9. 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;
    tabindex: 0;
    aria-live: polite;
    aria-atomic: false;
}

.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%); }
}

/* ==========================
   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,
    .sidebar .testimonials li article blockquote p { font-size: 15px; }
    .testimonials li article blockquote { font-size: 14px; }
    .testimonials li article blockquote p { font-size: 14px; }
    .testimonials li article footer { font-size: 14px; padding-left: 5px; }
    .testimonials li article footer time { margin-left: 5px; }
}

@media (max-width: 480px) {
    .testimonials li article blockquote { font-size: 14px; }
    .testimonials li article blockquote p { font-size: 14px; }
    .testimonials li article footer { font-size: 14px; padding-left: 5px; }
    .testimonials li article footer time { margin-left: 5px; }
}

/* ===== EMPTY PLACEHOLDERS FOR COUNTRY GRID (semantic + layout-safe) ===== */

/* For blank <h4> placeholders */
.empty-header {
    display: block;       /* keep spacing as block */
    height: 1.4em;        /* match your h4 height */
    visibility: hidden;   /* hides it visually */
    margin-bottom: 5px;   /* keeps spacing consistent with other headers */
}

/* For blank <li> placeholders */
.empty-row {
    display: list-item;
    height: 1.4em; /* adjust if needed */
    visibility: hidden;
}

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

@media (min-width: 769px) {
    .header-common {
        min-height: 350px;      /* desired header height */
        height: 350px;          /* force exact height */
        background-size: 100% 100%;  /* stretch image to fill width & height */
        background-position: center;
    }
}

@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 */
}