/*
    AD_stylesheet_sam_final.css by Ralph Alonso 
    <http://alonsodigital.com>
    created 01-10-2017

    Copyright (c) 2017 AlonsoDigital
    This file may be used by alonsodigital staff as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 

    v 1.0.1 - bw 01-10-2017
	v 2.0.1 - ra 05-01-2025
*/

/* -------- color guide ----------
#3c6b92 : main blue
#6acce2 : light blue
#2c566a : teal accent
#193742 : dark blue
#e1d8b9 : sand accent
#cb7d20 : orange accent
#51341a : brown
#995522 : dark orange (used for links or high contrast accents)
#cb202a : red accent (this color does not encode well, use only for small accents)
#896287 : purple
*/

/body  {
    background-image: url("images/Gold_bg_1.jpg");
    background-color: #cccccc;
}/

.left-column {
  font-family: 'Audiowide', sans-serif !important;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Apply Audiowide font globally or to nav menu */
body, nav, ul, li, a, p {
  font-family: 'Audiowide', sans-serif;
}

body, h1, h2, h3, h4 {
  font-family: 'Audiowide', cursive;
}

/* -------- Glow  ----------*/

.glow-box img {
  display: block;
  width: 100%;
  padding: 4px;
  background-color: #000;
}

.glow-box {
  border: 2px solid #41BFE3;
  border-radius: 8px;
  box-shadow: 0 0 6px #41BFE3, 0 0 12px rgba(65, 191, 227, 0.4);
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.glow-box:hover {
  box-shadow: 0 0 10px #41BFE3, 0 0 25px rgba(65, 191, 227, 0.7);
  transform: scale(1.01);
}

*, *::before, *::after {
  box-sizing: border-box;
}


a .glow-box:hover {
  cursor: pointer;
}
a {
  text-decoration: none;
  color: inherit;
}

a.glow-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.glow-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
}
a.glow-link:hover {
  background-color: transparent;
}



.video-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px auto;
  max-width: 100%;
  padding: 0 20px;
}

.video-wrapper video {
  width: 100%;
  max-width: 960px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.3);
}

/* Tell the browser the sizing property to use.*/
* {
    box-sizing: border-box;
}

/* Select the font-family */
html {
	/* font-family: "DS-Digital"," DS-Digital Bold"," DS-Digital Bold Italic"," DS-Digital Italic" , "Lucida Sans", sans-serif; */
	font-family: "Lucida Sans", sans-serif; 
	font-size: 15px;
	color: #ffffff;
}

/* Set the images to be responsive. */
img {
    width: 100%;
    height: auto;
	/* box-shadow: 1px 1px gray; */
}


/* Set my videos to be responsive. */
video {
    width: 100%;
    height: auto;
	/* box-shadow: 1px 1px gray; */
}

/* Set the YouTube and Vimeo videos to be responsive. */

.video-container{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-container iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* Set the documents to be responsive. */

.doc-container{
    overflow:hidden;
    padding-bottom:100%;
    position:relative;
    height:0;
}
.doc-container iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* Display in Figure */
figure {
	text-align: right;
	font-size: 20px;
	font-style: italic;
}

/* Display Figure Caption */
figcaption {
	text-align: right;
	color: white;
	font-size: small;
	font-style: italic;
}


/* Set buttons */
button {
    background-color: transparent;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    color: #41BFE3;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
	font-style: normal;
	float: right;
	width: auto;
	height: auto;
	padding-top: 8px;
	padding-bottom: 8px;
	/* padding-left:85px; */
	/* padding-right: 85px; */
}

button:hover {
	background-color: transparent;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    color: #41BFE3;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
	font-style: normal;
	float: right;
	width: auto;
	height: auto;
	padding-top: 8px;
	padding-bottom: 8px;
	/* padding-left:85px; */
	/* padding-right: 85px; */
}

btn-group .button {
    background-color: blue; /* Green */
    border: 1px solid blue;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-grid;
    font-size: 16px;
    cursor: pointer;
    float: left;
}
.btn-group .button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group .button:hover {
    background-color: transparent;
}



/* Set what to inserts after the content of each selected element(s).*/
.row:after {
    content: "";
    clear: both;
    display: table;
}

/* Selects the elements with the .col attribute and use the wildcard selector attribute. */
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}

