/* Ocat site design - MasterPage.master / Default.aspx (also MasterPageTest.master / DefaultTest.aspx) */
:root{
  --oc-primary:#56b8e6;
  --oc-primary-dark:#2f8fc0;
  --oc-primary-soft:rgba(86,184,230,.14);
  --oc-secondary:#1b2f45;
  --oc-secondary-2:#0f2238;
  --oc-accent:#f57813;
  --oc-bg:#f4f7fb;
  --oc-surface:#fff;
  --oc-border:#e3e9f1;
  --oc-text:#2c3a4d;
  --oc-muted:#6c7a91;
  --oc-radius:16px;
  --oc-header-h:72px;
}

body.oc{ font-family:"Open Sans",system-ui,sans-serif; color:var(--oc-text); background:var(--oc-surface); padding-top:var(--oc-header-h); }
/* :where() keeps these general rules weak, so a page's own styles always win */
:where(.oc) :where(h1,h2,h3,h4,h5){ font-family:"Montserrat",sans-serif; color:var(--oc-secondary); }
:where(.oc) a{ color:var(--oc-primary-dark); text-decoration:none; }
:where(.oc) a:where(:hover){ color:var(--oc-secondary); }

/* ---------- header ---------- */
.oc-header{ position:fixed; top:0; left:0; right:0; z-index:1030; height:var(--oc-header-h); background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--oc-border); }
/* own class instead of Bootstrap .navbar: the Nova main.css / main.js still loaded for page content also style .navbar */
.oc-navbar{ position:relative; display:flex; align-items:center; height:100%; padding:0; }
.oc-navbar > .container-xl{ display:flex; flex-wrap:inherit; align-items:center; justify-content:space-between; }
.oc-navbar .navbar-brand{ margin-right:1rem; padding:0; }
.oc-brand{ display:flex; align-items:center; gap:2px; font-family:"Montserrat",sans-serif; font-weight:700; font-size:1.35rem; color:var(--oc-secondary)!important; }
.oc-brand img{ height:34px; width:auto; }
.oc-brand sup{ font-size:.7rem; top:-1.1em; color:var(--oc-muted); }
.oc-brand-loc:not(:empty){ margin-left:8px; padding-left:10px; border-left:2px solid var(--oc-border); font-size:1.05rem; color:var(--oc-secondary); }
.oc-header .nav-link{ font-weight:600; font-size:.92rem; color:var(--oc-secondary)!important; padding:.5rem .85rem!important; border-radius:10px; }
.oc-header .nav-link:hover,.oc-header .nav-link.show{ background:var(--oc-primary-soft); color:var(--oc-primary-dark)!important; }
.oc-header .dropdown-menu{ border:1px solid var(--oc-border); border-radius:12px; box-shadow:0 12px 32px rgba(15,34,56,.12); padding:6px; }
.oc-header .dropdown-item{ border-radius:8px; font-size:.9rem; padding:.45rem .8rem; }
.oc-header .dropdown-item:hover{ background:var(--oc-primary-soft); color:var(--oc-primary-dark); }
.oc-header .dropdown-menu li > a:not(.dropdown-item){ display:block; padding:.45rem .8rem; border-radius:8px; font-size:.9rem; color:var(--oc-text); }
.oc-header .dropdown-menu li > a:not(.dropdown-item):hover{ background:var(--oc-primary-soft); color:var(--oc-primary-dark); }
.oc-mega{ min-width:340px; }
.oc-mega .oc-mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.oc-toggler{ border:0; font-size:1.8rem; color:var(--oc-secondary); padding:0 4px; }
.oc-toggler:focus{ box-shadow:none; }

