@charset "UTF-8";
/* CSS Document */

/* 1. Global Mobile Fixes (Apply to everything) */
body { 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden;
    font-family: Georgia, Palatino Linotype, Palatino, Times, Times New Roman, serif;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f4f4f4;
    line-height: 1.4;
}

a {
  text-decoration: none;
}

img { max-width: 100%;
    height: auto !important;
}

/* Font See Also & Enter Section */
    .see-enter {
        font-family: Georgia, Palatino Linotype, Palatino, Times, Times New Roman, serif;
        font-size: 15px;
        color: #004DD0;
        font-style: normal;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 10px;
    }
/* Normal State */
    a.see-enter {
        font-family: Georgia, Palatino Linotype, Palatino, Times, Times New Roman, serif;
        font-size: 15px;
        color: #004DD0;
        font-style: italic;
        font-weight: bold;
        text-decoration: none;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 10px;
        display: inline-block;
    }

/* Hover State */
    a.see-enter:hover {
        color: #00338C; /* Slightly darker blue */
        text-decoration: underline;
    }

/* Main Container with 900px limit and border */
        .wrapper {
            max-width: 900px;
            width: 100%;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            box-sizing: border-box;
        }

/* Style for your H2 headings */
    h2 {
            color: #004DD0;          /* Persian Blue color for the font */
            font-family: Georgia, Palatino Linotype, Palatino, Times, Times New Roman, serif;
            font-size: 20px;
            font-style: normal;
            margin-top: 0px;
            margin-bottom: 0px; 
    }

/* Style for your H3 headings */
    h3 {
            color: #004DD0;
            font-size: 18px;             
            font-style: italic;
            margin-bottom: 0px;
            margin-top: 0px; 
    }
        
    h3 a {
            color: #303030;
            text-decoration: none;
            transition: 0.1s;
    }

    h3 a:hover {
            color: #004DD0; 
            text-decoration: underline;
    }

/* Style for your H4 headings */
    h4 {
            color: #004DD0;   
            font-size: 16px;
            font-style: italic;
            margin-top: 10px;    
            margin-bottom: 0px;
    }
        
        
    h4 a {
            color: #303030;    
            text-decoration: none;
            transition: 0.1s; 
    }

    h4 a:hover {
            color: #004DD0; 
            text-decoration: underline;
    }

/* Logo Section */
        .header-logo {
            padding: 20px;
            text-align: left;
        }


        /* Navigation Bar */
        .nav-bar {
            background-color: #2658C1;
            padding: 10px 20px;
            position: relative;
        }
        
/* Hide Hamburger by default (Desktop) */
        .menu-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            width: 40px;
            gap: 5px;
        }
        .menu-toggle span {
            display: block;
            height: 3px;
            width: 100%;
            background-color: white;
            border-radius: 3px;
        }

        .nav-bar ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .nav-bar a {
            color: white;
            text-decoration: none;
            font-size: 15px;
            font-weight: bold;
        }

/* Hero Image Box */
        .hero-image {
            width: 100%;
            height: auto; /* Desktop Height */
            overflow: hidden;
             
        }
        .hero-image img {
            width: 100%;
            height: auto;                        
            display: block;
}

/* 2. Banner/Slider Fixes */
.banner-container { 
    width: 100% !important;
    overflow: hidden;
}
.banner-wrapper img { 
    width: 100% !important;
}

/* 3. The New Flexbox Layout (No Tables) */
.content-wrapper {
    display: flex;
    flex-wrap: wrap; 
    max-width: 900px;
    margin: 0 auto;
    background-color: #f4f4f4;
    text-align: left;
}

.main-content {
    flex: 2;
    min-width: 300px; 
    padding: 15px;
    box-sizing: border-box;
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Dwingt de inhoud naar de bovenkant */
    
    flex: 1;
    min-width: 280px; 
    padding: 15px;
    background: #F3F8FF;
    box-sizing: border-box;
    border-left: 1px dotted #C9C9C9;

    /* Zorg dat de sidebar de volledige hoogte van de parent vult */
    align-self: stretch; 
}

/*  Photos & Illustrations descriptions Font */
        .fontiran2  {
            font-family : Georgia, Palatino Linotype, Palatino, Times, Times New Roman, serif;
            font-size : 10pt;
            color : #323232;
            text-decoration : none;	
        }
        .fontiran2 a  {
            font-family : Georgia, Palatino Linotype, Palatino, Times, Times New Roman, serif;
            font-size : 10pt;
            font-weight : bold;
            color : #323232;
            text-decoration : none;
        }
        .fontiran2 a:hover  {
            font-family : Georgia, Palatino Linotype, Palatino, Times, Times New Roman, serif;
            font-size : 10pt;
            font-weight : bold;
            color : #004DD0;
            text-decoration : underline;
        }

/* Footer Menu (Outside the border) */
        .footer-menu {
            max-width: 900px;
            width: 100%;
            padding: 15px 0;
            padding-right: 20px;
            text-align: right;
        }
        .footer-menu ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }
        .footer-menu a {
            color: #6B6B6B;
            text-decoration: none;
            font-size: 14px;
        }
        
/* Copy Right Font */
        .fontcopyright {
            max-width: 900px;
            width: 100%;
            text-align: right;
            font-family: Georgia, Palatino Linotype, Palatino, Times, Times New Roman, serif;
            color: #a0a0a0;
            font-size: 10pt;
            font-style: italic;
            padding-bottom: 15px; 
            padding-right: 30px; 
            line-height: 15pt;
            text-decoration: none;
        }

/* 4. Desktop Adjustments (Screens wider than 900px) */
@media screen and (min-width: 901px) {
    /* Only apply table widths to the Header/Nav areas that still use tables */
    .homenavigationbar, #header table { 
        width: 900px !important; 
        margin: 0 auto; 
    }
    #phone-only-message { display: none; }
}

/* 5. Mobile Specific Adjustments (Screens smaller than 900px) */
@media screen and (max-width: 900px) {
    .content-wrapper {
        flex-direction: column; /* Stacks main content on top of sidebar */
    }
    
/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
/* Show Hamburger */
    .menu-toggle {
        display: flex;
    }
@media (max-width: 768px) {
        .hero-image {
            height: 150px; /* Mobile Height */
    }
    
/* Make any remaining legacy tables scale to screen width */
    table, tr, td { 
        display: block !important; 
        width: 100% !important; 
    }

    .main-content, .sidebar {
        width: 100% !important;
        flex: none;
    }
}

/* Hide Menu initially on mobile */
        .nav-bar ul {
                display: none;
                flex-direction: column;
                width: 100%;
                padding-top: 15px;
                gap: 10px;
            }

/* Show Menu when 'active' class is added via JS */
        .nav-bar ul.active {
                display: flex;
            }

        .main-body {
                flex-direction: column;
            }
        .sidebar-box {
                width: calc(100% - 40px);
                margin: 10px 20px;
            }
        .footer-menu ul {
                flex-direction: column;
                align-items: flex-end;
                padding-right: 10px;
            }
        }