/* Used this @media rule to include the block of CSS properties only if a certain condition is true.*/
@media only screen and (min-width: 600px) {
    .col-s-1  {width: 8.33%;}
    .col-s-2  {width: 16.66%;}
    .col-s-3  {width: 25%;}
    .col-s-4  {width: 33.33%;}
    .col-s-5  {width: 41.66%;}
    .col-s-6  {width: 50%;}
    .col-s-7  {width: 58.33%;}
    .col-s-8  {width: 66.66%;}
    .col-s-9  {width: 70%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 1150px) {
    .col-1  {width: 8.33%;}
    .col-2  {width: 16.66%;}
    .col-3  {width: 25%;}
    .col-4  {width: 33.33%;}
    .col-5  {width: 41.66%;}
    .col-6  {width: 50%;}
    .col-7  {width: 58.33%;}
    .col-8  {width: 66.66%;}
    .col-9  {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/* Set the header */
.header {
    background-color: black;
	color: #ffffff;
	text-align: left;
    font-size: 20px;
}

/* Set the footer */
.footer {
    background-color: #b40607;
	color: #ffffff;
    padding: 2px;
	text-align: center;
    font-size: medium;
	font-family: DS-Digital;
}

/* Set the navigation menu */
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #151673;
    color: #ffffff;
	font-size: 15px;
	text-align: center;
    box-shadow: 1px 1px gray;
}

/* Set the right side colume of the page */
.aside {
    background-color: black;
    padding: 0px;
    color: #ffffff;
    text-align: left; 
}

/* Set the Headers 1 through 5*/
h1 {
color: #ffffff;
text-align: center;	
font-size: auto;	
font-family: DS-Digital;
}
h2 {
color: #41BFE3;
text-align: center;
font-size: medium;
font-family: DS-Digital;
}
h3 {
color: #41BFE3;
text-align: left;
font-size: large;
font-family: DS-Digital;
}
h4 {
color: #41BFE3;
text-align: center;
font-size: 30px;
font-style: oblique;
}


h5 {
color: #ffffff;
text-align: center;
font-size: medium;
font-family: DS-Digital;
}
h6 {
color: #b40607;
text-align: left;
font-size: large;
font-family: sans-serif;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #b40607;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: #b40607;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 5px;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 102%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #b40607 transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Set Links */
a:link {
    color: #41BFE3;
    background-color: transparent;
    text-decoration: none;
	
}
a:visited {
    color: white;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: white;
    background-color: transparent;
    text-decoration: none;
}
a:active {
    color: #ffffff;
    background-color: transparent;
    text-decoration: none;
}

 /* The alert message box */
.alert {
    padding: 20px;
    background-color: #b40607; /* Red */
    color: white;
    margin-bottom: 15px;
	font-family: DS-Digital;
}

/* The alert message box in blue*/
.alert_blue {
    padding: 20px;
    background-color: #41BFE3; /* Blue */
    color: black;
    margin-bottom: 15px;
	font-family: DS-Digital;
}

/* The close button */
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
    color: black;
}

/* Set backgroun images */
.outer-background	{
			background-color: black;
			background-image: url("images/global-network-l.jpg");
			background-repeat: repeat-x;
			background-attachment: fixed;
			}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: white;
    color: white;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button3 {
    background-color: transparent; 
    color: white; 
    border: 2px solid #41BFE3;
}

.button3:hover {
    background-color:red;
    color: white;
	border: 2px solid white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: #555555;
    color: white;
}


/* Use for video background */
body {
  margin: 0;
  background: #000; 
}
video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
   opacity: .5;
}

#polina { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  width: 50%;
  margin:2rem;
  float: right;
  font-size: 1.2rem;
}
h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}
#polina button { 
  display: block;
  width: 80%;
  padding: .4rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  transition: .3s background;
}
#polina button:hover { 
   background: rgba(0,0,0,0.5);
}

