@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");

/* Universal Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  vertical-align: baseline;
}

/* Set default styles for modern elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Body Defaults */
body {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  min-width: 370px;
}

/* Remove list styles */
ol, ul {
  list-style: none;
}

/* Blockquotes and Quotes */
blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: none;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Improve mark visibility */
mark {
  background-color: rgba(255, 255, 0, 0.2);
  color: inherit;
}

/* Remove default focus outline for input elements */
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Normalize input, select, and textarea appearance */
input, select, textarea {
  appearance: none;
}

/* Basic */
/* Ensure consistent box-sizing */
html {
  box-sizing: border-box;
}

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

/* Set a minimum width for small screens */
@media screen and (max-width: 480px) {
  html, body {
    min-width: 320px;
  }
}

/* Background color */
body {
  background: #ffffff;
}

/* Disable animations and transitions when loading or resizing */
body.is-preload *, 
body.is-preload *::before, 
body.is-preload *::after,
body.is-resizing *, 
body.is-resizing *::before, 
body.is-resizing *::after {
  animation: none !important;
  transition: none !important;
}

/* Type */
/* Define font sizes for easy scaling */
:root {
  --base-font-size: 13pt;
  --font-color: white;
  --heading-color: white;
  --primary-color: #00FDFF;
  --border-color: #8A52FE;
  --code-bg: #00FDFF;
}

/* Base styles */
body, input, select, textarea {
  color: var(--font-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: var(--base-font-size);
  font-weight: 100;
  line-height: 1.65;
}

/* Responsive font size adjustments */
@media screen and (max-width: 1680px) { :root { --base-font-size: 11pt; } }
@media screen and (max-width: 1280px) { :root { --base-font-size: 10pt; } }
@media screen and (max-width: 360px)  { :root { --base-font-size: 9pt; } }

/* Links */
a {
  transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  border-bottom: dotted 1px;
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  border-bottom-color: var(--primary-color);
  color: var(--primary-color) !important;
}

a:hover strong {
  color: inherit;
}

/* Strong and bold text */
strong, b {
  color: var(--heading-color);
  font-weight: 600;
}

/* Emphasized text */
em, i {
  font-style: italic;
}

/* Paragraphs */
p {
  margin-bottom: 2em;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 1em;
}

h1 { font-size: 4em; margin-bottom: 0.5em; line-height: 1.3; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.7em; }

/* Responsive heading sizes */
@media screen and (max-width: 1680px) { h1 { font-size: 3.5em; } }
@media screen and (max-width: 980px)  { h1 { font-size: 3.25em; } }
@media screen and (max-width: 736px)  { 
  h1 { font-size: 2em; line-height: 1.4; } 
  h2 { font-size: 1.5em; } 
}

/* Headings inside links */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}

/* Superscript and Subscript */
sub, sup {
  font-size: 0.8em;
  position: relative;
}

sub { top: 0.5em; }
sup { top: -0.5em; }

/* Blockquotes */
blockquote {
  font-style: italic;
  margin-bottom: 2em;
  padding: 0.5em 0 0.5em 2em;
}

/* Code blocks */
code {
  background: var(--code-bg);
  border-radius: 0.375em;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.9em;
  margin: 0 0.25em;
  padding: 0.25em 0.65em;
}

/* Preformatted text */
pre {
  -webkit-overflow-scrolling: touch;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.9em;
  margin-bottom: 2em;
}

pre code {
  display: block;
  line-height: 1.75;
  padding: 1em 1.5em;
  overflow-x: auto;
}

/* Horizontal rule */
hr {
  border: 0;
  margin: 2em 0;
}

hr.major {
  margin: 3em 0;
}

/* Text alignment */
.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }



/* General spacing utility */
.row[class*="gtr-"] {
  margin-top: 0;
}


/* Responsive adjustments */
@media screen and (max-width: 1680px) {
  .row > .imp-xlarge { order: -1; }
  .row > .col-1-xlarge { width: var(--col-1); }
  .row > .off-1-xlarge { margin-left: var(--col-1); }
  /* Repeat for other column classes with `-xlarge` suffix */
}

