@import url('../fonts/all.css');

:root{
	--bg: #f8f8f8;
	--muted: #eaeaea;
	--text: #0c0c0c;
	--subtle: rgba(0, 0, 0, 0.7);
	--card: #ffffff;
	--radius: 18px;
	--bs-btn-disabled-bg: #000;
}

body { font-family: 'Poppins', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-top: 40px; }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: none; }

.btn { background-color: #000 !important; color: #fff !important; font-size: 12px; font-weight: 300; }
.btn:hover, .btn:active { background-color: var(--subtle) !important; color: #fff !important; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(0,0,0,0.08); }

.btn-loading { position: relative; color: transparent !important; }
.btn-loading:hover { color: transparent !important; }
.btn-loading:before { background: url('../images/rotate.svg') no-repeat; width: 18px; height: 18px; position: absolute; display: block; top: calc(50% - 9px); left: calc(50% - 9px); animation: btn_loading 3s infinite; animation-timing-function: linear; content: ""; }

@keyframes btn_loading
{
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

#trait, #services, #webcart, #contact { scroll-margin-top: 40px; }

.navbar { padding: 5px 0px; position: fixed; top: 0; width: 100%; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.06); z-index: 2; }
.navbar .navbar-brand { padding: 0; margin: 0; }
.navbar .navbar-brand img { height: 15px; width: auto; }
.navbar .nav-link { color: var(--subtle); font-size: 12px; font-weight: 300; margin-right: 1rem; }
.navbar .nav-link:hover { color: #000; }

.hero { height: calc(100dvh - 40px); min-height: 600px; padding: 50px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--muted) 0%, var(--bg) 65%); text-align: center; }
.hero h1 { font-size: 90px; font-weight: 600; line-height: 1.25; letter-spacing: -1.4px; margin: 0; }
.hero h1 span { display: block; }
.hero p { max-width: 700px; color: var(--subtle); font-size: 18px; margin: 0; font-weight: 300; display: inline-block; }
.hero-hr { width: 45px; height: 2px; background: #000; opacity: 0.12; margin: 30px auto; border-radius: 2px; }

.section-title { font-size: 45px; font-weight: 600; margin-bottom: 48px; text-align:center; }
.content-sections { background: linear-gradient(180deg, var(--bg) 0%, #fff 65%); }

.card-clean { background: var(--card); border-radius: var(--radius); padding: 36px; box-shadow :0 16px 40px rgba(0,0,0,0.07); border: 1px solid rgba(0,0,0,0.07); height: 100%; display: flex; flex-direction: column; text-align: center; align-items: center; gap: 18px; transition:0.25s ease; }
.card-clean h3 { font-size: 20px; margin: 0; font-weight: 400; }
.card-clean p { margin: 0; font-size: 16px; color: var(--subtle); font-weight: 300; }

.icon-plate svg { width: 46px; height: 46px; stroke: var(--text); stroke-width: 1; opacity: 0.85; }

.webcart-card { max-width: 760px; margin: 0 auto; }
.webcart-card img { height: 56px; width: auto; filter: saturate(0%); margin: 0rem;}

.contact { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
.contact-form { flex: 1; max-width: 560px; }
.contact-form input[type="text"], .contact-form textarea { width: 100%; padding: 14px; margin-bottom: 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); font-weight: 300; font-size: 14px; color: var(--subtle); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form input:focus-visible, .contact-form textarea:focus-visible { border-color: rgba(0,0,0,0.3); box-shadow: 0 0 0 .25rem rgba(0,0,0,0.08); outline: none; }
.contact-form .error { border-color: #dc3545 !important; }
.contact-form input.error:focus, .contact-form textarea.error:focus { border-color: #dc3545; box-shadow: 0 0 0 .25rem rgba(220,53,69,.25); }
.contact-form .form-check-label { font-size: 12px; font-weight: 300; color: var(--subtle); }
.contact-form .form-check-label a { text-decoration: underline; color: var(--subtle); }
.contact-form .form-check-label a:hover { text-decoration: none; }
.contact-form input:checked[type="checkbox"]{ background-color: #545b62; }

.contact-info div { font-size: 16px; color: var(--subtle); font-weight: 300; margin-bottom: 1rem; }
.contact-info .icon-box { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.contact-info a:hover { color: #000; }

footer { padding: 20px 20px; text-align:center; color: var(--subtle); border-top: 1px solid rgba(0,0,0,0.08); font-size: 12px; background: #fff; }
footer nav { margin-bottom: 0.75rem; display: flex; justify-content: center; }
footer nav a { color: var(--subtle); font-weight: 300; padding: 0 0.5rem; font-size: 13px; }
footer nav a:hover { text-decoration: underline }
footer .dot { color: rgba(0, 0, 0, 0.25); font-size: 10px; line-height: 20px; }
footer .copy { color: rgba(0, 0, 0, 0.4); }

.notify-alert { z-index: 99999 !important; padding-left: 40px; padding-right: 30px; padding-top: 0.75rem; padding-bottom: 0.75rem; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06); }
.notify-alert .icon { width: 20px; height: 20px; position: absolute; display: block; top: 15px; left: 12px; content: ""; }
.notify-alert .icon.icon-success { background: url('../images/circle_check.svg') no-repeat; }
.notify-alert .icon.icon-error { background: url('../images/circle_exclamation.svg') no-repeat; }
.notify-alert .icon.icon-info { background: url('../images/circle_info.svg') no-repeat; }
.notify-alert .progress { height: 4px; border-radius: 0; position: absolute; top: 0; left: 0; right: 0; background: none; }
.notify-alert .progress .progress-bar { height: 4px; border-radius: 0; background: rgba(0, 0, 0, 0.2); }
.notify-alert button.close { font-size: 0; top: 5px !important; padding: 0; border: 0; }
.notify-alert button.close:after { background: url('../images/xmark_white.svg') no-repeat; width: 20px; height: 20px; display: block; content: ""; position: absolute; top: 9px; right: 0px; opacity: 0.75; }
.notify-alert button.close:hover:after { opacity: 1; }
.notify-alert.alert-secondary button.close:after { background: url('../images/xmark.svg') no-repeat; }
.notify-alert.alert-success { background: #28a745; color: #fff; border-color: #23923d; }
.notify-alert.alert-danger { background: #dc3545; color: #fff; border-color: #d32535; }

.grecaptcha-badge { visibility: hidden; }
.condense-content { max-width: 1024px; margin-left: auto; margin-right: auto; }

.text-page { padding-top: 3rem; padding-bottom: 3rem; font-size: 16px; color: var(--subtle); font-weight: 300; }
.text-page ul { list-style: none; padding-left: 20px; margin-bottom: 1.5rem; }
.text-page ul li::before { content: "\2022"; color: var(--text); font-weight: 600; display: inline-block; width: 1em; margin-left: -1em; }
.text-page h1 { color: var(--text); font-weight: 600; }
.text-page h3 { font-size: 1.5rem; }
.text-page h2, .text-page h3, .text-page h4,.text-page h5 { color: var(--text); font-weight: 400; margin-bottom: 1.5rem; }
.text-page p { margin-bottom: 1.5rem; }
.text-page strong { color: var(--text); }
.text-page .table-responsive { margin-bottom: 1.5rem; font-size: 14px; }
.text-page .table-responsive .table { margin: 0; }
.text-page .table-responsive .table th { background: #f2f2f2; color: var(--text); font-weight: 500; }
.text-page .table-responsive .table td { color: var(--subtle); font-weight: 300; }
.text-page *:last-child { margin-bottom: 0; }
.text-page.legal-document h1, .text-page.legal-document h2, .text-page.legal-document h5, .text-page.legal-document .lead { text-align: center; }
.text-page.legal-document h5 { color: var(--subtle); font-weight: 400; margin-bottom: 0.25rem; margin-top: 2.5rem; }
.text-page.legal-document ol li { margin-bottom: 0.75rem; }
.text-page.legal-document ul li { margin-bottom: 0.25rem; }

.page-error { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: calc(100dvh - 227px); }
.page-error h1 { font-size: 60px; font-weight: 600; margin-bottom: 3rem; }
.page-error p { color: var(--subtle); font-weight: 300; font-size: 18px; margin-bottom: 3rem; }

@media (max-width: 992px) {
	.hero h1 { font-size: 80px; }
}

@media (max-width: 768px) {
	.hero h1 { font-size: 65px; }

	.contact { flex-direction: column-reverse; }
	.contact-form, contact-info { max-width: 100% !important; }
	.contact-info div { justify-content: center; text-align: center; }
	.contact-form .btn { margin: 0 auto; display: block; }

	.text-page h3 { font-size: 1.25rem; }
}

@media (max-width: 576px) {
	.hero h1 { font-size: 45px; }
	.hero p { font-size: 16px; }

	footer nav { display: block; }
	footer nav a { width: 100%; display: block; margin-bottom: 0.25rem; }
	footer nav a:last-child { margin-bottom: 0; }
	footer .dot { display: none; }

	.page-error h1 { font-size: 45px; margin-bottom: 2rem; }
	.page-error p { margin-bottom: 2rem; font-size: 16px; }
}