@charset "utf-8";
/* AVGEO.CA */
html {
    height: 100%;
}
body {
   /* width: 100%;
	height: 100%;
    background: #A9A9A9;*/
	background: linear-gradient(to bottom, #13101f, #6f768b);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
	margin: 0px;
	padding: 0px;
}
table, th, td {
    border: 0;
	padding: 0;
	border-spacing: 0;
    border-collapse: collapse;
}
p {
	display: block;
	-webkit-margin-before:0;
    -webkit-margin-after: 0;
	-webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

div {
	display: block;
	/* outline:groove;*/
}
/*----------------------*/
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
/*--------------------*/
#bg{
margin:0 auto;
width:1024px;
box-shadow: -1px -1px 1px rgba(195,197,199,0.5), 2px 2px 8px rgba(100,100,100,0.5);
}
#header{
margin:0 auto;
width:100%;
min-height:120px;
background-color: #0d0e19;
}
/* -------------- Header layout  ------------*/
.header-inner{
    max-width:1024px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0;
	padding-left: 40px;
	padding-right: 40px;
}

.header-left img{
    height:120px;
}

.header-center{
    flex:1;
    text-align:center;
}

.header-right{
    text-align:right;
    font-size:12px;
    color:#ddc9c1;
}
/*-------------------------------------------*/
#layout{
margin:0 auto;
width:1024px;
height: auto;
border:0;
border-top: ridge #adadae 1px;
}
#navi{
margin:0 auto;
width:1024px;
height: 28px;
background-color: #adadae;
background: linear-gradient(to right, #0d0e19, #adadae);
}
#navi-line{
margin:0 auto;
margin-bottom:0;
width:710px;
height: 28px;
/*border: ridge #ffffff 1px;*/
border:0;
}
#main{
margin:0 auto;
margin-top:0;
width:1024px;
height: auto;
background-color: #adadae;
min-height: 700px;
}
#img-layer{
margin:0;
min-height: 400px;
}
.main-text{
width:560px;
top:10px;
margin:0;
margin-left:auto;
min-height: 400px;
/* border: ridge #00aa00 1px; */
}
#quick{
margin:0 auto;
margin-left:24px;
padding-top:25px;
padding-bottom:25px;
padding-left:0;
padding-right:0;
width:1000px;
height: 200px;
/* border: ridge #aa0000 1px; */
}
#moto{
margin:0 auto;
width:910px;
height: 50px;
margin-top: 10px;
margin-left: 67px;
margin-right: 67px;
margin-bottom: 0;
background-color: #adadae;
/* border: ridge #00aa00 1px; */
padding-top: 10px;
font-size: 14pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0px -1px 0px rgba(200, 200, 200, 0.7), 1px 1px 3px rgba(50, 50, 50, 0.5);
text-align: center;
}
#footer {
	border:0;
    border-bottom: groove #2e4e33 2px;
    bottom : 0;
	margin: 0 auto;
    margin-top : 10px;
    width: 1024px;
    padding: 0;
    height: 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #000000;
    text-align:center;
}
/*--------------------*/
.navibutton {
    background-color: #4CAF50; /* Green */
    border: none;
    border-radius: 4px;
    color: white;
    padding: 4px 25px;
    text-align: center;
    text-decoration: none;
	text-shadow: 0px -1px 0px rgba(200,200,200,0.7), 2px 2px 5px #000000;
    display: inline-block;
    font-size: 12pt;
    margin: 1px 1px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
	box-shadow: -1px -1px 0px rgba(200,200,200,0.5), 1px 1px 3px rgba(100,100,100,0.5);
}

.button1 {
    background-color: white; 
    background: linear-gradient(rgba(30,30,70,0), rgba(56,62,94,1), rgba(18,35,34,1));
    color: #adadae; 
    /*border: 1px solid #4CAF50;*/
}
.button1  a{
	text-decoration: none;
	color: #adadae; 
}
.button1:hover {
    background-color: #4CAF50;
    background: linear-gradient(rgba(72,88,95,1), rgba(18,35,34,0));
    color: white;
}
.button1  a:hover {
	text-decoration: none;
	color: white;
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	font-size: 10pt;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow: 0px -1px 0px rgba(200,200,200,0.7), 1px 1px 3px rgba(50,50,50,0.5);
}

.dropdown-content a {
    color: black;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
/*------------------------*/
.quick-links{
  display: flex;
  gap: 30px;
  width: 960px;
  flex-wrap: wrap;
}

/* The clickable card */
.flip-card{
  width: 300px;
  height: 200px;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  perspective: 960px;
  outline: none;
  font-family: "Comic Sans MS"; /* Arial, Helvetica, sans-serif; */
}

.flip-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
}

/* Inner element that rotates */
.flip-card__inner{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  transform-style: preserve-3d;
  transition: transform 220ms ease;
}

/* Flip on hover and keyboard focus */
.flip-card:hover .flip-card__inner,
.flip-card:focus-visible .flip-card__inner{
  transform: rotateY(180deg);
}

/* Faces */
.flip-card__face{
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  background: #c3c5c7;
  padding: 14px;
  box-sizing: border-box;

  /* Text selectable */
  user-select: text;
}