@media screen and (max-width: 1280px) {
  .row > .imp-large { order: -1; }
  .row > .col-1-large { width: var(--col-1); }
  .row > .off-1-large { margin-left: var(--col-1); }
  /* Repeat for other column classes with `-large` suffix */
}

@media screen and (max-width: 980px) {
  .row > .imp-medium { order: -1; }
  .row > .col-1-medium { width: var(--col-1); }
  .row > .off-1-medium { margin-left: var(--col-1); }
  /* Repeat for other column classes with `-medium` suffix */
}

@media screen and (max-width: 736px) {
  .row > .imp-small { order: -1; }
  .row > .col-1-small { width: var(--col-1); }
  .row > .off-1-small { margin-left: var(--col-1); }
  /* Repeat for other column classes with `-small` suffix */
}

@media screen and (max-width: 480px) {
  .row > .imp-xsmall { order: -1; }
  .row > .col-1-xsmall { width: var(--col-1); }
  .row > .off-1-xsmall { margin-left: var(--col-1); }
  /* Repeat for other column classes with `-xsmall` suffix */
}

/* Section/Article */
/* Center alignment for special sections and articles */
.special {
  text-align: center;
}

/* Navbar container */
/* Basic nav bar styling */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #002244;  /* Match your main background color */
  position: relative;
}

/* Unordered lists for left/right links */
.navbar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Regular navigation links */
.nav-links {
  display: flex;
  list-style: none;
}

/* Individual list items */
.navbar li {
  margin: 0 10px;
}

/* Linked text styling */
.navbar a {
  text-decoration: none;
  color: white;  /* Or any desired base color */
  transition: color 0.2s ease-in-out;
  border-bottom: none;
}

/* Hover effect for links */
.navbar a:hover {
  color: var(--primary-color);  /* Uses your site's primary color variable */
}

/* Position and style the "back" icon as an X */
.navbar .back {
  position: absolute;  /* Position relative to the navbar */
  top: 20px;           /* Adjust as needed for vertical spacing */
  left: 0;         /* Adjust as needed for horizontal spacing */
  font-size: 2em;      /* Increase the icon size; adjust as needed */
  color: white;        /* Ensure it is visible on your navbar background */
}



/* Mobile: when screen is 900px or less */
@media screen and (max-width: 900px) {
  .navbar {
    justify-content: space-between;
    padding: 10px 20px;
  }
  /* Hide the desktop menu */
  .desktop-menu {
    display: none;
  }
  /* Show burger and Instagram icon */
  .nav-left,
  .nav-right {
    display: block;
    width: 10%;
    text-align: center;
  }
  /* Center the logo */
  .nav-center {
    width: 80%;
    text-align: center;
  }
  /* Make the logo image responsive */
  .logo img {
    width: 40vw;  /* Adjust as needed */
    height: auto;
  }
  /* Style the burger and Instagram icons */
  .burger,
  .instagram {
    font-size: 6vw;  /* Scales relative to viewport width; adjust as needed */
    line-height: 100px; /* Should roughly match the logo height */
  }  
}

@media (min-width: 901px) {
  /* Adjust the nav bar layout to center the logo */
  .navbar {
    justify-content: center;
  }
  
  /* Ensure the container of the logo centers its content */
  .mobile-controls {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Center the logo container */
  .logo {
    text-align: center;
    margin: 0 auto;
  }
  
  /* Make the logo image smaller and remove scaling */
  .logo img {
    width: 300px;       /* Adjust this value to be smaller than before */
    max-width: 300px;
    height: auto;       /* Keeps the aspect ratio */
    transform: none;    /* Remove any scaling transforms */
    display: block;
    margin: 0 auto;     /* Ensure it's centered */
  }

  #banner {
    margin-top: 5%;
  }
}

/* Burger and Instagram icons: Scale as needed */
.burger,
.instagram {
  font-size: 6vw;  /* Adjust this value as needed */
}

