@font-face { font-display: swap; font-family: 'Merriweather'; font-style: normal; font-weight: 400; src: url('/fonts/merriweather-v32-latin-regular.woff2') format('woff2'); }
body { min-width: 320px; margin: 0; padding: 0; font-family: 'Merriweather', serif; font-size: 16px; color: #333333; font-weight: 400; text-align: center; height: 100%; overflow-x: hidden; position: relative; }
.body { min-width: 320px; margin: 0; padding: 0; font-family: 'Merriweather', serif; font-size: 16px; color: #333333; font-weight: 400; text-align: center; height: 100%; overflow-x: hidden; position: relative; }
a { font-size: 16px; }
* { box-sizing: border-box; }
.ignore-border-box { box-sizing: content-box; }
.small_box { width: 75%; max-width: 850px; }

.dialog, .dialog2 { height: auto; max-height: 600px; width: 850px; background-color: #fff; padding: 30px 20px 35px 20px; text-align: center; max-width: 80%; position: fixed; top: 50%; left: 50%; 
    transform: translate(-50%,-50%); z-index: 200; max-height: calc(100vh - 150px); overflow-y: auto; display: none;
}
.dialog_column_button_left { width: 49%; float: left; font-size: 1.1em; }
.dialog_column_button_right { width: 49%; float: right; font-size: 1.1em; }
.dialog_no_effect { background-color: #fff; padding: 30px 20px 30px 20px; text-align: center; min-width: 300px; min-height: 180px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200; overflow-y: auto; display: none; }
.close-btn { position: absolute; top: 26px; right: 10px; font-size: 20px; cursor: pointer; background: none; border: none; color: #333; }

a { font-size: 16px; color: #1f5979; }
a:hover { color: #103142; }

/* ---- Shake animation ---- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-4px); }
    30%, 70%      { transform: translateX(4px); }
}
.shake {
    animation: shake 0.5s ease-in-out;
}

.home_text { font-display: swap; font-family: 'Merriweather'; font-style: normal; font-weight: 400; src: url('/fonts/merriweather-v32-latin-regular.woff2') format('woff2'); }


/* PHONE ONLY CSS */
@media only screen and (max-width: 799px) {
    .mob_hidden { display: none; }
    .show_tab { display: none; }
    .show_phone { font-size: inherit; }
    .hide_phone { display: none; }
    .page_width { width: 90%; margin: auto; }
    .page_width_small { width: 90%; }
    .body_page { width: 100%; margin: 0 auto; padding: 0; text-align: center; }
    .small_box { width: 100%; }
    .body_text { font-size: 17px; font-weight: 600; line-height: 25px; color: #676767; }
    .home_col1 { width: 100%; text-align: right; display: block; }
    .home_col2 { width: 100%; text-align: center; padding: 15px 0; }
    .home_col3 { width: 100%; text-align: left; display: block; }
    .home_container { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 20px; width: 90%; margin: auto; height: 190px; text-align: center; }
    .homeBullets { line-height: 30px; font-size: 21px; list-style-type: none; margin-top: 0; overflow-wrap: break-word; }
    .col .homeBullets { margin-left: -15px; }
    .speed_bullet1 { flex-basis: 100%; width: 50%; }
    .obligation_col1 { width: 100%; margin: auto; }
    .obligation_col2 { width: 100%; }
    .speed_column_container { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 20px; padding: 0 10%; align-items: center; justify-items: center; }
    .speed_column_center { grid-row: 1; display: flex; flex-direction: column; align-items: center; text-align: left; width: auto; }
    .speed_column_left { padding-top: 50px; grid-row: 2; display: flex; justify-content: center; }
    .speed_column_right { grid-row: 3; display: flex; justify-content: center; }
    .speed_column_right img, .speed_column_left img { width: 150px; }
    .col_auto_child { display: block; }
    .box_padding { padding: 30px 0; }
    .box_padding_top { padding-top: 30px; }
    .dialog, .dialog2 { height: auto; width: 90%; background-color: #fff; padding: 20px 20px 30px 20px; text-align: center; max-width: 90%; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 200; max-height: calc(100vh - 150px); overflow-y: auto; display: none; }
    .form_box_padding { padding: 20px 20px 20px 20px; }
    .phone_line_box { width: 100%; border-bottom: 1px solid #ccc; margin-bottom: 40px; margin-top: 40px; }
    .dialog_column_button_left { width: 100%; }
    .dialog_column_button_right { width: 100%; padding-top: 25px; }
    .close-btn { position: absolute; top: 16px; right: 10px; font-size: 20px; cursor: pointer; background: none; border: none; color: #333; }
    .dialog_no_effect { background-color: #fff; padding: 20px; text-align: center; min-width: 300px; min-height: 180px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200; overflow-y: auto; display: none; }
}
/* TABLET ONLY CSS */
@media only screen and (min-width: 800px) and (max-width: 1149px) {
    .mob_hidden { display: none; }
    .show_phone { display: none; }
    .hide_tab { display: none; }
    .phone_show { display: none; }
    .page_width { width: 95%; margin: auto; }
    .page_width_small { width: 95%; }
    .small_box { width: 85%; }
    .body_page { width: 100%; margin: 0 auto; padding: 0; text-align: center; }
    .homeBullets { line-height: 26px; font-size: 20px; list-style-type: none; margin-top: 0; overflow-wrap: break-word; }
    
    .obligation_container { display: flex; }
    .speed_column_container { display: flex; justify-content: space-between; align-items: flex-start; max-width: 800px; margin: 0 auto; }
    .speed_column_left { width: 40%; text-align: left; }
    .speed_column_right { width: 20%; text-align: center; }
    .speed_column_center { width: 40%; }
    .box_padding { padding: 50px 0; }
    .box_padding_top { padding-top: 50px; }
    .form_box_padding { padding: 20px 10px 20px 10px; }
}
/* PHONE AND TABLET COMMON CSS */
@media only screen and (max-width: 1149px) {
    .show_pc { display: none; }
    .home_width { width: 100%; padding-top: 30px; padding-bottom: 30px; }
    .home_width::after { content: ""; display: table; clear: both; }
    .home_cert { max-width: 100%; height: auto; }
    /* MAIN MENU */
}
/* PC AND TABLET COMMON CSS */
@media only screen and (min-width: 800px) {
    .body_text { font-size: 17px; font-weight: 600; line-height: 25px; color: #676767; }
    .home_container { padding-top: 60px; margin: 0 auto; min-width: 600px; max-width: 600px; display: flex; }
    .home_row { display: flex; justify-content: space-between; width: 100%; }
    .home_col1 { width: 45%; text-align: right; }
    .home_col2 { width: 10%; text-align: center; padding-top: 10px; }
    .home_col3 { width: 45%; text-align: left; }
    /* @media (min-width: 600px) { .course_home_box { max-width: calc(50% - 20px); } } */
    .speed_bullet1 { text-align: left; }
    .right_70 { width: 70%; }
    .left_30 { width: 30%; }
    .row_container { display: flex; justify-content: space-between; width: 100%; }
    .col_container { width: 100%; display: flex; align-items: flex-start; }
    .col_auto_child { flex: 1 1 auto; width: fit-content; margin: 0 10px; } /* FOOTER COLUMNS */
    .obligation_col1 { width: 25%; margin: auto; }
    .obligation_col2 { width: 75%; }

    .form_box_padding_pc { padding: 20px; }
    .form_box_padding2_pc { padding: 40px; }
    .form_box_pc { border: 1px solid #ccc; border-radius: 10px; box-shadow: 1px 1px 5px #ccc; background: #fff; margin: 10px 0; width: 100%; overflow-wrap: break-word; }
}
/* PC ONLY CSS */
@media only screen and (min-width: 1150px), print {
    .show_tab { display: none; }
    .show_phone { display: none; }
    .show_mobile { display: none; }
    .home_width { width: 1100px; margin: auto; }
    .body_page { width: 1100px; margin: 0 auto; padding: 0; text-align: center; }
    .page_width { width: 100%; }
    .page_width_small { width: 75%; }
    .homeBullets { padding-left: 50px; line-height: 24px; font-size: 19px; list-style-type: none; margin-top: 0; overflow-wrap: break-word; }
    .home_width { width: 1100px; margin: auto; padding: 25px 0; }
    .home_cloumn_bullet_box { width: 80%; }
    .obligation_container { display: flex; justify-content: flex-start; }

    .speed_column_container { display: flex; justify-content: space-between; align-items: flex-start; }
    .speed_column_left { width: 40%; text-align: left; }
    .speed_column_right { width: 20%; text-align: center; }
    .speed_column_center { width: 40%; }
    .home_cert { height: 250px; }
    .site-title { font-size: clamp(20px, 6vw, 36px); font-weight: 900; color: #0A5A82; white-space: nowrap; margin: 0 auto; flex-grow: 1; text-align: center; }
    .box_padding { padding-top: 40px; padding-bottom: 40px; }
    .box_padding_top { padding-top: 40px; }
    .form_box_padding { padding: 20px; }
}

@media only screen and (min-width: 1300px), print {
    .home_width { width: 1300px; margin: auto; }
    .body_page { width: 1300px; margin: 0 auto; padding-left: 15px; padding-right: 15px; text-align: center; }
}





:root { --font-huge: 26px; --font-xxxlarge: 24px; --font-xxlarge: 22px; --font-xlarge: 20px; --font-large: 18px; --font-normal: 16px; --font-small: 14px; --font-xsmall: 12px; --font-tiny: 11px; --font-xtiny: 10px; }
.text { font-size: 15px; color: #656565; width: 300px; height: 35px; border-radius: 3px; border: 1px solid #CCC; padding: 4px 10px; font-weight: 400; box-shadow: 1px 1px 5px #CCC; }
.blue_bold { font-size: 15px; color: #1f5979; font-weight: bold; line-height: 31px; text-shadow: 2px 2px 4px #c9c8c8; list-style: none; text-align: left; margin: 0; padding: 0; }
.home2 { width: 100%; text-align: center; background-color: #fff; padding: 25px 0; }

/* TEXT */
.number { font-family: sans-serif; }
.text-label { color: #9E9E9E; }
.red { color: #BA2323; }
.dark_blue { color: #173e53; }
.blue { color: #1f5979; }
.light_blue { color: #4cbeff; }
.green { color: #3F7D22; }
.white { color: #FFFFFF; }
.light_gray { color: #999; }
.gray { color: #656565; }
.dark_gray { color: #343538; }
.orange { color: #d15921; }
.blue_link { color: #3E5A66; }
.blue_link:link { color: #3E5A66; }
.blue_link:visited { color: #1f5979; }
.blue_link:active { color: #1f5979; }
.blue_link:hover { color: #5CD4FF; }

.font-xxmassive { font-size: 33px; }
.font-xmassive { font-size: 31px; }
.font-massive { font-size: 29px; }
.font-huge { font-size: var(--font-huge); }
.font-xxxlarge { font-size: var(--font-xxxlarge); }
.font-xxlarge { font-size: var(--font-xxlarge); }
.font-xlarge { font-size: var(--font-xlarge); }
.font-large { font-size: var(--font-large); }
.font-normal { font-size: var(--font-normal); }
.font-small { font-size: var(--font-small); }
.font-xsmall { font-size: var(--font-xsmall); }
.font-tiny { font-size: var(--font-tiny); }
.font-xtiny { font-size: var(--font-xtiny); }

.body_text { font-size: 17px; font-weight: 600; line-height: 25px; color: #676767;  }
.tiny { font-size: 12px;  line-height: 20px; }
.small { font-size: 14px; line-height: 28px; }
.medium { font-size: 18px; line-height: 40px; } /* LINE HEIGHT HERE ALIGNS WITH LINE HEIGHT OF input[type=text] */
.large { font-size: 21px; line-height: 38px; }
.xlarge { font-size: 23px; line-height: 38px; }
.title-large { font-size: 25px; line-height: 43px; }


.height-large { line-height: 35px; }

/* ALIGNMENTS */
.letter_spacing { text-justify: inter-word;} /* AUTO ADJUSTS LETTER SPACING FOR A JUSTIFIED TEXT BLOCK */
.wrap { word-wrap: break-word; }
.justify { text-align: justify; text-justify: inter-word; }
.center { text-align: center; }
.middle { vertical-align: middle; }
.left { text-align: left; }
.right { text-align: right; }
.auto_margin { margin: auto; }
.spread { letter-spacing: 1px; }

/* DIV SAPCERS*/
.div_xlarge_spacer { padding-top: 100px; }
.div_large_spacer { padding-top: 50px; }
.login_div_spacer { padding-top: 30px; }
.login_error_message_padding { padding-top: 25px; }
.div_spacer { padding-top: 30px; }
.div_spacer_small { padding-top: 22px; }
.div_tiny_spacer { padding-top: 10px; }
.form_spacer { padding-top: 15px; margin: 0; }
.padding_tiny { padding: 5px; margin: 5px; }
.padding_small { padding: 10px; margin: 10px; }
.padding { padding: 25px; margin: 25px; }
.form_box_padding2 { padding: 40px; }
.form_box { border: 1px solid #ccc; border-radius: 10px; box-shadow: 1px 1px 5px #ccc; background: #fff; margin: 10px 0; width: 100%; overflow-wrap: break-word; }
.big_box { background: #f3e9d5ff; border: solid 1px #B0B0B0; padding: 0px; margin: 0px; color: #333333;  }
.underline_div { border-bottom: 2px solid gray; }
.light_underline_div { border-bottom: 1px solid rgb(167, 167, 167); }

.home_verify { width: 80%; margin: auto; }
.spacer_top { margin-top: 60px; }
.spread { letter-spacing: 1px; }
.center { text-align: center; }
.bold { font-weight: bold; }
.column_container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }

.col { flex: 1 1 48%; min-width: 320px; }
.bullet_title { overflow-wrap: break-word; }
.home_li { line-height: 40px; }
.auto_col { flex: 1 1 auto; width: fit-content; margin: 0 10px; }
.auto_col_container { width: 100%; display: flex; align-items: flex-start; }

/* MODERN BUTTONS – YOUR EXACT ORIGINAL COLORS + FULLY CONSISTENT (2025 READY) */
.button, .submit { position: relative; display: inline-block; width: auto; min-width: 220px; padding: 16px 32px; text-align: center; font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: #FFFFFF; border: none; border-radius: 50px; cursor: pointer; transition: background 0.35s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.12); text-decoration: none; overflow: hidden; }
.button-tiny { font-size: 0.85rem; padding: 10px 20px; min-width: auto; }
.button-small { font-size: 1rem; padding: 12px 28px; }
.button-regular { font-size: 1.15rem; padding: 16px 32px; }
.button-large { font-size: 1.28rem; padding: 18px 44px; }
.button-xlarge { font-size: 1.38rem; padding: 20px 52px; }
.button-huge { font-size: 1.5rem; padding: 22px 60px; }
.long_button, #long_button { width: 100%; min-width: auto; }

/* YOUR ORIGINAL COLORS – EXACT MATCH */
.button-dark_blue, .submit.button-dark_blue { background: #163d52; }
.button-dark_blue:hover, .submit.button-dark_blue:hover { background: #3492c5; }

.button-blue, .submit.button-blue, .button-blue-large, .submit.button-blue-large { background: #1f5979; }
.button-blue:hover, .submit.button-blue:hover, .button-blue-large:hover, .submit.button-blue-large:hover { background: #3492c5; }

.button-black, .submit.button-black { background: #343538; }
.button-black:hover, .submit.button-black:hover { background: #1f5979; }

.button-yellow, .submit.button-yellow { background: #d15921; }
.button-yellow:hover, .submit.button-yellow:hover { background: #af3700; }

.button-green, .submit.button-green { background: #428000; }
.button-green:hover, .submit.button-green:hover { background: #69c904; }

.button-red, .submit.button-red { background: #b02022; }
.button-red:hover, .submit.button-red:hover { background: #751719; }

.button-white, .submit.button-white { background: #ffffff; color: #333333; border: 2.8px solid #cccccc; }
.button-white:hover, .submit.button-white:hover { background: #1f5979; color: #ffffff; }

/* DISABLED */
.button-disabled, .submit:disabled, .button[disabled] { background: #b5b5b5 !important; color: #333333 !important; cursor: not-allowed !important; box-shadow: none !important; opacity: 0.6; }

/* FIX <a> LINKS TO BEHAVE LIKE BUTTONS */
a.button, a.submit { display: inline-block; line-height: normal; text-decoration: none; color: inherit; }

/* FORCE WHITE TEXT ON ALL COLORED BUTTONS (INCLUDING <a>) */
.button-blue, .submit.button-blue, .button-blue-large, .submit.button-blue-large, .button-dark_blue, .submit.button-dark_blue, .button-black, .submit.button-black, .button-yellow, .submit.button-yellow, .button-green, .submit.button-green, .button-red, .submit.button-red, a.button-blue, a.button-yellow, a.button-green, a.button-red, a.button-black, a.button-dark_blue { color: #FFFFFF !important; }

/* MOBILE */
@media (max-width: 640px) {
    .button, .submit { font-size: 1.1rem !important; padding: 14px 28px !important; min-width: 100% !important; }
    .button-large, .submit.button-large { font-size: 1.22rem !important; padding: 16px 36px !important; }
    .button-xlarge, .submit.button-xlarge { font-size: 1.3rem !important; padding: 18px 40px !important; }
}


.shadow_box { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6); }
.clear { clear: both; }
.col2-1 { width: 100%; text-align: left; }
.col2-2 { width: 100%; text-align: left; }

/* OVERLAYS AND DIALOGS */
.loading_box { width: 100%; text-align: center; display: none; }


/* NEW DIALOGS */
.dialog_show { display: block; animation: fadeInScale 0.5s ease-out forwards; }
@keyframes fadeInScale {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.overlay {  position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 100; display: none; }


/* MENU */

nav { min-width: 320px; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 0 10px 5px 10px;; position: sticky; top: 0; z-index: 10; }
.container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; }
.logo-container { display: flex; align-items: center; gap: 1px; flex-shrink: 1; min-width: 0; max-width: 100%; justify-content: center; flex-grow: 1; }
.contact-lang-container { display: flex; align-items: center; gap: 1.5rem; }
.logo_new { height: 60px; width: auto; }
.menu-toggle { height: 40px; width: 40px; display: none; background: none; border: none; cursor: pointer; color: #4b5563; margin-left: -10px; }
.menu-toggle:hover, .menu-toggle:focus { outline: none; border: none; }
.menu-toggle svg { width: 1.5rem; height: 1.5rem; }
.menu, .menu_mobile { display: flex; align-items: center; gap: 10px; }
.menu a, .menu_mobile a, .menu span, .menu_mobile span, .contact-lang-container span { color: #4b5563; text-decoration: none; padding: 0.5rem 0.75rem; transition: color 0.2s; font-size: 1rem; font-weight: 700; }
.menu a, .menu_mobile a { position: relative; }
.menu a::after, .menu_mobile a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0.75rem; background-color: #1f5979; transition: width 0.3s ease; }
.menu a:hover::after, .menu a.active::after, .menu_mobile a:hover::after, .menu_mobile a.active::after { width: calc(100% - 1.5rem); }
.menu a:hover, .menu_mobile a:hover { color: #1f5979; }
label.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
.close-button, .close-button:hover { font-family: arial; display: none; position: fixed; top: 1rem; left: calc(80% + 20px); background: none; border: none; font-size: 36px; color: #fff; cursor: pointer; padding: 1rem; line-height: 1; font-weight: 400; z-index: 102; }
.close-button:focus { outline: 2px solid #1f5979; }
.mobile_menu_heading { font-weight: 900; color: #0A5A82; height: 40px; width: 100%; text-align: center; font-size: 24px; border-bottom: 1px solid #173e53; }
.custom-select { margin-top: 0; position: relative; display: inline-block; font-size: 13px; }
.selected { padding: 4px 10px; background: #FFF; border-radius: 8px; cursor: pointer; user-select: none; }
.options { display: none; position: absolute; top: 100%; left: -60px; background: white; border: 1px solid #ddd; border-radius: 8px; list-style: none; padding: 0; margin: 5px 0 0; width: 150px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 1000; }
.options li { padding: 15px 16px; cursor: pointer; font-size: 16px; }
.options li:hover { background: #4cbeff; color: white; }
.options.show { display: block; }
.site-title { font-weight: 900; color: #0A5A82; white-space: nowrap; margin: 0 auto; flex-grow: 1; text-align: center; }
@media (min-width: 800px) {
    .menu .contact-item, .menu_mobile .contact-item, .menu select, .menu_mobile select { display: none; }
    .menu select, .menu_mobile select, .contact-lang-container select { padding: 0.5rem; border: none; color: #4b5563; background-color: #ffffff; font-size: 1rem; }
}
@media only screen and (max-width: 799px) {
    nav { padding: 10px 10px 0; height: 55px; }
    .head_phone { display: none; }
    .head_lang { padding: 0.2rem; border: none; color: #4b5563; background-color: #ffffff; font-size: 14px; }
    .site-title { font-size: clamp(17px, 3vw, 25px); }
}
@media (max-width: 1149px) {
    .menu { display: none; }
.menu_mobile {
        /* ← KEEP ALL YOUR EXISTING STYLES ← */
        width: 80%;
        height: 100vh;                    /* ← NEW */
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        text-align: left;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        opacity: 0;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out;
        background-color: #ffffff;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
        z-index: 110;
        display: flex;

        overflow-y: auto;                 /* ← NEW */
        -webkit-overflow-scrolling: touch; /* ← NEW (iOS smooth) */
    }

    .menu_mobile.menu-visible {
        transform: translateX(0);
        opacity: 1;
    }
    .menu-toggle { display: block; }
    .menu_mobile a, .menu_mobile span, .menu_mobile select { display: block; width: 100%; padding: 0.5rem; }
    .menu_mobile a::after { left: 0; }
    .menu_mobile a:hover::after, .menu_mobile a.active::after { width: 100%; }
    .close-button.visible { display: block; }
    .site-title { font-size: clamp(17px, 4vw, 35px); }
    .menu_mobile {
        /* ... your existing styles ... */

        height: 100vh;           /* ← ADD */
        overflow-y: auto;        /* ← ADD */
        -webkit-overflow-scrolling: touch; /* ← ADD (for iOS) */
    }
}
@media (min-width: 1150px) {
    .menu_mobile { display: none; }
    .menu { display: flex; }
}
@media (max-width: 980px) {
    .show_mobile { display: block; }
    .head_phone { display: none; }
    .col_container .guarantee_width { width: 100%; flex: 0 0 100%; }
    .guarantee_page .col_container { flex-direction: column; } */
    .guarantee_width .show_phone { display: block; }
}
@media (max-width: 380px) {
    .contact-lang-container { display: none; }
}





/* FOOTER */
.footer { background: #343538; border-top: solid 1px #000;  border-bottom: solid 1px #000; box-shadow: 1px 0 0 1px #ccc; }
.footer_spacer { padding-top: 75px; }
.footer_left { padding-left: 15px; float: left; display: table-cell; }
.footer_links { margin-left: auto; margin-right: auto; width: 900px; text-align: center; }

.dialog_dropbox { background-color: white; width: 100%; margin: 0 auto; padding: 10px 0px; border-radius: 7px; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 1px 1px rgba(50,50,50,0.1); cursor: pointer; outline: none; text-align: center; font-size: 18px; color: #008DBF; position: relative; }
.dialog_dropbox:after { content: ""; width: 0; height: 0; position: absolute; right: 15px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #8aa8bd transparent; }


.uni-card-link { display: block; text-decoration: none; color: inherit; border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.uni-card-clickable { cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.uni-card-link:hover .uni-card-clickable { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.18) !important; }

.uni-header { font-family: 'Inter', system-ui, sans-serif; text-align: center; padding: 15px 20px 30px 20px; background: linear-gradient(135deg, #1f5979 0%, #173e53 100%); color: white; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.uni-title { font-size: 2rem; font-weight: 300; margin: 0 0 10px; }
.uni-subtitle { font-size: 1.15rem; opacity: 0.95; }

.uni-info-card { font-family: 'Inter', system-ui, sans-serif; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin-bottom: 30px; border-left: 5px solid #1f5979; }
.uni-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.uni-label { font-weight: 600; color: #555; font-size: 21px; line-height: 45px; }
.uni-value { font-size: 21px; font-weight: 500; line-height: 45px;}
.uni-code { font-family: 'Courier New', monospace; background: #e3f2fd; color: #1565c0; padding: 0px 16px; border-radius: 8px; font-weight: bold; letter-spacing: 1.5px; font-size: 1.2rem; display: inline-block; }

.uni-section-title { font-size: 1.7rem; margin: 35px 25px 20px; color: #1f5979; padding-bottom: 10px; border-bottom: 3px solid #1f5979; display: inline-block; }
.uni-section-title2 { font-size: 1.7rem; color: #1f5979; padding-bottom: 10px; border-bottom: 3px solid #1f5979; display: inline-block; }
.section-title { margin: 35px 25px 20px; padding-bottom: 10px; border-bottom: 3px solid currentColor; display: inline-block; }

.uni-card { font-family: 'Inter', system-ui, sans-serif; position: relative; overflow: hidden; background: white; color: #2c3e50; border-radius: 12px; padding: 22px; margin-top: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; }
.uni-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; }
.uni-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.uni-card p { line-height: 30px; }

.uni-border-green::before { background: linear-gradient(to bottom, #4caf50, #388e3c); box-shadow: 0 0 20px rgba(76,175,80,0.5); }
.uni-border-red::before   { background: linear-gradient(to bottom, #f44336, #d32f2f); box-shadow: 0 0 20px rgba(244,67,54,0.4); }
.uni-border-dark_blue::before{background:linear-gradient(to bottom,#173e53,#112f3d);box-shadow:0 0 20px rgba(23,62,83,0.4);}
.uni-border-blue::before{background:linear-gradient(to bottom,#1f5979,#194863);box-shadow:0 0 20px rgba(31,89,121,0.4);}
.uni-border-light_blue::before{background:linear-gradient(to bottom,#4cbeff,#32a8e6);box-shadow:0 0 20px rgba(76,190,255,0.4);}
.uni-border-white::before{background:linear-gradient(to bottom,#FFFFFF,#e6e6e6);box-shadow:0 0 20px rgba(255,255,255,0.5);}
.uni-border-light_gray::before{background:linear-gradient(to bottom,#999999,#808080);box-shadow:0 0 20px rgba(153,153,153,0.4);}
.uni-border-gray::before{background:linear-gradient(to bottom,#656565,#505050);box-shadow:0 0 20px rgba(101,101,101,0.4);}
.uni-border-dark_gray::before{background:linear-gradient(to bottom,#343538,#222225);box-shadow:0 0 20px rgba(52,53,56,0.4);}
.uni-border-orange::before{background:linear-gradient(to bottom,#FFA500,#e69500);box-shadow:0 0 20px rgba(255,165,0,0.4);}
.uni-border-yellow::before{background:linear-gradient(to bottom,#f06626,#d15921);box-shadow:0 0 20px rgba(255,165,0,0.4);}
.uni-border-blue_alt::before{background:linear-gradient(to bottom,#3E5A66,#314854);box-shadow:0 0 20px rgba(62,90,102,0.4);}
.uni-border-black::before{background:linear-gradient(to bottom,#000000,#0c0c0c);box-shadow:0 0 20px rgba(62,90,102,0.4);}

.alt-uni-card-body {
    text-align: justify;
    text-justify: inter-word; /* helps some browsers */
    font-weight: normal;
}

/* On mobile/small screens: switch to left-aligned (or start) */
@media (max-width: 768px) {
    .alt-uni-card-body {
        text-align: left;        /* or text-align: start; */
        hyphens: auto;           /* optional: better breaking on small screens */
        word-spacing: normal;   /* prevents manual overrides */
        letter-spacing: normal;
        font-weight: normal;
    }
    
    /* If you have a separate class for justified text, override it */
    .alt-uni-card-body p,
    .alt-uni-card-body div {
        text-align: left !important;
        font-weight: normal;
    }
}



.uni-card-title { font-size: 28px; font-weight: 600; color: #2c3e50; margin: 0 0 15px; line-height: 80px; }
.uni-units { font-size: 0.95rem; color: #666; margin-left: 8px; }
.uni-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.uni-detail > .uni-label { font-weight: 500; color: #555; font-size: 20px; }
.uni-detail > .uni-value { font-size: 20px; margin-top: 4px; }
.uni-badge { display: inline-block; padding: 7px 15px; border-radius: 25px; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; }
.status-completed   { background: #e8f5e8; color: #2e7d32; border: 1px solid #a5d6a7; }
.status-inprogress  { background: #fff3e0; color: #ef6c00; border: 1px solid #ffe082; }
.status-notstarted  { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
.uni-muted { color: #999 !important; font-style: italic; }
.uni-no-results { text-align: center; padding: 80px 20px; }
.uni-alert-warning {
    display: inline-block;
    background: #fff8e1;           /* very soft warm background */
    color: #c46b1d;                 /* deep, readable amber text */
    padding: 25px 50px;
    border: 1px solid #ffe082;      /* gentle matching border */
    font-size: 1.3rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    line-height: 1.5;
    border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course_info_card { font-size: 21px; font-weight: 600; color: #2c3e50; margin: 0 0 15px; line-height: 30px; }
.uni-detail > .uni-info_label { font-weight: 500; color: #555; font-size: 16px; }
.uni-detail > .uni-info_value { font-size: 16px; margin-top: 4px; }

@media (max-width: 980px) {
    .uni-hide-mobile { display: none !important; }
    .uni-card-grid { margin: auto; padding: 10px 0; }
    .uni-detail { align-items: center; }
    .uni-detail > .uni-value,
    .uni-detail > .uni-badge { font-size: 1.20rem; font-weight: 600; color: #2c3e50; text-align: right; }
    .uni-badge { padding: 9px 20px !important; font-size: 0.92rem !important; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.09); min-width: 120px; text-align: center; }
    .uni-detail > .uni-value.uni-muted { font-size: 1.15rem; color: #aab3c0; }
    .uni-card-title {
        font-size: 1.48rem;
        line-height: 1.25;
        text-align: center;
        text-wrap: balance;            /* 99%+ of 2025 users see perfect balanced + centered text */
        max-width: 32ch;
        margin: 0 auto;
        font-weight: 500;
        /* Fallback only for the <1% of browsers that still don’t support text-wrap: balance */
        @supports not (text-wrap: balance) {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-box-pack: center;   /* keeps it centered even in fallback */
        }
    }
.uni-card {
        padding: 24px 20px;
        margin-bottom: 24px;
        margin-top: 24px;
    }
    
    /* Optional: give the very first card on the page the same spacing */
    .uni-card:first-child {
        margin-top: 20px;
    }
}

@media (max-width: 980px) {
    .uni-page { margin: 15px; }
    .uni-title { font-size: 1.9rem; }
    .uni-grid, .uni-card-grid { grid-template-columns: 1fr; }
}

.box_wrapper { max-width: 100%; margin: 0 auto; font-family: 'Inter', system-ui, sans-serif;
}

/* HEADER */

.box_header { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: white; position: relative; padding: 80px 20px 80px; text-align: center; margin: auto 0px; }
.box_header::before {
    content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(31,89,121,0.08), rgba(230,126,34,0.05)); border-radius: 40px; backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 30px 80px rgba(31,89,121,0.18); z-index: -1;
}
.box_header h1 { 
    font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 300; letter-spacing: -2px; margin: 0; background: linear-gradient(90deg, #1f5979 0%, #e67e22 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 0.95; display: inline-block; padding-bottom: 0.1em; 
}
.box_header p {
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    line-height: 1.35;
    color: #ececec;
    font-weight: 400;
    
    max-width: min(720px, 92vw);   /* safer than fixed 720px on narrow screens */
    margin: 28px auto 0;
    
    text-align: center;
    text-wrap: balance;            /* perfect balanced centering in all modern browsers */
}

/* Fallback for the very few browsers that still don’t support text-wrap: balance */
@supports not (text-wrap: balance) {
    .box_header p {
        display: -webkit-box;
        -webkit-line-clamp: 4;     /* generous – prevents awkward early cuts */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
.box_spacer { margin: 60px 0; }
.box_card { background: rgba(255,255,255,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 36px; padding: 64px 70px; margin: 0px 0; box-shadow: 0 25px 70px rgba(0,0,0,0.09); border: 1px solid rgba(255,255,255,0.4); transition: transform 0.5s ease; }
.box_card:hover { transform: translateY(-10px); }
.box_card_text { font-size: 1.52rem; line-height: 2.3; color: #2c3e50; }
.box_card_text p { margin: 0 0 42px; }
.box_card_text p:last-child { margin-bottom: 0; }
.box_card_seal { text-align: center; margin-top: 50px; }
.box_card_img { max-width: 300px; width: 100%; height: auto; border-radius: 32px; box-shadow: 0 20px 50px rgba(0,0,0,0.18); transition: transform 0.4s ease; }
.box_card_img:hover { transform: translateY(-12px) scale(1.03); }
.pop { color: #e67e22; font-weight: 700; }
.accent { color: #d15921; font-weight: 700; }

/* ==========================================================================
   YOUR EXACT BREAKPOINTS – IN CORRECT ORDER
   ========================================================================== */

/* Desktop – YOU NOW FULLY CONTROL LEFT/RIGHT PADDING */
@media only screen and (min-width: 1150px) {
    .box_spacer { margin: 40px 0; }
    .box_card    { padding: 40px 40px !important; }   /* ← WORKS 100% */
    .box_card_text { font-size: 1.58rem; line-height: 2; }
    .box_card_img  { max-width: 340px; }
}

/* Tablet */
@media only screen and (min-width: 800px) and (max-width: 1149px) {
    .box_spacer { margin: 60px 0; }
    .box_card { padding: 60px 50px !important; }
    .box_card_text { font-size: 1.48rem; }
    .box_card_text p { margin: 0 0 20px; }
    .box_card_img { max-width: 300px; }
}

/* Phone */
@media only screen and (max-width: 799px) {
    .box_header {  padding: 30px 30px 30px 30px; }
    /* .box_header { padding: 70px 20px 80px; margin: -30px auto 60px; border-radius: 32px; } */
    .box_header h1 {
        font-size: clamp(2.1rem, 6.5vw + 0.5rem, 4.5rem);
    }
    .box_spacer { margin: 25px 0; }
    .box_card { padding: 25px 25px !important; border-radius: 28px; margin: 25px 0; }
    .box_header p { margin: 10px 10px 10px 0; }
    .box_card_text { font-size: 1.38rem; line-height: 1.5; }
    .box_card_img { max-width: 260px; }
}



.orange-title {
    font-size: clamp(2.6rem, 6vw, 4rem);
    background: linear-gradient(90deg, #e67e22 0%, #1f5979 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}


.page-wrapper { max-width: 1200px; margin: 0 auto;}
.page-spacer { padding-top: 60px; }

.gray-page { padding: 60px 20px; background: #f8fafc; }
.light-blue-page { padding: 60px 20px; background: linear-gradient(135deg, #f0f9ff 0%, #e4f5ff 100%); }
.orange-page { padding: 60px 20px; background: linear-gradient(135deg, #f0f9ff 0%, #fef3c7 100%); }


.gray-page-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 50px; text-align: center; }
.gray-page-item { background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); border-radius: 32px; padding: 60px 40px; box-shadow: 0 30px 80px rgba(0,0,0,0.1); transition: transform 0.4s; }
.gray-page-item:hover { transform: translateY(-15px); }
.gray-page-item h3 { font-size: 2rem; margin-bottom: 16px; color: #1e293b; }