/* =====================================================================
style.css  -  cleaned, de-duplicated, cross-browser & responsive
Works in: Chrome, Edge, Firefox, Safari (desktop + iOS), Android
===================================================================== */
:root {
  --ws-blue: #1175BE;       /* "W", "are" */
  --ws-orange: #F47321;     /* "sun", leaf */
  --ws-light-blue: #9DB5E0; /* middle of the W */
}

/* ===== Chrome, Edge, Safari, Opera (gradient works) ===== */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
  height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #eef3fb;   /* very light tint of the logo blue */
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ws-blue), var(--ws-orange));
  border-radius: 10px;
  border: 2px solid #eef3fb;
}

html::-webkit-scrollbar-thumb:horizontal,
body::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(90deg, var(--ws-blue), var(--ws-orange));
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ws-orange), var(--ws-blue));
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: #eef3fb;
}

/* ===== Firefox only (solid color, no gradient support) ===== */
@supports (-moz-appearance: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--ws-blue) #eef3fb;
  }
}
/* ---------------------------------------------------------------------
1. Base / reset
--------------------------------------------------------------------- */
.hide {
display: none;
}

/* ---------------------------------------------------------------------
2. Layout wrappers (no top gap)
--------------------------------------------------------------------- */
.flex-root,
.flex-root > .d-flex {
margin-top: 0 !important;
padding-top: 0 !important;
}

/* dark banner (sidebar.php) and its first child */
.auth-sidebar,
.auth-sidebar > :first-child {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}

/* swapped area: fills free height so the footer is pushed to the bottom
(parent must be display:flex; flex-direction:column; min-height:100vh) */
#authentication-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;       /* vertical centering - remove to align top */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;           /* horizontal centering - remove if view handles width */
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}

#authentication-content > * {
max-width: 100%;
}

/* ---------------------------------------------------------------------
3. Curve + dark section
--------------------------------------------------------------------- */
.landing-curve {
display: block;
position: relative;
z-index: 1;
line-height: 0;                /* removes inline-SVG baseline gap */
margin-bottom: -2px !important;/* overlap into the dark section */
}

.landing-curve svg {
display: block;
width: 100%;
height: auto;
vertical-align: top;
}

.landing-dark-bg {
position: relative;
margin-top: -1px;
padding-top: 1px;
}

/* ---------------------------------------------------------------------
4. Globe (legacy .globe-wrap version - merged, no duplicates)
--------------------------------------------------------------------- */
.globe-wrap {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
aspect-ratio: 1 / 1;
-webkit-animation: globeFloat 6s ease-in-out infinite;
animation: globeFloat 6s ease-in-out infinite;
}

.globe-img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 2;
-webkit-filter: drop-shadow(0 0 30px rgba(17, 119, 185, .55));
filter: drop-shadow(0 0 30px rgba(17, 119, 185, .55));
-webkit-animation: globeGlow 4s ease-in-out infinite;
animation: globeGlow 4s ease-in-out infinite;
}

@-webkit-keyframes globeFloat {
0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
50%      { -webkit-transform: translateY(-14px); transform: translateY(-14px); }
}
@keyframes globeFloat {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-14px); }
}

@-webkit-keyframes globeGlow {
0%, 100% { -webkit-filter: drop-shadow(0 0 20px rgba(17, 119, 185, .35)); filter: drop-shadow(0 0 20px rgba(17, 119, 185, .35)); }
50%      { -webkit-filter: drop-shadow(0 0 45px rgba(17, 119, 185, .80)); filter: drop-shadow(0 0 45px rgba(17, 119, 185, .80)); }
}
@keyframes globeGlow {
0%, 100% { filter: drop-shadow(0 0 20px rgba(17, 119, 185, .35)); }
50%      { filter: drop-shadow(0 0 45px rgba(17, 119, 185, .80)); }
}

/* Orbiting planes (legacy) */
.orbit {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border: 2px dotted rgba(255, 255, 255, .35);
z-index: 3;
pointer-events: none;
}

.orbit-1 {
width: 105%;
height: 105%;
margin: -52.5% 0 0 -52.5%;
-webkit-animation: spin 14s linear infinite;
animation: spin 14s linear infinite;
}

.orbit-2 {
width: 88%;
height: 88%;
margin: -44% 0 0 -44%;
border-color: rgba(11, 100, 200, .45);
-webkit-animation: spin 20s linear infinite reverse;
animation: spin 20s linear infinite reverse;
}

