/* =========================
GLOBAL
========================= */



*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:"Roboto",sans-serif;
background:#f5f7fb;
color:#222;
line-height:1.6;
}

.container{
max-width:1600px;
margin:auto;
padding:25px 18px;
}

h1{
font-family:"Google Sans Flex","Roboto",sans-serif;
margin-bottom:20px;
}

p{
margin-bottom:14px;
}


/* =========================
NAVBAR
========================= */

header{
background:#0a3d62;
color:white;
position:sticky;
top:0;
z-index:1000;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 16px;
}

.logo{
font-weight:600;
font-size:18px;
}

nav ul{
list-style:none;
display:flex;
flex-wrap:wrap;
}

nav ul li{
position:relative;
}

nav ul li a{
display:block;
padding:12px 14px;
color:white;
text-decoration:none;
font-size:14px;
}

nav ul li a:hover{
background:#1e5c8c;
}

a{
text-decoration: none;
color: red;
}

/* =========================
DESKTOP DROPDOWN
========================= */

.submenu{

display:none;

position:absolute;

top:100%;
left:0;

background:white;

min-width:200px;

box-shadow:0 4px 10px rgba(0,0,0,0.2);

}

.has-submenu:hover > .submenu{
display:block;
}

.submenu li a{
color:#333;
padding:10px 14px;
}


/* =========================
MOBILE MENU
========================= */

.menu-toggle{
display:none;
font-size:24px;
cursor:pointer;
}

@media(max-width:768px){

nav ul{
display:none;
flex-direction:column;
background:#0a3d62;
width:100%;
}

nav ul.show{
display:flex;
}

.menu-toggle{
display:block;
}

/* MOBILE CASCADE */

.submenu{

position:absolute;

top:0;
left:100%;

display:none;

background:#ffffff;

min-width:180px;

box-shadow:0 4px 10px rgba(0,0,0,0.3);

}

.submenu.active{
display:block;
}

.submenu li a{
color:#333;
}

}


/* =========================
BUTTON
========================= */

.primary-btn{

background:#347c98;; /*#ff000000; */
color:white;

padding:14px 22px;

border-radius:6px;

text-decoration:none;

display:inline-block;

margin-top:20px;

}

.primary-btn:hover{
background:#1565c0;
}


/* =========================
CARD GRID
========================= */

.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:18px;

margin-top:25px;

}

.card{

background:white;

padding:20px;

border-radius:8px;

box-shadow:0 2px 6px rgba(0,0,0,0.1);

text-align:center;

}

.card a{

text-decoration:none;

color:#1e88e5;

font-weight:500;

}


/* =========================
MOBILE BOTTOM NAV
========================= */

.mobile-bottom-nav{

position:fixed;

bottom:0;

left:0;

width:100%;

background:#0a3d62;

display:flex;

justify-content:space-around;

padding:10px 0;

z-index:999;

}

.mobile-bottom-nav a{

color:white;

text-decoration:none;

font-size:13px;

text-align:center;

}

/* hide bottom nav on desktop */

@media(min-width:769px){

.mobile-bottom-nav{
display:none;
}

}


/* =========================
DARK MODE
========================= */

.dark-mode{
background:#121212;
color:#e4e4e4;
}

.dark-mode header{
background:#000;
}

.dark-mode nav ul li a{
color:white;
}

.dark-mode .card{
background:#1e1e1e;
color:white;
}

.dark-mode .submenu{
background:#1e1e1e;
}

#darkToggle{

background:none;
border:none;

color:white;

font-size:18px;

cursor:pointer;

margin-right:10px;

}

.mobile-menu{

position:fixed;
top:0;
left:-100%;

width:280px;
height:100%;

background:white;

box-shadow:3px 0 10px rgba(0,0,0,0.2);

transition:0.3s;

z-index:2000;

overflow:auto;

}

.mobile-menu.open{
left:0;
}

.menu-panel{
display:flex;
flex-direction:column;
}

.menu-panel a,
.menu-panel button{

padding:14px 18px;

border:none;

background:none;

text-align:left;

font-size:15px;

border-bottom:1px solid #eee;

cursor:pointer;

}

.submenu-panel{
display:none;
}

.submenu-panel.active{
display:flex;
}

.back-btn{
font-weight:600;
background:#f3f3f3;
}

@media(min-width:769px){

.mobile-menu{
display:none;
}

}

/* Float window */

#card{
    width: 420px;
    height:500px;
    background-color: #800000;  /* #c0c0c0 or yellow; or #add8e6; or green; or #614772; or https://www.computerhope.com/htmcolor.htm */
    border-radius: 5px;
    cursor: pointer;
    position: fixed;
    padding: 10px;
    padding-top: 25px;
    text-align: left;
    color: #000000; /* #000000; or white*/
}

#myButtonFloat{
    text-align: right;
    border: none;
}

/* General selection style for the whole page */
::selection {
  background-color: #ff0000; /* desired background color (e.g., yellow #ffcc00;) */
  color: #ffffff; /* desired text color (e.g., black) */
}

/* For compatibility with older Firefox versions (pre-61) */
::-moz-selection {
  background-color: #ff0000;
  color: #ffffff; }