.flip-card__front{
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.flip-card__back{
  transform: rotateY(180deg);
  display: grid;
  align-content: center;
  gap: 10px;
}

.flip-card__title{
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}

.flip-card__desc{
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.95;
}

.flip-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Optional: front quote style */
.flip-card__quote{
  font-size: 14px;
  line-height: 1.35;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.04);
}

/* Hamburger hidden by default (desktop) */
.menu-toggle{
  display:none;
  position:fixed;
  top:12px;
  left:12px;
  z-index:2500;
  font-size:28px;
  line-height:1;
  padding:8px 12px;
  border:0;
  border-radius:10px;
  background: rgba(0,0,0,0.35);
  color:#fff;
  cursor:pointer;
}
/* =========================
   MOBILE FIRST ADJUSTMENTS
   ========================= */

@media (max-width: 768px){
	.dropdown > .navibutton{
    font-weight:700 !important;
  }

  /* show hamburger on mobile */
	.menu-toggle{ display:block; }
 
	#header{
	margin:0 auto;
	width:100%;
	height:80px;
	background-color: #0d0e19; 
	}
	 
	.header-inner{
       flex-direction:column;
       align-items:flex-start;
   }
   .header-left{
	   margin-left: auto;
   }
   .header-center,
   .header-right{
       text-align:left;
       margin-top:6px;
   }

  /* make fixed layout fluid */
  #bg, #navi, #main, #layout { 
	width:100% !important; 
	padding: 0 !important;
	margin: 0 !important;
  }

  #moto, #footer { 
	width:100% !important; 
	height: auto;
	padding: 10px !important;
	margin: 0 !important;
  }
  #quick { 
	width:100% !important;
	height: auto;
	padding: 0 !important;
	margin: 20px !important;
  }
  /* block image */
  #img-layer{ 
	background-image:none !important; 
  }
	.main-text{
	width:auto !important;
	margin-left:0 !important;
	min-height:0 !important;
	/* border: ridge #00aa00 1px; */
	}
	.quick-links{
		width:auto !important;
		margin:0 !important;
		min-height:0 !important;
		gap: 10px;
	}
  /* slide-in nav */
  #navi{
    position:fixed;
    top:0;
    left:-100%;
    width:82% !important;
    height:100vh;
    padding-top:60px;
    z-index:2000;
    overflow-y:auto;
    transition:left .25s ease;
  }
  #navi.active{ left:0; }

  /* dropdowns: no hover on phones -> show lists */
/* ===== Mobile navigation styling ===== */

  /* Make the nav area a clean vertical list */
  #navi-line{
    width:100% !important;       /* <- instead of 120px */
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* Top-level items: full width, consistent size */
  .navibutton{
    display:block !important;
    width:100% !important;
    box-sizing:border-box;
    padding:12px 16px !important;
    margin:0 !important;
    border-radius:0 !important;
    text-align:left !important;

    /* readable look */
    font-size:14pt !important;
    color:#f2f2f2 !important;
    background: rgba(255,255,255,0.06) !important;
    box-shadow:none !important;
    text-shadow:none !important;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }

  /* If your dropdown trigger uses .dropbtn in HTML, style it too */
  .dropbtn{
    display:block !important;
    width:100% !important;
    box-sizing:border-box;
    padding:12px 16px !important;
    margin:0 !important;
    border-radius:0 !important;
    text-align:left !important;
    font-size:14pt !important;
    color:#f2f2f2 !important;
    background: rgba(255,255,255,0.06) !important;
    box-shadow:none !important;
    text-shadow:none !important;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }

  .dropdown{
    display:block !important;
    width:100% !important;
  }

  /* Hide submenu by default (fixes "always listed") 
  .dropdown-content{
    isplay:none !important; 
    position:static !important;
    box-shadow:none !important;
    background: rgba(0,0,0,0.18) !important;
    min-width:unset !important;
    padding:6px 0 !important;
  }*/

  /* Show submenu when dropdown has .open (we toggle with JS) 
  .dropdown.open .dropdown-content{
    display:block !important;
  }*/
	/* Always show submenu on mobile (expanded navigation) */
	.dropdown-content{
    display:block !important;
    position:static !important;
    box-shadow:none !important;
    background: rgba(0,0,0,0.18) !important;
    min-width:unset !important;
    padding:6px 0 !important;
}

	/* Submenu items: smaller, indented, softer */
	.dropdown-content a{
	  display:block !important;
	  width:100% !important;
	  box-sizing:border-box;
	  padding:10px 16px 10px 34px !important;

	  font-size:12.5pt !important;
	  color: rgba(255,255,255,0.92) !important;
	  text-decoration:none !important;

	  border-bottom:1px solid rgba(255,255,255,0.08);
	  text-shadow:none !important;
	}

	/* Optional hover/tap feedback */
	.dropdown-content a:hover{
	  background: rgba(255,255,255,0.08) !important;
	}

}
/*  =======================
    DESKTOP RESET
	======================= */
@media (min-width: 769px){
  .menu-toggle{
    display: none !important;
  }

  #navi{
    position: static !important;
    left: 0 !important;
    width: 1024px !important;
    height: 28px !important;
    padding-top: 0 !important;
    overflow: visible !important;
  }

	  #navi-line{
		width: 710px !important;
		height: 28px !important;
	  }
	}