.orbit .plane {
position: absolute;
top: 0;
left: 50%;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
fill: #fff;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.orbit-2 .plane {
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
fill: #1e6fd9;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}

@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin         { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
5. Text fade-in
--------------------------------------------------------------------- */
.fade-up {
opacity: 0;
-webkit-animation: fadeUp .9s ease-out .2s forwards;
animation: fadeUp .9s ease-out .2s forwards;
}
.fade-up.delay {
-webkit-animation-delay: .6s;
animation-delay: .6s;
}

@-webkit-keyframes fadeUp {
from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
6. #globeAnim (main globe component)
--------------------------------------------------------------------- */
#globeAnim {
position: relative;
display: block;
width: 500px;
max-width: 100%;
aspect-ratio: 1 / 1;
margin: 0 auto;
-webkit-animation: gaFloat 6s ease-in-out infinite;
animation: gaFloat 6s ease-in-out infinite;
}

/* fallback for browsers without aspect-ratio (Safari < 15, old Android) */
@supports not (aspect-ratio: 1 / 1) {
#globeAnim::before {
content: "";
display: block;
padding-top: 100%;
}
}

#globeAnim .gimg {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;   /* inset fallback */
width: 100%;
height: 100%;
margin: 0;
padding: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-o-object-fit: contain;
object-fit: contain;
z-index: 1;
-webkit-animation: gaGlow 4s ease-in-out infinite;
animation: gaGlow 4s ease-in-out infinite;
}

#globeAnim .ring {
position: absolute;
top: -3%; right: -3%; bottom: -3%; left: -3%;  /* outer ring slightly bigger than globe */
border: 2px dotted rgba(255, 255, 255, .45);
border-radius: 50%;
z-index: 2;
pointer-events: none;
-webkit-animation: gaSpin 14s linear infinite;
animation: gaSpin 14s linear infinite;
}

#globeAnim .ring.r2 {
top: 8%; right: 8%; bottom: 8%; left: 8%;
border-color: rgba(30, 111, 217, .6);
-webkit-animation: gaSpin 20s linear infinite reverse;
animation: gaSpin 20s linear infinite reverse;
}

#globeAnim .pl {
position: absolute;
top: -17px;
left: calc(50% - 17px);
width: 34px;
height: 34px;
fill: #fff;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

#globeAnim .r2 .pl {
top: -13px;
left: calc(50% - 13px);
width: 26px;
height: 26px;
fill: #1e6fd9;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}

@-webkit-keyframes gaFloat {
0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
50%      { -webkit-transform: translateY(-14px); transform: translateY(-14px); }
}
@keyframes gaFloat {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-14px); }
}

@-webkit-keyframes gaGlow {
0%, 100% { -webkit-filter: drop-shadow(0 0 20px rgba(17, 119, 185, .35)); filter: drop-shadow(0 0 20px rgba(17, 119, 185, .35)); }
50%      { -webkit-filter: drop-shadow(0 0 45px rgba(17, 119, 185, .8));  filter: drop-shadow(0 0 45px rgba(17, 119, 185, .8)); }
}
@keyframes gaGlow {
0%, 100% { filter: drop-shadow(0 0 20px rgba(17, 119, 185, .35)); }
50%      { filter: drop-shadow(0 0 45px rgba(17, 119, 185, .8)); }
}

@-webkit-keyframes gaSpin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes gaSpin         { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
7. #globeAnim responsive (desktop-first, max-width)
--------------------------------------------------------------------- */

/* Large desktops */
@media (max-width: 1399.98px) {
#globeAnim { width: 440px; }
}

/* Laptops / small desktops */
@media (max-width: 1199.98px) {
#globeAnim { width: 380px; }
}

/* Tablets */
@media (max-width: 991.98px) {
#globeAnim { width: 340px; }

#globeAnim .pl {
top: -15px;
left: calc(50% - 15px);
width: 30px;
height: 30px;
}
#globeAnim .r2 .pl {
top: -11px;
left: calc(50% - 11px);
width: 22px;
height: 22px;
}
}

/* Large phones */
@media (max-width: 767.98px) {
#globeAnim { width: 300px; }

/* stops the outer ring overflowing the screen */
#globeAnim .ring    { top: 0; right: 0; bottom: 0; left: 0; }
#globeAnim .ring.r2 { top: 10%; right: 10%; bottom: 10%; left: 10%; }

#globeAnim .gimg { padding: 6px; }
}

/* Small phones */
@media (max-width: 575.98px) {
#globeAnim { width: 260px; }

#globeAnim .ring,
#globeAnim .ring.r2 { border-width: 1.5px; }

#globeAnim .pl {
top: -12px;
left: calc(50% - 12px);
width: 24px;
height: 24px;
}
#globeAnim .r2 .pl {
top: -9px;
left: calc(50% - 9px);
width: 18px;
height: 18px;
}

/* smaller float so it doesn't jump */
@-webkit-keyframes gaFloat {
0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
50%      { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
}
@keyframes gaFloat {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-8px); }
}
}

/* Very small phones */
@media (max-width: 380px) {
#globeAnim { width: 220px; }
}

/* Short laptop screens (keeps globe from pushing text out of view) */
@media (min-width: 992px) and (max-height: 760px) {
#globeAnim { width: 340px; }
}