@media (max-width:1199.98px){
  .oc-header .navbar-collapse{ position:absolute; top:var(--oc-header-h); left:0; right:0; background:#fff; border-bottom:1px solid var(--oc-border); padding:10px 16px 18px; max-height:calc(100vh - var(--oc-header-h)); overflow-y:auto; box-shadow:0 16px 32px rgba(15,34,56,.1); }
  .oc-header .dropdown-menu{ box-shadow:none; border:0; background:var(--oc-bg); }
  .oc-mega{ min-width:0; }
  .oc-nav-cta{ margin-top:10px; }
}

/* ---------- buttons ---------- */
.oc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:.92rem; border-radius:12px; padding:.62rem 1.15rem; border:1px solid transparent; transition:all .15s ease; white-space:nowrap; cursor:pointer; }
.oc-btn-primary{ background:var(--oc-primary); color:#fff!important; }
.oc-btn-primary:hover{ background:var(--oc-primary-dark); color:#fff!important; }
.oc-btn-accent{ background:var(--oc-accent); color:#fff!important; }
.oc-btn-accent:hover{ background:#dc6505; color:#fff!important; }
.oc-btn-ghost{ background:transparent; color:var(--oc-secondary)!important; border-color:var(--oc-border); }
.oc-btn-ghost:hover{ border-color:var(--oc-primary); color:var(--oc-primary-dark)!important; }
.oc-btn-light{ background:rgba(255,255,255,.12); color:#fff!important; border-color:rgba(255,255,255,.3); }
.oc-btn-light:hover{ background:rgba(255,255,255,.22); }

/* ---------- page banner (default hero for other pages) ---------- */
.oc-banner{ background:linear-gradient(135deg,var(--oc-secondary-2),var(--oc-secondary) 55%,#24557a); color:#fff; padding:56px 0 48px; }
.oc-banner h2{ color:#fff; font-weight:700; margin:0; font-size:clamp(1.5rem,3vw,2.1rem); }

/* ---------- home hero ---------- */
.oc-hero{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--oc-secondary-2) 0%,var(--oc-secondary) 50%,#24557a 100%); color:#fff; padding:84px 0 96px; }
.oc-hero::before{ content:""; position:absolute; width:560px; height:560px; right:-160px; top:-200px; border-radius:50%; background:radial-gradient(circle,rgba(86,184,230,.35),transparent 70%); }
.oc-hero::after{ content:""; position:absolute; width:420px; height:420px; left:-140px; bottom:-220px; border-radius:50%; background:radial-gradient(circle,rgba(245,120,19,.22),transparent 70%); }
.oc-hero .container{ position:relative; z-index:1; }
.oc-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:30px; padding:6px 14px; font-size:.82rem; font-weight:600; letter-spacing:.02em; margin-bottom:22px; }
.oc-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:#3ddc84; }
.oc-hero h1{ color:#fff; font-weight:700; font-size:clamp(2rem,5vw,3.4rem); line-height:1.12; margin-bottom:18px; }
.oc-hero h1 span{ color:var(--oc-primary); }
.oc-hero .lead{ color:rgba(255,255,255,.78); font-size:clamp(1rem,1.6vw,1.15rem); max-width:640px; margin-bottom:34px; }

.oc-search{ display:flex; gap:8px; background:#fff; border-radius:16px; padding:8px; max-width:680px; box-shadow:0 24px 48px rgba(0,0,0,.25); }
.oc-search .oc-search-ic{ display:flex; align-items:center; padding-left:12px; color:var(--oc-muted); font-size:1.2rem; }
.oc-search input{ flex:1; min-width:0; border:0; outline:0; font-size:1rem; color:var(--oc-text); background:transparent; padding:10px 4px; }
.oc-search .oc-btn{ padding:.75rem 1.4rem; }
.oc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; align-items:center; }
.oc-chips small{ color:rgba(255,255,255,.6); margin-right:4px; }
.oc-chips a{ color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:30px; padding:5px 14px; font-size:.84rem; font-weight:600; }
.oc-chips a:hover{ background:var(--oc-primary); border-color:var(--oc-primary); color:#fff; }

.oc-hero-stats{ display:flex; flex-wrap:wrap; gap:36px; margin-top:44px; }
.oc-hero-stats b{ display:block; font-family:"Montserrat",sans-serif; font-size:1.6rem; color:#fff; }
.oc-hero-stats small{ color:rgba(255,255,255,.65); font-size:.85rem; }

/* ---------- sections ---------- */
.oc-section{ padding:80px 0; }
.oc-section.alt{ background:var(--oc-bg); }
.oc-section-head{ text-align:center; max-width:680px; margin:0 auto 46px; }
.oc-section-head .tag{ display:inline-block; color:var(--oc-primary-dark); background:var(--oc-primary-soft); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; padding:5px 12px; border-radius:30px; margin-bottom:12px; }
.oc-section-head h2{ font-weight:700; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:12px; }
.oc-section-head p{ color:var(--oc-muted); margin:0; }

/* search results */
.oc-results{ padding:36px 0 8px; scroll-margin-top:var(--oc-header-h); }
.oc-results-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.oc-results-head h3{ font-size:1.1rem; font-weight:700; margin:0; }
.oc-loc{ position:relative; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--oc-border); border-radius:12px; padding:14px 16px; font-weight:600; transition:all .15s; height:100%; }
.oc-loc i{ color:var(--oc-accent); font-size:1.1rem; }
.oc-loc a{ color:var(--oc-secondary); }
.oc-loc:hover{ border-color:var(--oc-primary); box-shadow:0 8px 20px rgba(15,34,56,.08); transform:translateY(-2px); }
.oc-empty{ background:#fff; border:1px dashed var(--oc-border); border-radius:12px; padding:22px; text-align:center; color:var(--oc-muted); }

/* country cards */
.oc-country{ position:relative; display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--oc-border); border-radius:var(--oc-radius); padding:22px; transition:all .18s ease; }
.oc-country:hover{ border-color:var(--oc-primary); box-shadow:0 16px 36px rgba(15,34,56,.1); transform:translateY(-4px); }
.oc-country .code{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px; background:var(--oc-primary-soft); color:var(--oc-primary-dark); font-family:"Montserrat",sans-serif; font-weight:700; font-size:.95rem; margin-bottom:16px; }
.oc-country h3{ font-size:1.1rem; font-weight:700; margin-bottom:6px; }
.oc-country h3 a{ color:var(--oc-secondary); }
.oc-country p{ color:var(--oc-muted); font-size:.88rem; margin:0 0 14px; flex:1; }
.oc-country .go{ font-weight:600; font-size:.86rem; color:var(--oc-primary-dark); }
.oc-country:hover .go i{ transform:translateX(4px); }
.oc-country .go i{ display:inline-block; transition:transform .15s; }

/* feature cards */
.oc-feature{ position:relative; height:100%; background:#fff; border:1px solid var(--oc-border); border-radius:var(--oc-radius); padding:28px; transition:all .18s ease; }
.oc-feature:hover{ box-shadow:0 16px 36px rgba(15,34,56,.1); transform:translateY(-4px); }
.oc-feature .ic{ width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:18px; }
.oc-feature .ic.blue{ background:var(--oc-primary-soft); color:var(--oc-primary-dark); }
.oc-feature .ic.orange{ background:rgba(245,120,19,.12); color:var(--oc-accent); }
.oc-feature .ic.green{ background:#eafaf0; color:#1d8a52; }
.oc-feature .ic.pink{ background:#fdeef5; color:#d90769; }
.oc-feature h3{ font-size:1.12rem; font-weight:700; margin-bottom:10px; }
.oc-feature h3 a{ color:var(--oc-secondary); }
.oc-feature p{ color:var(--oc-muted); font-size:.92rem; margin:0; line-height:1.65; }

/* call to action band */
.oc-cta{ background:linear-gradient(120deg,var(--oc-primary-dark),var(--oc-primary)); border-radius:24px; padding:48px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.oc-cta h2{ color:#fff; font-weight:700; margin:0 0 8px; font-size:clamp(1.4rem,2.6vw,1.9rem); }
.oc-cta p{ margin:0; color:rgba(255,255,255,.88); }
.oc-cta .oc-btn-white{ background:#fff; color:var(--oc-secondary)!important; }
.oc-cta .oc-btn-white:hover{ background:var(--oc-secondary); color:#fff!important; }

/* ---------- footer ---------- */
.oc-footer{ background:var(--oc-secondary-2); color:rgba(255,255,255,.7); padding:64px 0 0; font-size:.9rem; }
.oc-footer h4{ color:#fff; font-size:.95rem; font-weight:700; margin-bottom:16px; }
.oc-footer a{ color:rgba(255,255,255,.7); }
.oc-footer a:hover{ color:var(--oc-primary); }
.oc-footer ul{ list-style:none; padding:0; margin:0; }
.oc-footer li{ padding:4px 0; }
.oc-footer .oc-brand{ color:#fff!important; margin-bottom:14px; }
.oc-footer .oc-brand-loc:not(:empty){ color:#fff; border-left-color:rgba(255,255,255,.3); }
.oc-footer .oc-portals{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.oc-footer .oc-portals a{ border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:3px 11px; font-size:.8rem; }
.oc-footer .oc-portals a:hover{ border-color:var(--oc-primary); }
.oc-footer-legal{ border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding:20px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.82rem; }

.oc-scrolltop{ position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:12px; background:var(--oc-primary); color:#fff!important; display:flex; align-items:center; justify-content:center; font-size:1.5rem; opacity:0; visibility:hidden; transition:all .2s; z-index:1000; }
.oc-scrolltop.show{ opacity:1; visibility:visible; }

@media (max-width:575.98px){
  .oc-hero{ padding:56px 0 64px; }
  .oc-search{ flex-wrap:wrap; }
  .oc-search .oc-search-ic{ display:none; }
  .oc-search input{ flex:1 1 100%; padding:10px 8px; }
  .oc-search .oc-btn{ width:100%; }
  .oc-section{ padding:56px 0; }
  .oc-cta{ padding:32px 24px; }
  .oc-hero-stats{ gap:22px; }
}