/* Logo styling in mobile view */
.mobile-controls .logo img {
  width: 45vw; /* Adjust to match your design */
  height: auto;
}


/* Logo styling */
/* Default logo styling */
.logo img {
    height: 95px;             /* or your desired height */
    transition: transform 0.3s ease;
    transform: scale(1);
  }
  
  /* For smaller screens: scale down the logo */
  @media (max-width: 900px) {
    .navbar .mobile-controls .logo img {
      transform: scale(0.7);  /* adjust the scale factor as needed */
    }
  }

/* For screens 900px or smaller, scale logo with viewport width */
@media (max-width: 900px) {
  /* Make sure the mobile controls container uses Flexbox */
  .navbar .mobile-controls {
    display: flex;
    justify-content: space-between; /* Evenly spaces the three items */
    align-items: center;           /* Vertically centers them */
    width: 100%;
    padding: 0 1rem;               /* Optional: adds horizontal padding */
  }

  .navbar .mobile-controls a:hover {
    color: var(--primary-color);              /* Optional: adds horizontal padding */
  }

  /* By default, each link inside mobile-controls takes equal space */
  .navbar .mobile-controls a {
    flex: 1;
    text-align: center;            /* Centers content by default */
  }

  /* Override the alignment for burger and instagram */
  .navbar .mobile-controls a.burger {
    text-align: left;
  }
  
  .navbar .mobile-controls a.instagram {
    text-align: right;
  }
}

/* Major header styling */
header.major > *:last-child {
  display: inline-block;
  margin-bottom: 2em;
  padding: 0 0.75em 0.5em;
}

/* Main header margin adjustment */
header.main > *:last-child {
  margin-bottom: 1em;
}

/* Icon */
.icon {
  text-decoration: none;
  position: relative;
}

.icon:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  line-height: inherit;
  z-index: 1; /* Ensures the icon stays above the outline */
}

.icon > .label {
  display: none;
}

.icon.solid:before {
  font-weight: 900;
}

.icon.brands:before {
  font-family: 'Font Awesome 5 Brands';
}


/* Features */
.features {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 2em -3em;
  width: calc(100% + 3em);
}

.features article {
  display: flex;
  align-items: center;
  margin: 0 0 3em 3em;
  position: relative;
  width: calc(50% - 3em);
}

.features article:nth-child(2n - 1) {
  margin-right: 1.5em;
}

.features article:nth-child(2n) {
  margin-left: 1.5em;
}

.features article:nth-last-child(1),
.features article:nth-last-child(2) {
  margin-bottom: 0;
}

.features article .icon {
  flex-grow: 0;
  flex-shrink: 0;
  display: block;
  height: 10em;
  line-height: 10em;
  margin: 0 2em 0 0;
  text-align: center;
  width: 10em;
}

.features article .icon:before {
  color: #00308F;
  font-size: 2.75rem;
  position: relative;
  top: 0.05em;
}

.features article .icon:after {
  transform: rotate(45deg);
  border-radius: 0.25rem;
  border: solid 2px rgba(210, 215, 217, 0.75);
  content: '';
  display: block;
  height: 7em;
  left: 50%;
  margin: -3.5em 0 0 -3.5em;
  position: absolute;
  top: 50%;
  width: 7em;
}

.features article .content {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
}

.features article .content > :last-child {
  margin-bottom: 0;
}

/* Responsive Styles */
@media screen and (max-width: 980px) {
  .features {
    margin: 0 0 2em 0;
    width: 100%;
  }

  .features article {
    margin: 0 0 3em 0;
    width: 100%;
  }

  .features article:nth-child(2n - 1),
  .features article:nth-child(2n) {
    margin-right: 0;
    margin-left: 0;
  }

  .features article:nth-last-child(1),
  .features article:nth-last-child(2) {
    margin-bottom: 3em;
  }

  .features article:last-child {
    margin-bottom: 0;
  }

  .features article .icon {
    height: 8em;
    line-height: 8em;
    width: 8em;
  }

  .features article .icon:before {
    font-size: 2.25rem;
  }

  .features article .icon:after {
    height: 6em;
    margin: -3em 0 0 -3em;
    width: 6em;
  }
}