/* ---------------------------------------------------------------------
8. Buttons / pills
--------------------------------------------------------------------- */
.bg-primary-pill {
background: #1c75bc;                                          /* fallback */
background: -webkit-linear-gradient(315deg, #000000 0%, #1c75bc 100%);
background: linear-gradient(135deg, #000000 0%, #1c75bc 100%);
padding: 0.8rem 1.9375rem;
border-radius: 9999px;
}

/* Gradient-border pills (shared) */
.bg-black-pill,
.bg-white-pill {
position: relative;
display: inline-block;
padding: 0.8rem 1.9375rem;
border-radius: 9999px;
background: transparent;
isolation: isolate;
}

.bg-black-pill {
color: #0b1f33;               /* dark text for light pages; use #fff on dark pages */
font-weight: 600;
}

.bg-white-pill {
color: #ffffff;               /* use a dark colour if the page background is light */
}

.bg-black-pill::before,
.bg-white-pill::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
padding: 2px;                 /* border thickness */
border-radius: inherit;
/* cut out the middle so only the border remains */
-webkit-mask: -webkit-linear-gradient(#fff 0 0) content-box, -webkit-linear-gradient(#fff 0 0);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;  /* Chrome, Safari, old Edge */
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;      /* Firefox + modern standard */
pointer-events: none;
z-index: -1;
}

.bg-black-pill::before {
background: -webkit-linear-gradient(315deg, #1c75bc 0%, #ffd23f 100%);
background: linear-gradient(135deg, #1c75bc 0%, #ffd23f 100%);
}

.bg-white-pill::before {
background: -webkit-linear-gradient(315deg, #1c75bc 0%, #d62839 100%);
background: linear-gradient(135deg, #1c75bc 0%, #d62839 100%);
}

/* ---------------------------------------------------------------------
9. Page title + brand icon
--------------------------------------------------------------------- */
.page-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
line-height: 1.3;
}

.page-title__icon i {
display: block;               /* removes extra inline spacing under the icon */
line-height: 1;
}

.brand-icon {
color: #1c75bc !important;
}

/* ---------------------------------------------------------------------
10. YouTube responsive player (mobile first)
--------------------------------------------------------------------- */
.yt-wrap {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
border-radius: 8px;
}

/* fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
.yt-wrap::before {
content: "";
display: block;
padding-top: 56.25%;
}
}

/* iframe injected by the YouTube API fills the wrapper */
.yt-wrap #player-wrap,
.yt-wrap #player-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

/* overlay that hides the video title bar */
.yt-title-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 48px;
z-index: 10;
pointer-events: none;         /* set to auto if you want it to block clicks */
}

/* Small phones */
@media (max-width: 480px) {
.yt-wrap { border-radius: 0; }
.yt-title-cover { height: 40px; }
}

/* Tablets */
@media (min-width: 768px) {
.yt-wrap { max-width: 720px; border-radius: 10px; }
.yt-title-cover { height: 52px; }
}

/* Laptops */
@media (min-width: 1024px) {
.yt-wrap { max-width: 900px; }
.yt-title-cover { height: 56px; }
}

/* Large desktops */
@media (min-width: 1440px) {
.yt-wrap { max-width: 1100px; }
.yt-title-cover { height: 60px; }
}

/* Landscape phones (short viewports) */
@media (max-height: 480px) and (orientation: landscape) {
.yt-wrap { max-width: 80vw; }
}

/* ---------------------------------------------------------------------
11. Accessibility: reduced motion (covers every animation above)
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.globe-wrap,
.globe-img,
.orbit,
#globeAnim,
#globeAnim .gimg,
#globeAnim .ring {
-webkit-animation: none !important;
animation: none !important;
}

.fade-up {
-webkit-animation: none !important;
animation: none !important;
opacity: 1;
}
}

/* Base: keep proportions */
.logo-responsive {
height: 30px;
width: auto;
max-width: 100%;
}

/* Tablets and below */
@media (max-width: 991.98px) {
.logo-responsive {
height: 26px;
}
}

/* Mobile */
@media (max-width: 575.98px) {
.logo-responsive {
height: 22px;
margin-right: 0.25rem; /* tighter than me-2 */
}
}

/* Large screens */
@media (min-width: 1400px) {
.logo-responsive {
height: 30px;
}
}
.wrap {
padding: 0px;
display: inline-block;
width: 100%;
max-width: 640px;
box-sizing: border-box;
}

.video-box {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
background: #000;
}

.video-box img,
.video-box video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.video-box:hover img { transform: scale(1.03); }

/* White circle play button */
.play-btn {
position: absolute;
top: 50%; left: 50%;
width: 56px; height: 56px;
transform: translate(-50%, -50%);
border: 0;
border-radius: 50%;
background: #fff;
cursor: pointer;
box-shadow: 0 0 0 14px rgba(255, 255, 255, .25);   /* soft halo ring */
transition: transform .25s ease, box-shadow .25s ease;
}
.play-btn:hover {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 0 0 22px rgba(255, 255, 255, .2);
}

/* Dark triangle icon */
.play-btn::after {
content: "";
position: absolute;
top: 50%; left: 50%;
transform: translate(-35%, -50%);
border-left: 26px solid #222;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-radius: 3px;
}

/* Pulse animation on the halo (remove if you don't want it) */
@keyframes pulse {
0%   { box-shadow: 0 0 0 0   rgba(255,255,255,.45); }
100% { box-shadow: 0 0 0 28px rgba(255,255,255,0); }
}
.play-btn { animation: pulse 1.8s ease-out infinite; }
.play-btn:hover { animation: none; }