/* =====================================================
   TECHINVESTMENT.COM Site CSS
   Updated: Thu 6 Aug 2026 @ 12pm
==================================================== */

:root {
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --site-max-width: 900px;

  --ink-red: 200 40 2;
  --ink-blue: 55 120 250;
  --ink-green: 40 190 20;
  --ink-purple: 165 35 220;
  --ink-orange: 220 115 20;
  --ink-black: 0 0 0;
  --ink-gray: 20 20 20;
}

p {
  font-family: var(--font-body);
  font-size: 1.45rem;    
  line-height: 1.4;
  margin: 0 0 1em 0;
}

/* Headings share one font, sized down the scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  margin: 1.5em 0 0.5em 0;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 2.3rem; }
h3 { font-size: 2.0rem; }
h4 { font-size: 1.8rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.4rem; }
/*Check if h6 used.*/

/*Font colours for headings*/
h1 {
  color: rgb(var(--ink-black));
}

h2 {
  color: rgb(var(--ink-gray));
}

h3 {
  color: rgb(var(--ink-gray));
}

h4 {
  color: rgb(var(--ink-gray));
}

h5 {
  color: rgb(var(--ink-gray));
}

#home-page h2{
  color: rgb(var(--ink-blue));
}

/* Stops the new heading top-margin from double-stacking with .ex800's
   own padding (FIX43) when a heading is the first thing in its container */
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}

/* Special-case p modifiers — stack freely, e.g. class="p-bold p-small" */

.p-bold { 
  font-weight: 700; 
}

.p-small {
  font-size: 0.875rem;
}  

.p-large { 
  font-size: 2.50rem; 
  font-weight: 400px;
}  

.p-center {
  text-align: center; 
}

.div-centered {
  text-align: center;
}

/*New class created 1 Aug 2026*/
.site-wrap {
    max-width: var(--site-max-width);
    margin: 0 auto;
    /*padding: 0 20px;*/
    box-sizing: border-box;
}

/* Main navbar container */
.topnav {
    /*max-width: 1000px;*/
    max-width: var(--site-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(15, 15, 15, 0.80); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); 
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 9999;
    overflow: visible;
}

/* Brand / website title */
.brand {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover {
    /*color: #00bfff;*/
    color: SteelBlue;
}

/* Dropdown container */
.dropdown {
    position: relative;
    font-size: 22px;
    overflow: visible;
}

/* Dropdown button */
.dropbtn {
    background: transparent;
    color: white;
    font-size: 2.5rem;
    border: none;
    cursor: pointer;

    padding: 5px 10px;
}

/* Dropdown menu box */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    /*min-width: 220px;*/
    min-width: 260px;
    background-color: whitesmoke;
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    overflow: hidden;
    color: gray;
    z-index: 99999;
}

/* Dropdown links */
.dropdown-content a {
    display: block;
    color: whitesmoke;
    padding: 10px 10px 10px 20px;
    text-decoration: none;
    font-size: 2rem;
}


/* Dropdown link hover */
.dropdown-content a:hover {
    /*background-color: MediumOrchid;*/
    background-color: lavender;
    /*color: #00bfff;*/
    color: black;
}

/* Show dropdown */
.dropdown:hover .dropdown-content {
    display: block;
}

/* =====================================================
   Homepage ticker / marquee
   Replaces the old malformed inline style on the
   <marquee> element in index.php. Provides the outline
   effect the old (undefined) "outlined" class was meant
   to give, using text-shadow rather than a missing class.
===================================================== */
.ticker-marquee {
    background-color: white;
    width: 100%;
    height: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.7rem;
    font-weight: 300;
    color: #000;
    /* draws the stroke behind the fill, standards-track equivalent */
    /*-webkit-text-stroke: 1px #000;*/
    /* thin, subtle — just crisps up the edges */
    -webkit-text-stroke: 0.5px #000; 
    paint-order: stroke fill;  
    padding-top: 10px;
    padding-bottom: 0px;
}



/* Mobile adjustments
   NOTE: kept at the end of the file on purpose, so these
   rules correctly override the base rules above at narrow
   viewports (previously this block lived in bunting.css
   while an un-scoped .topnav rule in navbar.css loaded
   after it and silently cancelled the padding override —
   that's fixed now that there's only one file). */
@media screen and (max-width: 600px) {
    .topnav {
        padding: 10px;
    }

    .brand {
        font-size: 1.1rem;
    }

    .dropdown-content {
        min-width: 200px;
    }
}

/* =====================================================
   Moved from top_openhead_inc.php ("SITE SPECIFIC STYLE")
   31 Jul 2026. Not found in use in about.php, index.php,
   navbar_inc.php, or top_closehead_block_inc.php — keep
   an eye out on the other pages before assuming these are
   safe to delete outright.
===================================================== */
.center {
    margin: auto;
    width: 90%;
}

.blurable:hover {
  filter: blur(1px);
  -webkit-filter: blur(1px);
}

div.ex1 {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: auto;
}

/*Used for image on front page only so far.*/
img.centered-img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

/*Added 1 Aug 2026 to centre the iFrame for the Synthesia video. */
.iframe-center {
  text-align: center;
}

.iframe-center iframe {
    display: block;
    width: 100%;
    max-width: 800px;
    height: 450px;
    margin: 0 auto;
    border: 0;
}

/* MOVED FROM ABOUT.PHP on 31 Jul 2026 */

/*-- PAGE-SPECIFIC STYLES FROM ABOUT.PHP */

div.ex0 {
  align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width:800px;
  margin: auto;
}

div.ex1 {
  align: center;
  display: block;
  width: 100%;
  max-width:800px;
  margin: auto;
  height: 60%;
}

div.ex700,
div.ex800 {
  width: 100%;
  max-width: none;
  margin: 0;
  position:relative;
}

div.ex800 {
  /*padding-top: 1rem;*/
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 0;
  padding-right:0;
}

div.pie {
  max-width:600px;
    min-height: 380px;

  margin: auto;
  position:relative;
}

div.ex2 {
  max-width:600px;
  max-height:400px;
  margin: auto;
  align: left;
}
div.ex2c {
  max-width:600px;
  max-height:400px;
  margin: auto;
  align: center;
}

div.ex3 {
  max-width:400px;
  max-height:400px;
  marginwidth:50px;
  align: center;
  valign: middle;
}

div.ex3b {
  position: relative;
  max-width:800px;
  margin: auto;
  top: -10em;
}

.column {
  float: left;
  width: 40%;
}

.h1 {align: left;}
.h2 {align: left;}
.h3 {align: left;}
.h4 {align: left;}
.h5 {align: left;}

/* unvisited link */
a:link {
  color: DodgerBlue;
}

/* visited link */
a:visited {
  color: DodgerBlue;
}

/* mouse over link */
a:hover {
  color: crimson;
}

/* selected link */
a:active {
  color: crimson;
}

/* Brand should stay white regardless of link state */
a.brand:link,
a.brand:visited {
  color: #ffffff;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.containerb {
  font-family: Arial;
  font-size: 14px;
  text-align: center;
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.parallax {
  background-image: url('/images/investing.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 65%;
  
  min-height: 400px;
  min-width: 800px;
}

* {
  box-sizing: border-box;
}

/* Create two unequal columns that float next to each other */
.column {
  float: left;
  padding: 5px;
  height: 400px; /* Should be removed. Only for demonstration */
}

.left {
  width: 50%;
}

.right {
  width: 50%;
}

.indent50 {
  margin-left: 50px;
  margin-right: 50px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}