@media screen and (max-width: 480px) {
  .features article {
    flex-direction: column;
    align-items: flex-start;
  }

  .features article .icon {
    height: 6em;
    line-height: 6em;
    margin: 0 0 1.5em 0;
    width: 6em;
  }

  .features article .icon:before {
    font-size: 1.5rem;
  }

  .features article .icon:after {
    height: 4em;
    margin: -2em 0 0 -2em;
    width: 4em;
  }

  /* Fix duplicate media query */
  .features article .icon:before {
    font-size: 1.25rem;
  }
}



/* Wrapper */
#wrapper {
  display: flex;
  flex-direction: row-reverse;
  min-height: 100vh;
}

/* Main */
#main {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
  background-color: #002244;
}

#main > .inner {
  padding: 0 6em 0.1em;
  margin: 0 auto;
  max-width: 110em;
}

#main > .inner > section {
  padding: 6em 0 4em;
}

#main > .inner > section:first-of-type {
  border-top: 0 !important;
}

/* Override Instagram icon size in the footer */
#footer .icons li a.instagram {
  font-size: 42px !important;
  line-height: normal !important;
}

#footer .icons li a.instagram i {
  font-size: inherit !important;
}

#footer .icons li a.instagram i:hover {
  color: #8954FD;
}

/* Responsive Design */
@media screen and (max-width: 1680px) {
  #main > .inner {
    padding: 0 5em 0.1em;
  }
  #main > .inner > section {
    padding: 5em 0 3em;
  }
}

@media screen and (max-width: 1280px) {
  #main > .inner {
    padding: 0 4em 0.1em;
  }
  #main > .inner > section {
    padding: 4em 0 2em;
  }
}

@media screen and (max-width: 736px) {
  #main > .inner {
    padding: 0 2em 0.1em;
  }
  #main > .inner > section {
    padding: 3em 0 1em;
  }
}


/*Banner Links*/
/* Center and style menu items */
#banner .content p {
    text-align: center;
    margin: 0;
}

#banner .content p a {
    display: block;
    font-size: 1.75em;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

#banner .content p a:hover {
    color: #8954FD;
}

/* Evenly space the menu items vertically */
#banner .content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: calc(100vh - 200px); /* Adjust this value based on your nav/footer heights */
    margin-top: -15%;
}

#banner .content p a {
    display: block;
    font-size: 1.75em;
    color: white;           /* Set default text color to white */
    text-decoration: none;  /* Remove any text decoration */
    border-bottom: none;    /* Remove the dotted underline */
    transition: color 0.2s ease-in-out;
}

#banner .content p a:hover {
    color: #8954FD;         /* Change text color on hover */
}

.features .icon i {
  font-size: 2.5em; /* Adjust size */
  color: white; /* Adjust color */
  padding-top: 1.54em;
}

@media screen and (max-width: 980px) {
  .features .icon i {
    font-size: 2.5em; /* Adjust size */
    color: white; /* Adjust color */
    padding-top: 1.15em;
  }
}

@media screen and (max-width: 480px) {
  .features .icon i {
    font-size: 1.5em; /* Adjust size */
    color: white; /* Adjust color */
    padding-top: 1.5em;
  }

  #footer .icons {
    padding: 2em .5em 0 0;
  }
}

 /* Footer */
#footer .copyright {
  color: white;
  font-size: 0.9em;
  text-align: center;
}
  
#footer .copyright a {
    color: inherit; 
}

#footer .icons {
  display: flex;
  justify-content: center;
  gap: 50px; /* optional: adds spacing between icons */
}

#footer .icons{
  padding-right: .5em;
}

#footer .copyright{
  padding-right: .5em;
}
#footer .creator{
  border-bottom: none;
}

/* Header & Footer Icons*/
#header .icon:after,
#footer .icon:after {
  border: none !important;
}

#header .icons a,
#footer .icons a {
  border-bottom: none !important;
  text-decoration: none !important;
}