html:not([data-device="mobile"]) ::-webkit-scrollbar-track { background-color: #FFF; }
html:not([data-device="mobile"]) ::-webkit-scrollbar { width: 6px; background-color: #FFF; }
html:not([data-device="mobile"]) ::-webkit-scrollbar-thumb { background-color: var(--quinary-color); }

* { box-sizing: border-box }

body { color: var(--text-color); }
a { color: var(--text-color); }

main { position: relative; }
main.overlay::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 1000 }

.headerblock2 { background: var(--tertiary-color); }

.top-header { width: 100%; height: var(--top-header-height); overflow: hidden; background-color: var(--quinary-color); display: flex; justify-content: space-between; position: sticky; padding-top: var(--top-header-margin); top: 0; left: 0; z-index: 999999; padding-inline: var(--global-padding-inline); transition: all 0.3s }
.top-header > .top-header-dx { width: 100%; display: flex; align-items: center; gap: 25px; justify-content: flex-end; }
/*body:has(.headerblock1) .top-header { background: transparent; position: fixed; }*/

header { --logo-width: 450px; height: var(--header-height); width: 100%; background-color: var(--quinary-color); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--global-padding-inline); position: sticky; top: var(--top-header-height); left: 0; z-index: 999999; transition: all 0.3s; }
/*body:has(.headerblock1) header { background: transparent; position: fixed; }*/
.header-sx { display: flex; align-items: center; flex: 1; }
.header-dx { display: flex; justify-content: flex-end; gap: 40px; align-items: center; flex-grow: 1; }

form.homepage-wrapper header, form.homepage-wrapper .top-header { background-color: transparent; position: fixed; }

header .company-logo { display: none; position: relative; z-index: 10000; transform: translateY(-30px); transition: 0.3s linear; }
header .company-logo.anniversary { display: block; }
header .company-logo a { display: inline-block; }
header .company-logo img { width: var(--logo-width); height: auto; transition: 0.3s linear; }

body.scrolled header { background-color: var(--quinary-color); }
body.scrolled .top-header { background-color: var(--quinary-color); }

.center-footer { background: var(--primary-color); display: flex; justify-content: space-between; align-items: center; padding-block: 30px; padding-inline: var(--global-padding-inline); }
.center-footer-sx, .center-footer-dx { flex: 1; }
.center-footer-dx { display: flex; justify-content: flex-end; }
.center-footer .company-logo img { width: 270px; height: auto; }
.sharing-tools { display: flex; align-items: center; }
.sharing-tools > span { color: #FFF; margin-right: 18px; font-size: 0.9em; text-transform: capitalize; font-weight: 300; }
.sharing-tools > a { display: block; }
.sharing-tools > a:not(:last-child) { margin-right: 12px; }
.sharing-tools > a > svg { width: 24px; fill: #FFF; transition: 0.3s linear; }

.top-footer { --internal-padding-top-footer: 100px; background: var(--primary-color); padding: 70px var(--global-padding-inline); display: flex; }
.top-footer-sx { width: 50%; position: relative; padding-right: var(--internal-padding-top-footer); }
.top-footer-sx:after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 85%; width: 1px; background-color: var(--senary-color); }
.top-footer-dx { width: 50%; padding-left: var(--internal-padding-top-footer); }
.bottom-footer { background: var(--tertiary-color); font-weight: 300; color: #FFF; font-size: 0.9rem; padding-block: 20px; text-align: center; padding-inline: var(--global-padding-inline); }

.homepage-wrapper main { background: var(--tertiary-color); }

/*Google Recaptcha 3.0*/
.grecaptcha-badge { visibility: hidden; }
.form-recaptcha-privacy { font-weight: 300; }
.form-recaptcha-privacy a { text-decoration: underline; color: #000; }

@media (max-width:1600px) {
    .top-footer { --internal-padding-top-footer: 70px; }
}

@media (max-width:1400px) {
    header { --logo-width: 400px; }
    .top-footer { --internal-padding-top-footer: 40px; }
}

@media (max-width:1200px) {
    header { --logo-width: 300px; }
    .center-footer .company-logo img { width: 230px; }
    .top-footer { --internal-padding-top-footer: 0px; display: block; padding: 0; }
    .top-footer-sx, .top-footer-dx { width: 100%; padding: 40px calc(var(--global-padding-inline) * 3); }
    .top-footer-sx:after { display: none; }
    .top-footer-dx { background: var(--tertiary-color); }
}

@media (max-width:1023px) {
    .top-header { display: none; }
    header { --logo-width: 300px; top: 0; }

    header .company-logo { transform: translateY(0px); }
    .header-center { }
    .header-dx { gap: 30px; }

    .center-footer-center { display: none; }
    .top-footer-sx, .top-footer-dx { padding-inline: var(--global-padding-inline); }
}

@media (max-width:640px) {
    header { --logo-width: 250px; }
    .center-footer { flex-direction: column; gap: 40px; padding-top: 40px; }
    .center-footer-center { display: block; }
    .top-footer-dx { background: var(--primary-color); padding-top: 0; }
    .top-footer:after { content: ''; position: absolute; left: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 1px; background-color: var(--senary-color); }
}

@media (max-width:480px) {
    form.homepage-wrapper .top-header, .top-header { display: block; position: sticky; background: var(--primary-color); padding-bottom: var(--top-header-margin); }
    .top-header { background: var(--primary-color); }
    header { --logo-width: 200px; top: var(--top-header-height); }
    header .company-logo { display: block; }
    header .company-logo.anniversary { display: none; }
    body.scrolled .top-header { background-color: var(--primary-color); }
}

@media (max-width:390px) {
    header { --logo-width: 175px; }
}