/* Revision: 07-01 */
:root {
    --Blue_Logo: rgb(47, 84, 150);
    --Blue_Highlight_Light: rgb(93, 120, 203);
    --Blue_Highlight_Dark: rgb(47, 98, 187);
    --Blue_Product: rgb(74, 84, 150);
    --Blue_Title_1st_letter: rgb(189, 215, 238);
    --Blue_Title_Follow_Letter: rgb(255, 255, 255);
    --Product_Title: rgb(0, 0, 128);
    --Product_White: rgb(255, 255, 255);
    --Green_Product: rgb(158, 189, 138);
    --Service_Title: rgb(56, 87, 35);
    --Service_White: rgb(255, 255, 255);

    --Border_Radius: 0.625rem ;  /* 10px;  */
    /* --bonhommes-tool-link: url('atsep.html'); */
    --bonhommes-tool-link: url('ATSEP_Page.html');
    --header-height: 10rem; /* 160px; */

     /* Font Families */
    --Font_Primary: 'Calibri', 'Arial', sans-serif; /* Calibri as primary, Arial as fallback */
    --Font_Secondary: 'Inter', sans-serif; /* Secondary font for headings or special elements */

    /* Font Sizes */
    --Font_Size_XL: 3rem;       /* For h1 */
    --Font_Size_L: 2.25rem;     /* For h2 */
    --Font_Size_M: 1.5rem;      /* For h3, nav links */
    --Font_Size_S: 1.125rem;    /* For paragraphs, small headings */
    --Font_Size_XS: 1rem;       /* For small text, captions */

    /* Icon Sizes */
    --Icon_Bar_Size:  1.875rem; /* 30px ÷ 16px = 1.875rem */
    --Icon_Text_Padding: calc(var(--Icon_Bar_Size) + 1.25rem); /* 20px ÷ 16px = 1.25rem */
    --Icon_Font_Size: var(--Font_Size_M); /* Use the medium font size for icons */

      /* Reduced Icon Sizes */
    --Reduced_Icon_Bar_Size:  calc((var(--Icon_Bar_Size)  + 1.25rem) * 0.5); ; /* 30px ÷ 16px = 1.875rem */
    --Reduced_Icon_Text_Padding:  calc((var(--Reduced_Icon_Bar_Size) + 1.25rem) *1.0);  /* 20px ÷ 16px = 1.25rem + 0.5rem */
    --Reduced_Icon_Font_Size: var(--Font_Size_XS); /* Use the medium font size for icons */

        /* Development Mode */
    --Under_Development: 1; /* 1 for true, 0 for false */
    /* Icon Sizes */
    --Icon_Men_At_Work_Size:  6.25rem; /* 100px ÷ 16px = 6.25rem */

     /* Icon Sizes */
    --Icon_Bonhommes_Tool_Size: 6.25rem; /* 100px ÷ 16 = 6.25rem */
    --Logo_Size: 2.5rem; /* 40px ÷ 16 = 2.5rem */

     --Debug_Contact: 0;
}

.font-primary {
    font-family: var(--Font_Primary);
}

.font-secondary {
    font-family: var(--Font_Secondary);
}

[id]{
    scroll-margin-top: calc( var(--header-height) + 0rem);
}

nav {
    height: var(--header-height);
    position: fixed;
    border-bottom: 0px solid white;

}

body {
    font-family: 'Calibri', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
    /* Default background color */
     background-color: lightgray;  

    /* Dark grey */ /* Very light grey */
    /*
      background: linear-gradient(        
        to top right,
        #343333 5%,   
        #cccccc 100%  
    );
    */
    /*
    background-image: url('../D_Asset/Page_Back_Ground-5.jpg');
    */
 
}


/*
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../D_Asset/Page_Back_Ground.png');
    background-size: 50% 50%; 
    opacity: 0.1;
    z-index: -1;
}


/* For a custom image mosaic */

/* Adjust for 4x4 grid */
/* Adjust transparency */
/*
body.mosaic-bg {
    background-image: url('../D_Asset/Page_Back_Ground.png');
    background-size: 25% 25%; 
    opacity: 0.3; 
}
*/

.arrow-icon {
    height: 1em;
    width: auto;
    vertical-align: middle;
    margin: 0 0.3em;
}

.container {
    width: 90%;
    max-width: 75rem; /* 1200px ÷ 16 = 75rem */
    margin: 0 auto;
    padding: 0 1.25rem ; /* 20px; */
}

/*
.btn {
    padding: 0.5rem;
    background-color: var(--Button_Color);
    color: var(--Button_Text_Color);
    border: none;
    border-radius: 16px;
    cursor: pointer;
}
*/
.btn {
    background-color: var(--Blue_Title_1st_letter);
    color: var(--Blue_Logo);
    padding: 0.75rem 1.5rem ;  /* 12px 24px; */
    border : none;
    border-radius: var(--Border_Radius) ; /*  0.3125rem 5px; */
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.bubble-help {
    position: absolute;
    background-color: rgba(248, 248, 177, 0.6); /* Yellow with 80% transparency */
    color: black;
    padding:  0.3125rem  0.650rem ;  /* 5px 10px; */
    border-radius: 0.5rem ;  /* 8px; */
    font-family: 'Inter', sans-serif;
    font-size: var( --Font_Size_XS) ; /* 14px; */
    font-weight: 600;
    z-index: 100;
    display: none; /* Hidden by default */
    pointer-events: none; /* Allows mouse events to pass through */
    white-space: nowrap;
    transform: translateY(-100%); /* Position above the element */
    margin-left: -20px; /* Center relative to the bonhommes-tool */
}


.bonhommes-tool {
    height: 5rem; /* 80px ÷ 16px = 5rem */
    transition: transform 0.2s;
}

.bonhommes-tool:hover {
    transform: translate(0.1875rem, 0.1875rem); /* translate(3px, -3px); */
}
/* Wrap the image in an <a> tag via JavaScript or update your HTML */

/* Responsive Design */
@media screen and (max-width: 1080px) {
    .container {
        width: 95%;
    }
}

@media screen and (max-width: 768px) {
    :root {
        /*--header-height: 9rem;*/ /* 128px = 8 * 16px */
        --header-height: 10.5rem; /* 128px = 8 * 16px */
    }
    .container {
        width: 98%;
    }

    .nav-links {
        gap: 10px;
    }

    :root {
        --Font_Size_XL: 2rem;
        --Font_Size_L: 1.75rem;
        --Font_Size_M: 1.25rem;
        --Font_Size_S: 1rem;
        --Font_Size_XS: 0.875rem;
    }
}

@media screen and (max-width: 480px) {
    .nav-links {
        flex-direction: column;
        gap: 5px;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--Blue_Logo);
        padding: 10px;
    }

    :root {
        --Font_Size_XL: 1.75rem;
        --Font_Size_L: 1.5rem;
        --Font_Size_M: 1.125rem;
        --Font_Size_S: 0.875rem;
        --Font_Size_XS: 0.75rem;
    }
}