/* -- Font metric overrides -- */
@font-face {
    font-family: 'Inter';
    src: local('Arial');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Work Sans';
    src: local('Arial');
    size-adjust: 105%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* -- Search icon (magnifying glass) -- */
i.fa { display: inline-block; position: relative; }
i.fa:before { content: none !important; }
.searchicon a i.fa-search {
    width: 20px; height: 20px;
    border: 2.5px solid #fff; border-radius: 50%;
    vertical-align: middle;
}
.searchicon a i.fa-search:after {
    content: ''; position: absolute;
    bottom: -7px; right: -3px;
    width: 8px; height: 2.5px;
    background: #fff;
    transform: rotate(45deg); transform-origin: right center;
}
#search .close i.fa-times { width: 24px; height: 24px; vertical-align: middle; }
#search .close i.fa-times:before {
    content: '' !important; position: absolute;
    top: 50%; left: 0; width: 100%; height: 2.5px;
    background: #fff; transform: translateY(-50%) rotate(45deg);
}
#search .close i.fa-times:after {
    content: ''; position: absolute;
    top: 50%; left: 0; width: 100%; height: 2.5px;
    background: #fff; transform: translateY(-50%) rotate(-45deg);
}

/* -- Reset -- */
*, *:before, *:after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, header, footer, nav, section, main, form, input, a, img { margin: 0; padding: 0; border: 0; }
img, object { max-width: 100%; height: auto; outline: none; }
article, aside, details, figcaption, figure, footer, header, nav, section { display: block; }
a { color: #333; text-decoration: none; outline: none; }
body { font-family: "Inter", sans-serif; background: #fff; overflow-x: hidden; }
html { overflow-x: hidden; }

/* -- Wrapper -- */
.wrapper { margin: 0 auto; max-width: 1230px; width: 100%; padding-left: 15px; padding-right: 15px; }

/* -- Header -- */
:root { --hdr-height: 70px; }
.hdr { background: #070718; padding: 15px 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 300; height: var(--hdr-height); }
.hdrmain { display: flex; gap: 20px; align-items: center; justify-content: space-between; height: 100%; }
body { padding-top: var(--hdr-height); }
.logo { display: flex; flex-shrink: 0; }
.logo a { display: flex; align-items: center; }
.logo img { height: 40px !important; width: auto !important; }
.custnav { display: flex; }

/* -- CSS Menu -- */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; box-sizing: border-box; }
#cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
#cssmenu #menu-button { display: none; }
#cssmenu { font-family: Montserrat, Arial, sans-serif; background: #070718; }
#cssmenu > ul > li { float: left; }
#cssmenu > ul > li > a { padding: 5px 17px; font-size: 18px; text-decoration: none; color: #fff; font-weight: 600; white-space: nowrap; }
#cssmenu > ul > li:hover > a { color: #a50008; }
#cssmenu > ul > li.has-sub > a { padding-right: 20px; }
#cssmenu > ul > li.has-sub > a:after { position: absolute; top: 14px; right: 11px; width: 8px; height: 2px; display: block; background: #fff; content: ''; }
#cssmenu > ul > li.has-sub > a:before { position: absolute; top: 11px; right: 14px; display: block; width: 2px; height: 8px; background: #fff; content: ''; transition: all .25s ease; }
#cssmenu > ul > li.has-sub:hover > a:before { top: 13px; height: 0; }
#cssmenu ul ul { position: absolute; left: -9999px; z-index: 200; }
#cssmenu li:hover > ul { left: auto; }
#cssmenu ul ul li a { border-bottom: 1px solid rgba(150,150,150,.15); padding: 15px; width: 170px; font-size: 15px; text-decoration: none; color: #ddd; font-weight: 600; background: #070718; }
#cssmenu ul ul li:last-child > a { border-bottom: 0; }
#cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #a50008; }

/* -- Search overlay -- */
.searchicon { flex-shrink: 0; }
.searchicon a { display: flex; align-items: center; padding: 8px; -webkit-tap-highlight-color: transparent; }
.searchicon a i { color: #fff; font-size: 20px; }
#search { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.9); transition: opacity .3s ease, visibility .3s ease; opacity: 0; visibility: hidden; z-index: 200; display: flex; align-items: center; justify-content: center; }
#search.open { opacity: 1; visibility: visible; }
#search form { width: 60%; }
#search input[type="search"] { width: 100%; color: #fff; background: transparent; border-top: 1px solid rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.9); border-left: 0; border-right: 0; font-size: clamp(22px, 4vw, 40px); font-family: "Inter", sans-serif; font-weight: 300; text-align: center; outline: none; padding: 10px; border-radius: 0; -webkit-appearance: none; }
#search .close { position: fixed; top: 15px; right: 15px; font-size: 27px; color: #fff; cursor: pointer; padding: 10px; -webkit-tap-highlight-color: transparent; }
#search .close:hover { color: #a50008; }
body.active, body.search-open { overflow: hidden; }

/* -- Footer -- */
.ftr { width: 100%; display: flex; background: #000; padding: 15px 0; }
.ftrmain { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ftrmain p { font-family: "Work Sans", sans-serif; font-size: 13px; color: #fffefe; margin: 0; white-space: nowrap; }
.ftrmenu ul { padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; list-style: none; }
.ftrmenu ul li a { font-family: "Work Sans", sans-serif; font-size: 13px; color: #fffefe; display: block; padding: 4px 0; }
.ftrmenu ul li a:hover, .ftrmenu ul li a:focus { color: #a50008; }

/* -- Content area -- */
.main { min-height: 60vh; width: 100%; }
section#custom-section { width: 90%; max-width: 820px; margin: 0 auto; padding: 20px; }
section#custom-section * { text-align: start; }
section#custom-section img { max-width: 100%; height: auto; }
#introduction-second-part { opacity: 0; transition: opacity 0.4s ease; }

/* -- CLS prevention -- */
#relatedsearches_afs_auto,
#relatedsearches_afs_auto_second {
    min-height: 280px;
}

/* -- Search results page -- */
.site-content { max-width: 600px; margin: 0 auto; padding: 0 15px; }
.main-inner   { max-width: 600px; margin: 0 auto; }
#g_search_wrapper { margin: 30px 15px 0; }
.ft-simple-search { margin-bottom: 30px; font-family: arial, sans-serif !important; }
.ft-simple-search span { font-family: "Inter", sans-serif !important; }
.col-lg-12 { font-size: 15px; }
.additional_search_topics a { display: block; text-decoration: none; }
.additional_search_topics .header { margin: 0 0 4px; font-size: 0.875rem; color: #999; font-family: Arial, sans-serif; font-weight: normal; }
.additional_search_topics p.url { font-size: 0.688rem; margin: 2px 0; word-break: break-all; color: #999; }
.additional_search_topics span.description { display: block; font-size: 0.688rem; color: #999; font-family: Inter, sans-serif; }
#afscontainer1 { min-height: 240px; }
.rbc-container-ad { width: 100%; }
.relatedsearches_afs_auto:first-of-type { min-height: 450px; }

/* -- Scroll to top -- */
.cd-top { display: inline-block; height: 44px; width: 44px; position: fixed; bottom: 20px; right: 10px; overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(0,0,0,1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E") no-repeat center 50%; visibility: hidden; opacity: 0; transition: opacity .3s 0s, visibility 0s .3s; z-index: 999; border: 1px solid #fff; border-radius: 4px; }
.cd-top.cd-is-visible { visibility: visible; opacity: 1; transition: opacity .3s 0s, visibility 0s 0s; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* -- Tablet landscape (769px – 1024px) -- */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .wrapper { padding-left: 20px; padding-right: 20px; }
    #cssmenu > ul > li > a { padding: 5px 10px; font-size: 14px; }
    .logo img { height: 38px !important; width: auto !important; }
    section#custom-section { width: 95%; padding: 15px; }
    .site-content { padding: 0 20px; }
    #g_search_wrapper { margin: 20px 10px 0; }
}

/* -- Tablet portrait & large phones (481px – 768px) -- */
@media only screen and (max-width: 768px) {
    :root { --hdr-height: 60px; }
    .hdr { padding: 10px 0; }
    .logo img { height: 35px !important; width: auto !important; }

    /* Mobile nav */
    body.active { overflow: hidden; }
    #cssmenu { width: 100%; }
    #cssmenu ul { width: 100%; display: none; }
    #cssmenu ul li { width: 100%; border-top: 1px solid rgba(120,120,120,.2); }
    #cssmenu ul ul li, #cssmenu li:hover > ul > li { height: auto; }
    #cssmenu ul li a, #cssmenu ul ul li a { width: 100%; border-bottom: 0; }
    #cssmenu > ul > li { float: none; }
    #cssmenu ul ul { position: relative; left: 0; width: 100%; margin: 0; }
    #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before { display: none; }
    #cssmenu #menu-button { display: block; padding: 17px; color: #ddd; cursor: pointer; font-size: 0; font-weight: 700; margin: -10px 0 0 0; }
    #cssmenu #menu-button:after { position: absolute; top: 19px; right: 15px; display: block; height: 9px; width: 22px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; content: ''; }
    #cssmenu #menu-button:before { position: absolute; top: 12px; right: 15px; display: block; height: 2px; width: 22px; background: #fff; content: ''; }
    #cssmenu #menu-button.menu-opened:after { top: 20px; border: 0; height: 2px; width: 22px; background: #fff; transform: rotate(45deg); }
    #cssmenu #menu-button.menu-opened:before { top: 20px; background: #fff; width: 22px; transform: rotate(-45deg); }
    #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid rgba(120,120,120,.2); height: 46px; width: 46px; cursor: pointer; }
    #cssmenu .submenu-button:after { position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #ddd; content: ''; }
    #cssmenu .submenu-button:before { position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #ddd; content: ''; }
    #cssmenu .submenu-button.submenu-opened:before { display: none; }
    #cssmenu > ul.open { display: block; position: fixed; top: var(--hdr-height); left: 0; width: 100%; height: calc(100vh - var(--hdr-height)); overflow-y: scroll; background: #070718; z-index: 299; }
    #cssmenu > ul > li > a { padding: 17px; font-size: 16px; min-height: 44px; display: flex; align-items: center; }
    .custnav { order: -1; }
    .logo img { height: 35px !important; width: auto !important; margin-left: -5px; }

    /* Content */
    section#custom-section { width: 100%; padding: 10px; }
    .site-content { padding: 0 10px; }
    #g_search_wrapper { margin: 15px 5px 0; }

    /* Footer */
    .ftrmain { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
    .ftrmenu ul { justify-content: center; gap: 10px; }

    /* Reduce ad reservation on small screens */
    #relatedsearches_afs_auto,
    #relatedsearches_afs_auto_second { min-height: 180px; }
    .relatedsearches_afs_auto:first-of-type { min-height: 300px; }
    #afscontainer1 { min-height: 180px; }
}

/* -- Small phones (max 480px) -- */
@media only screen and (max-width: 480px) {
    :root { --hdr-height: 56px; }
    .hdr { padding: 8px 0; }
    .wrapper { padding-left: 10px; padding-right: 10px; }
    .logo img { height: 32px !important; width: auto !important; }
    #search form { width: 90%; }
    #search input[type="search"] { font-size: 20px; padding: 8px; }
    section#custom-section { padding: 8px; }
    .site-content { padding: 0 8px; }
    .ftrmain { gap: 10px; }
    .ftrmenu ul { gap: 8px; }
    .cd-top { bottom: 15px; right: 8px; height: 40px; width: 40px; }
}

/* -- Very small phones (max 360px) -- */
@media only screen and (max-width: 360px) {
    .logo img { height: 28px !important; width: auto !important; }
    #cssmenu > ul > li > a { font-size: 14px; padding: 14px; }
    .ftrmenu ul { gap: 6px; }
    .ftrmain p { font-size: 12px; }
    .ftrmenu ul li a { font-size: 12px; }
}