a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  padding: .5rem;
  transition: .6s background; 
}
a:hover{
  background:rgba(0,0,0,0.9);
}
@media screen and (max-width : 521px ){ 
  div{width:70%;} 
}
@media screen and (max-device-width: 800px) {
  html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}



/* Start Fade Box Col 1 */
#fade_box { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */
  margin:2rem;
  float: left; 
  font-size: 20px; /* size of font. */	
  border: inset;
}

/* Box 1. */
#fade_box_1a { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */
  margin:2rem;
  float: left; 
  font-size: 20px; /* size of font. */	
  border: inset;
}

/* Box 1. */
#fade_box_1a1 { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */
  margin:2rem;
  float: left; 
  font-size: 20px; /* size of font. */	
  border: inset;
}

/* Box 1. */
#fade_box_1b { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */
  margin:2rem;
  float: left; 
  font-size: 20px; /* size of font. */	
  border: inset;	
}

/* Box 1. */
#fade_box_1c { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */
  margin:2rem;
  float: left; 
  font-size: 20px; /* size of font. */	
  border: inset;	
}

/* Box 1. */
#fade_box_1d { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */
  margin:2rem;
  float: left; 
  font-size: 20px; /* size of font. */
  border: inset;	
}

/* Start Fade Box Col 2 */
#fade_box2a1L { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */	
  margin:2rem;
  float: inherit;
  font-size: 20px; /* size of font. */
  border: inset;
}



/* Start Fade Box Col 2 */
#fade_box2a1 { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */	
  margin:2rem;
  float: inherit;
  font-size: 20px; /* size of font. */
  border: inset;
}

/* Start Fade Box Col 2 */
#fade_box2a { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */	
  margin:2rem;
  float: inherit;
  font-size: 20px; /* size of font. */
  border: inset;
}

/* Box 2. */
#fade_box2b { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */	
  margin:2rem;
  float: inherit;
  font-size: 20px; /* size of font. */
  border: inset;
}

/* Box 2. */
#fade_box2c { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */	
  margin:2rem;
  float: inherit;
  font-size: 20px; /* size of font. */
  border: inset;
}

/* Box 2. */
#fade_box2d { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  width: 100%; /* width for the transparant area. */	
  margin:2rem;
  float: inherit;
  font-size: 20px; /* size of font. */
  border: inset;	
}


/* Start Fade Box Col 3 */
#fade_tip1 { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  margin:2rem;
  float: right;
  font-size: 20px; /* size of font. */
  border: inset;	
}

/* Box 2. */
#fade_box3a { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  margin:2rem;
  float: right;
  font-size: 20px; /* size of font. */
  border: inset;
}

/* Box 2. */
#fade_box3b { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  margin:2rem;
  float: right;
  font-size: 20px; /* size of font. */
  border: inset;	
}

/* Box 2. */
#fade_box3c { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  margin:2rem;
  float: right;
  font-size: 20px; /* size of font. */
  border: inset;
}

/* Box 2. */
#fade_box3d { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  margin:2rem;
  float: right;
  font-size: 20px; /* size of font. */
  border: inset;	
}

/* Box 2. */
#fade_box3e { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  margin:2rem;
  float: right;
  font-size: 20px; /* size of font. */
  border: inset;	
}

/* Box 2. */
#fade_box3f { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: dimgray;
  padding: 2rem;
  margin:2rem;
  float: right;
  font-size: 20px; /* size of font. */
  border: inset;	
}


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}



* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}





 /* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
} 



/* ✅ SAM Control Center Menu Font Style */
.menu ul li a {
  font-family: 'Audiowide', cursive !important;
  font-size: 17px;
  color: #00ffff;
  letter-spacing: 1px;
  text-shadow: 0 0 6px #00ffff;
  text-align: center;
  display: block;
  transition: all 0.3s ease;
}

.menu ul li a:hover {
  color: white;
  text-shadow: 0 0 8px white;
}