/* Page-local presentation; loaded only by /sample-ads/. */
@font-face {
    font-family: SampleAdsCalibri;
    src: url('/asset/fonts/Calibri.woff2') format('woff2');
    font-display: swap;
}
body {
    background: #eaf7ff;
    background: radial-gradient(ellipse at 50% 35%, #f6fcff 0, #e8f7ff 85%);
}
#header { margin-bottom: 0; border-bottom: 2px solid #0075ff; background: #fff; }
#header .navbar-offcanvas { min-height: 80px; padding: 4px 30px 4px 24px; }
#header .navbar-offcanvas > .row { margin-left: 0; margin-right: 0; }
#header .navbar-toggler { padding: 9px 14px; margin-left: 0 !important; background: #fff; border-color: #dedede; border-radius: 6px; }
#header .navbar-toggler span { font-size: 20px !important; font-weight: 400 !important; }
#header .inner-header-logo { width: 445px; flex-basis: 445px; }
#header .ac-btn { border-radius: 6px; padding: 12px 24px; font-size: 18px; }
#header .ac-btn-fill { background: #0074f8; }
#wrapper_links { padding: 0; }
body > .container-fluid { padding: 0; }
#maincontent :where(.sample-ads-page) div,
#maincontent :where(.sample-ads-page) span,
#maincontent :where(.sample-ads-page) p,
#maincontent :where(.sample-ads-page) ul { margin: 0; padding: 0; font-size: inherit; }
#maincontent .sample-ads-page,
#maincontent .sample-ads-page * { font-family: SampleAdsCalibri, Calibri, Arial, sans-serif; }
#maincontent .sample-ads-page .fa { font-family: FontAwesome; }
#maincontent .sample-ads-page { color: #090b50; padding: 0 0 46px; }
.sample-ads-hero { position: relative; isolation: isolate; min-height: 290px; overflow: hidden; background: linear-gradient(110deg, #edf8ff, #f5fcff 45%, #eaf7ff); }
.sample-ads-hero::after { content: ''; position: absolute; z-index: 1; bottom: -31px; left: -5%; width: 110%; height: 54px; border-radius: 50% 50% 0 0; background: #f4fbff; }
#maincontent .sample-ads-intro { position: relative; z-index: 2; max-width: 1340px; margin: 0 auto; padding: 64px 0 80px; }
#maincontent .sample-ads-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 11px; color: #7d8197; font-size: 17px; font-weight: 700; }
.sample-ads-eyebrow::before { content: ''; width: 41px; height: 6px; border-radius: 3px; background: #0075ff; }
#maincontent .sample-ads-page h1 { margin: 0; color: #080940; font-size: clamp(62px, 5.7vw, 100px); font-weight: 700; line-height: 1.08; letter-spacing: -2px; }
#maincontent .sample-ads-page h1 span { color: #0075ff; }
.sample-ads-art { position: absolute; z-index: 0; right: 0; bottom: 20px; width: 57%; height: auto; max-height: 285px; object-fit: contain; object-position: bottom right; pointer-events: none; }
.sample-ads-categories { width: min(706px, calc(100% - 40px)); margin: 18px auto 0; }
#maincontent .sample-ads-categories ul { list-style: none; display: grid; gap: 9px; }
.sample-ads-categories li { margin: 0; padding: 0; }
.sample-ads-card { display: flex; align-items: center; gap: 30px; min-height: 84px; padding: 6px 35px; border: 1px solid #dceeff; border-radius: 17px; background: #ffffffeb; color: #090b50; box-shadow: 0 10px 30px #51b2ff08; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s; }
#maincontent .sample-ads-card .sample-ads-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 68px; width: 68px; height: 68px; border-radius: 50%; font-size: 35px; }
#maincontent .sample-ads-card .sample-ads-label { font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px; }
#maincontent .sample-ads-card .sample-ads-arrow { flex: 0 0 12px; width: 12px; height: 12px; margin-left: auto; border-top: 4px solid #007bff; border-right: 4px solid #007bff; transform: rotate(45deg); }
.sample-ads-auto .sample-ads-icon { color: #ff1732; background: #ffe3e7; }
.sample-ads-dealers .sample-ads-icon { color: #8a10e9; background: #efe3ff; }
.sample-ads-homes .sample-ads-icon { color: #0080ff; background: #d9f0ff; }
.sample-ads-merchandise .sample-ads-icon { color: #00b450; background: #dcf8e9; }
.sample-ads-contractors .sample-ads-icon { color: #ffa000; background: #fff1cf; }
.sample-ads-card:hover { color: #004bb3 !important; background: #fff; border-color: #93cfff; box-shadow: 0 8px 24px #0782ef16; }
.sample-ads-card:focus-visible { outline: 3px solid #0075ff; outline-offset: 3px; }
@media (min-width: 1200px) {
    #header .navbar-offcanvas { display: grid; grid-template-columns: 1fr auto 1fr; }
    #header .navbar-offcanvas > .pagebtnheader { width: auto; }
    #header .inner-header-logo { margin: 0 20px; }
}
@media (max-width: 1450px) {
    #maincontent .sample-ads-intro { padding-left: 8%; padding-right: 8%; }
    .sample-ads-art { width: 54%; }
}
@media (max-width: 767px) {
    #header .navbar-offcanvas { padding: 10px 16px; }
    #header .inner-header-logo { width: min(360px, 100%); margin: 0 auto 12px; }
    #header .ac-btn { padding: 10px 14px; font-size: 16px; }
    #maincontent .sample-ads-intro { padding: 35px 24px 125px; }
    #maincontent .sample-ads-page h1 { font-size: clamp(52px, 12vw, 76px); }
    .sample-ads-art { width: 90%; max-width: 450px; opacity: .7; bottom: 15px; }
    .sample-ads-categories { width: calc(100% - 28px); margin-top: 14px; }
    .sample-ads-card { min-height: 80px; padding: 10px 19px; gap: 18px; border-radius: 14px; }
    #maincontent .sample-ads-card .sample-ads-icon { flex-basis: 54px; width: 54px; height: 54px; font-size: 29px; }
    #maincontent .sample-ads-card .sample-ads-label { font-size: 22px; }
}