/* Vendor CSS (bootstrap/fontawesome/magnific/helper) is linked directly in the layout for parallel download — no @import waterfall, and only the direction-correct Bootstrap loads. */ :root { color-scheme: light only; color: #89939e; color: #181e32; } /* Direction-safe overflow guard. In an RTL document the scrollable overflow area grows to the LEFT, so anything parked at a negative `left` (an off-screen honeypot field, a wide absolutely-positioned decoration) becomes real, scrollable page width. One `left:-5000px` field in the footer was enough to turn every Arabic page into a ~5400px-wide canvas: a horizontal scrollbar on desktop, and on phones a page that pans sideways into empty space with the header and hero clipped. `clip` — not `hidden` — cuts that off without turning the root into a scroll container, so the sticky header, dropdowns and anchor scrolling still work. */ html{ overflow-x: clip; } body{ overflow-x: clip; } /* Visually hidden but still rendered and still submitted: the honeypot has to look like a real field to a naive bot. Zero footprint in any direction, so unlike a negative offset it can never widen the page. */ .visually-hidden-safe{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } header{ min-height: 141px; } .slidertopheader{ margin-top: -141px; } .slidertopheader__home{ padding-top: calc(141px + 50px); padding-bottom: 100px; min-height: 100vh; } .slidertopheader__home .sliderslick{ z-index: 1; top: 0; left: 0; } .slidertopheader__home::before{ position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background: linear-gradient(180deg, rgba(24, 30, 50, .15) 0%, rgba(24, 30, 50, .78) 100%); } .slidertopheader__home_content{ z-index: 3; } .slidertopheader__home .slick-list, .slidertopheader__home .slick-track{ height: 100%; } .slidertopheader__pages{ padding-top: calc(141px + 50px); min-height: 300px; padding-bottom: 70px; } .slidertopheader__events{ padding-top: calc(141px + 50px); min-height: 600px; padding-bottom: 70px; } .slidertopheader__events::before{ height: 50%; background: linear-gradient(180deg, rgba(24, 30, 50, .15) 0%, rgba(24, 30, 50, .78) 100%); } .slidertopheader__events::after{ position: absolute; content: ''; width: 100%; height: 100%; bottom: 0; right: 0; background: linear-gradient(120deg, transparent 0%, rgba(24, 30, 50, .55) 100%); } .headerbg{ z-index: 200; position: relative; transition: .8s; padding: 40px 0; } .headerbg__logo_logo img{ height: 45px; } @media (min-width: 1200px){ .headerbg .navbar .navbar-nav .nav-item{ margin-right: 35px; } .headerbg.sticky .navbar .navbar-nav .nav-item{ margin-right: 20px; } } .headerbg .navbar .navbar-nav .nav-item .nav-link { font-size: 19px; padding: 0; border-radius: 50px; color: #fff; position: relative; display: flex; align-items: center; } .headerbg .navbar .navbar-nav .nav-item .nav-link.dropdown-toggle{ padding-left: 22px !important; margin-left: 0 !important; } .headerbg .navbar .navbar-nav .nav-item .nav-link.dropdown-toggle::after{ top: 3px; font-size: 15px; } .headerbg .navbar .navbar-nav .nav-item .nav-link:hover{ color: #89939e; } .headerbg .navbar .navbar-nav .nav-item.active .nav-link, .headerbg .navbar .navbar-nav .nav-item .nav-link.active{ color: #89939e; font-weight: 700; } .headerbg .dropdown-item.active, .headerbg .dropdown-item:active{ background-color: #ffffff20; } .styledropdown .dropdownuser .dropdown-menu{ padding: 0; border-radius: 3px; } .styledropdown .dropdownuser .dropdown-toggle{ padding-left: 35px !important; } .styledropdown .dropdownuser .dropdown-toggle::after{ left: 10px; top: 10px; } .styledropdown .dropdownuser .dropdown-item{ display: flex; align-items: center; padding: 12px 10px; } .styledropdown .dropdownuser li + li{ border-top: 1px solid #00000011; } .styledropdown .dropdownuser .dropdown-item [class^="fa"]{ flex: 0 0 40px; text-align: center; } .styledropdown .dropdownuser .dropdown-menu{ /* Match the trigger button's width (owner request); longer content (e.g. the guest Login/Register menu) may still grow past it. */ min-width: 100%; margin-top: 0; /* no hover-gap between button and menu */ } /* Hover-open lives in ga-custom.js (Bootstrap dropdown API) — a plain CSS display:block fights the popper/show state, so no CSS rule here. */ .headerbg.sticky{ position: fixed; top: 0; right: 0; padding-top: 0; } .headerbg.sticky *{ visibility: visible !important; } .headerbg.sticky .navbar{ background-color: #181e32; border-radius: 0 0 10px 10px; padding: 20px; } .headerbg.sticky .headerbg__logo_logo img{ height: 30px; margin-left: 30px; } .headerbg.sticky .navbar .navbar-nav .nav-item .nav-link{ font-size: 17px; } .headerbg.sticky .btn{ padding: 3px 8px 4px; min-height: 30px; font-size: 15px; } .headerbg.sticky .styledropdown .dropdownuser .btn.dropdown-toggle{ padding-left: 30px !important; } .headerbg.sticky .styledropdown .dropdownuser .btn.dropdown-toggle::after{ top: 5px; left: 8px; } .headerbg.sticky .styledropdown .dropdownuser .dropdown-item{ padding: 10px; font-size: 15px; } .headerbg.sticky .styledropdown .dropdownuser .dropdown-menu{ min-width: 158px; } .headerbg.sticky .styledropdown .dropdownuser .dropdown-item [class^="fa"]{ flex: 0 0 40px; } .breadcrumb{ background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(25px); padding: 8px 15px; border-radius: 7px; } .breadcrumb, .breadcrumb a, .breadcrumb-item + .breadcrumb-item::before, .breadcrumb-item.active{ color: #fff; } .breadcrumb a:hover{ color: #89939e; } .breadcrumb-item + .breadcrumb-item::before{ content: '\f060'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; padding-right: 2px; padding-left: 12px; position: relative; top: 4px; } .boxshadow{ box-shadow: 0 10px 30px 0 rgb(225 223 255 / 40%); } .boxshadow1{ box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1); } .boxshadow2{ box-shadow: 0px 0px 25px rgb(0 0 0 / 12%); } .boxshadow3{ box-shadow: 0px 10px 35px 0 rgb(0 0 0 / 12%); } .boxshadow4{ box-shadow: 0px 4px 25px rgb(0 0 0 / 8%); } .rounded-xxl{ border-radius: 40px; } /* WCAG AA contrast: white text on the brand grey #89939e is 3.1:1 (needs 4.5:1). #6b747d — the palette's own hover shade — hits 4.8:1, hover deepens to #565e66. Scoped to .btn-primary only so badges/slick/checkbox greys keep the brand tone. */ .btn-primary, .btn-primary.disabled, .btn-primary:disabled{ background-color: #6b747d; border-color: #6b747d; } .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .btn-primary.focus, .btn-primary:focus{ background-color: #565e66; border-color: #565e66; } /* Strips native button chrome so