.jumbotron h3 {
  margin-top: 20px; /* Adjust this value to move the text lower */
  margin-bottom: 20px; /* Adjust margin as needed */
  color: #202124;
}

.jumbotron h2 {
  margin-top: 10px; /* Adjust this value to move the text lower */
  margin-bottom: 10px; /* Adjust margin as needed */
}

.section {
  padding: 50px;
  height: 100vh; /* Full viewport height */
}

.correctheight {
  padding: 50px;
  height: 60vh;
}


.doubleheight {
  padding: 50px;
  height: 120vh;
}


.white {
  text-align: center;
  background-color: white;
  color: black;
}

.black {
  text-align: center;
  background-color: #1E1E1E;
  color: white;
}

.blackblack {
  background-color: #202124;
  color: #202124;
}

.lightgreen {
  text-align: center;
  background-color: #ADC1E2;
  color: black;
}

.darkslateblue {
  text-align: center;
  background-color: darkslateblue;
  color: white;
}

.gradient {
  text-align: center;
  background: linear-gradient(to top, #240147, #003333);
  color: white;
}


/* Custom error styles */
.has-error .help-block,
.has-error .form-control-feedback,
.has-error .form-control {
  color: red;
}

.has-success .help-block,
.has-success .form-control-feedback,
.has-success .form-control {
  color: green;
}

.form-container .form-control {
  width: 100%;
  max-width: 600px; /* Adjust this value to make the fields wider */
  margin: 0 auto; /* Center the form fields */
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

label {
  display: block;
  margin: 10px 0 5px;
}


input[type="text"], input[type="password"], input[type="email"], input[type="phone"], textarea {
  display: block;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: 100%;
  max-width: 800px; /* Ensure the same width for all input fields */
  color: black; /* Ensure text inside input fields is black */
}


input[type="submit"] {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  background-color: #240147;
  color: black !important; /* Ensure text inside submit button is black */
  cursor: pointer;
  margin-top: 20px;
}

input[type="submit"]:hover {
  background-color: #45a049;
}


.table-striped th {
  color: black;
}

/* Handle the collapsed state of the header */
.header.collapsed {
  height: 1px; /* Adjust this value as needed */
  transition: height 0.3s;
  padding: 5px 0; /* Adjust padding as needed */
}

.custom-portfolio-btn {
  background: linear-gradient(to bottom, #240147, #003333);
  border-color: teal;
  color: white; /* Optional: change text color to make it more readable */
}

.custom-reverse-btn {
  background: linear-gradient(to bottom, #035656, #4C0B8E); 
  border-color: #8C0383;
  color: white; /* Optional: change text color to make it more readable */
}

.custom-orange-btn {
  background: linear-gradient(to bottom, #F87311, #B36405);
  border-color: orange;
  color: white; /* Optional: change text color to make it more readable */
}

.content {
  background-color: #1E1E1E; /* Replace with your desired background color */
  color: white; /* Set text color to white */
  /* Add any other styles you want DBDCE0 */ 
}

.content-white {
  background-color: #FFFFFF; /* Replace with your desired background color */
  color: white; /* Set text color to white */
  /* Add any other styles you want DBDCE0 */ 
}


.content-teal {
  background-color: #23606B; /* Replace with your desired background color */
  color: white; /* Set text color to white */
  /* Add any other styles you want DBDCE0 */ 
}

.custom-img {
  width: 469px; /* Adjust width as needed */
  height: 356px; /* Adjust height as needed */
}

.custom-imgPhone {
  width: 420px; /* Adjust width as needed */
  height: 356px; /* Adjust height as needed */
}


.custom-imgWide {
  width: 1450px; /* Adjust width as needed */
  height: 800px; /* Adjust height as needed */
}


.masthead h3.text-muted {
    color: #FFFFFF;
    font-size: 2.5em; /* Adjust this value to your desired font size */
}

.lead {
    color: #FFFFFF !important; /* Change text color to purple */
    font-size: 1em; /* Adjust this value to your desired font size */
    /* Add any other styles you want */
}

.nav-justified  {
  border-color: transparent; /* Replace #desiredColor with your preferred color */
  border-radius: 0px;
}

/* Override Bootstrap button colors */
.nav-justified .nav-item a.nav-link {
  background-color: transparent !important; /* Deep indigo-purple with transparency */
  color: #FFFFFF; /* Text color */
  border-color: transparent; /* Replace #desiredColor with your preferred color */
  border-radius: 0px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Hover effect */
.nav-justified .nav-item a.nav-link:hover {
  background-color: rgba(50, 25, 150, 0.2) !important; /* Deep indigo-purple with transparency */
  color: #3275CA; /* Text color on hover */
  border-color: transparent; /* Border color on hover */
}

.nav-justified > li > a {
  background: transparent !important; /* Deep indigo-purple with transparency */
  border-bottom: transparent;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling on the body */
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.container-fluid {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%; /* Ensure full width */
    padding: 0; /* Remove default padding */
}

.header, .footer {
    flex-shrink: 0;
    width: 100%; /* Ensure full width */
}

.content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scrolling in the content */
    width: 100%; /* Ensure full width */
	padding-bottom: 100px; /* Adjust the value as needed */
}

.jumbotron {
	background-color: #1E1E1E;
    color: #FFFFFF; /* Text color */
    padding: 2rem; /* Adjust padding if needed */
    box-sizing: border-box; /* Ensure padding doesn't add to width */
	margin-bottom: 0px; /* Adjust margin as needed */
}

.jumbotronblack {
	background-color: #202124;
    color: #FFFFFF; /* Text color */
    padding: 2rem; /* Adjust padding if needed */
    box-sizing: border-box; /* Ensure padding doesn't add to width */
	margin-bottom: 0px; /* Adjust margin as needed */
}

.jumbotronwhitewhite {
	background-color: #FFFFFF;
    color: #FFFFFF; /* Text color */
    padding: 2rem; /* Adjust padding if needed */
    box-sizing: border-box; /* Ensure padding doesn't add to width */
	margin-bottom: 0px; /* Adjust margin as needed */
}

.jumbotronwhite {
	background-color: #FFFFFF;
    color: black; /* Text color */
    padding: 2rem; /* Adjust padding if needed */
    box-sizing: border-box; /* Ensure padding doesn't add to width */
	margin-bottom: 0px; /* Adjust margin as needed */
}

/* Responsive images */
img.img-fluid {
    max-width: 100%;
    height: auto;
}

.header {
  background: rgba(50, 25, 150, 0.2); /* Deep indigo-purple with transparency */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000; /* Ensure header is above other content */
  color: white;
  padding: 10px 0; /* Add some padding if needed */
  text-align: center;
}

.header h1 {
    margin: 0;
    font-size: 3.5em;
    letter-spacing: 1px;
}


.menu_background {
    background-color: #10062A;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0px;
    color: #0090FE;
}

.menu_background a {
    color: #0090FE;
    text-decoration: none;
    padding: 1px 2px;
}

.menu_active {
    background-color: #00FF00;
}

.menu_item {
    color: #4C0F4D; /* Default color for all menu items */
    text-decoration: none;
}

.menu_item:visited {
    color: #005454;
}

.menu_item:hover {
    color: #FF11F3;
}

.scrollable-content {
    flex: 1;
    overflow-y: auto;
    background-color: #F2F2F2;
    padding: 20px;
}

.row-bg-gray {
    background-color: #D9D9D9;
    padding: 10px;
    text-align: center;
}

.row-bg-grad {
  background: transparent; /* Deep indigo-purple with transparency */
  padding: 0px;
  text-align: center;
  color: #FFFFFF;
}

.row-bg-lightgray {
    background-color: #F2F2F2;
    padding: 10px;
}

.footer {
  padding: 20px;
  text-align: center;
  background: rgba(50, 25, 150, 0.2); /* Deep indigo-purple with transparency */
  border-radius: 0px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: fixed;
  width: 100%;
  bottom: 0;
  color: white; /* Set text color to white */
}

.nav-justified {
  border-color: transparent !important; /* Replace #desiredColor with your preferred color */
  border-radius: 0px;
  background-color: transparent !important; /* Make background transparent */
  margin-bottom: 0; /* Remove any bottom margin */
}


/* Image Slider Styles */
.slider-container {
    width: 100%; /* Full width */
    max-width: 1200px; /* Set max width */
    margin: 0 auto; /* Center slider */
    position: relative; /* Position for absolute children */
    overflow: hidden; /* Hide overflow */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
}

.slider-container img {
    width: 100%;
    height: auto;
    display: block; /* Ensure images are block elements */
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(50, 25, 150, 0.7); /* Semi-transparent background */
    color: white;
    border: none;
    font-size: 2rem;
    padding: 10px;
    cursor: pointer;
    z-index: 100;
}

.slider-arrow.left {
    left: 10px;
}

.slider-arrow.right {
    right: 10px;
}

.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.slider-dots span {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    cursor: pointer;
}

.slider-dots span.active {
    background-color: #240147; /* Active dot color */
}


#slider {
	width: 100%;
    height: 650px; /* Set the desired height of the slider */
    overflow: hidden;
}

#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    animation: slider 20s infinite;
}

#slider figure img {
    float: left;
    width: 20%;
    height: 100%; /* Make the image take up the full height of the slider */
    object-fit: cover; /* Crop the image to cover the entire container */
}

@keyframes slider {
    0% {
        left: 0%;
    }
    20% {
        left: 0%;
    }
    25% {
        left: -100%;
    }
    45% {
        left: -100%;
    }
    50% {
        left: -200%;
    }
    70% {
        left: -200%;
    }
    75% {
        left: -300%;
    }
    95% {
        left: -300%;
    }
    100% {
        left: -400%;
    }
}

.player {
	aspect-ratio: 16 / 9;
	width: 80%;
}

.gradient-text {
    font-size: 3em; /* Adjust size as needed */
    background: linear-gradient(to bottom, #2F32D9, #018989); /* Gradient definition */
    -webkit-background-clip: text; /* Clips the background to text only */
    -webkit-text-fill-color: transparent; /* Makes text transparent to show the gradient */
}

.gradient-text2 {
	font-size: 2em; /* Adjust size as needed */
    background: linear-gradient(to bottom, #2F32D9, #018989); /* Gradient definition */
    -webkit-background-clip: text; /* Clips the background to text only */
    -webkit-text-fill-color: transparent; /* Makes text transparent to show the gradient */
}

/* Dropdown menu background and border */
.navbar .dropdown-menu {
  background-color: transparent !important ; /* Matches navbar background */
  border: none !important ; /* Removes border */
  box-shadow: none; /* Removes shadow */
}

/* Dropdown items (links) */
.navbar .dropdown-item {
  color: #4150AC !important; /* Matches navbar link color */
  padding: 0.5rem 1rem; /* Adjust padding to match */
  font-weight: bold; /* Matches font weight */
}

/* Hover effects for dropdown items */
.navbar .dropdown-item:hover {
  color: #ffcc00 !important; /* Match hover text color */
  background-color: transparent; /* No background on hover */
  text-decoration: underline; /* Optional: underline effect */
}

.nav-item.active .nav-link {
	color: #50CC16 !important; /* Replace with your desired color */
	background-color: #007bff !important;
}


 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 459px;
  height: 346px;
  /*border: 1px solid #f1f1f1;*/
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background: linear-gradient(to top, #240147, #003333);
  color: white;
  transform: rotateY(180deg);
} 

/* Zoom on hover */
.zoom {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

.zoom:hover {
  transform: scale(1.5); /* or 1.5 if you want it huge */
}

/* Cutout text */
.image-container-mech {
  background-image: url("../images/20240306_024207.jpg"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* mact height */
}

.text {
  font-size: 3vw;
  font-weight: bold;
  background-color: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: white;
  background-clip: text;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.image-container-econ {
  background-image: url("../images/ScreenshotTrends.png"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

/* Black box with transparent cutout letters */
.text-econ {
  font-size: 3vw;
  font-weight: bold;
  background-color: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: black; /* The color of the text */
  background-clip: text;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}



.image-container-compsci {
  background-image: url("../images/Screenshot_display.png"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* Some height */
}

.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  padding-top: 25px;
  height: 0;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}

/* =========================================================
   Phone header and menu (under 768px)
   Title on the left, a menu button on the right; the links
   drop down when it's tapped (assets/js/nav.js).
   If JavaScript is off, the links show as one swipeable line.
   ========================================================= */
.nav-toggle {
  display: none;
}

@media (max-width: 767px) {
  .header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    text-align: left;
  }
  .masthead h3.text-muted,
  .header h3 {
    flex: 1;
    margin: 0 8px 0 16px;
    font-size: 1.15em;
    line-height: 1.3;
    letter-spacing: 0.5px;
  }
  .header nav {
    flex-basis: 100%;
  }

  /* Menu button */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 10px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  .nav-toggle:focus-visible {
    outline: 3px solid #50CC16;
    outline-offset: 2px;
  }

  /* Drop-down menu */
  .header.js-nav nav {
    display: none;
  }
  .header.js-nav.nav-open {
    background: rgba(16, 6, 42, 0.96);
  }
  .header.js-nav.nav-open nav {
    display: block;
    margin-top: 6px;
  }
  .header.js-nav .nav-justified > li {
    display: block;
    float: none;
    width: 100%;
  }
  .header.js-nav .nav-justified > li > a {
    margin: 0;
    padding: 13px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 15px;
    text-align: left;
  }

  /* No JavaScript: links in one swipeable line */
  .header:not(.js-nav) .nav-justified {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header:not(.js-nav) .nav-justified::-webkit-scrollbar { display: none; }
  .header .nav-justified::before,
  .header .nav-justified::after { display: none; }
  .header:not(.js-nav) .nav-justified > li {
    display: block;
    flex: 0 0 auto;
  }
  .header:not(.js-nav) .nav-justified > li > a {
    margin-bottom: 0;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* =========================================================
   Content sections on phones, tablets and small laptops
   (under 1200px, where the columns stack)
   - Sections grow to fit their content instead of a fixed height
   - Images shrink to fit the screen
   - Picture comes before its text in two-column sections
   ========================================================= */
@media (max-width: 1199px) {
  .section,
  .correctheight,
  .doubleheight {
    height: auto;
    min-height: 0;
    padding: 40px 30px;
  }

  /* Stack columns; picture first in two-column rows */
  .section > .row:not(.flip-row) {
    display: flex;
    flex-direction: column;
  }
  .section > .row:not(.flip-row)::before,
  .section > .row:not(.flip-row)::after {
    display: none;
  }
  .section > .row:not(.flip-row) > div:nth-of-type(2):last-of-type:has(> img),
  .section > .row:not(.flip-row) > div:nth-of-type(2):last-of-type:has(> .zoom),
  .section > .row:not(.flip-row) > div:nth-of-type(2):last-of-type:has(> div > img) {
    order: -1;
  }
  .section > .row:not(.flip-row) > [class*="col-"] {
    margin-bottom: 20px;
  }

  /* Images fit the screen */
  .section img,
  .custom-img,
  .custom-imgPhone,
  .custom-imgWide {
    max-width: 100%;
    height: auto;
  }
  .section .zoom {
    max-width: 100%;
  }

  /* Headings */
  .section .gradient-text {
    font-size: 2.2em;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .section h1 {
    font-size: 28px;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .section,
  .correctheight,
  .doubleheight {
    padding: 32px 16px;
  }
  .section .gradient-text {
    font-size: 1.8em;
  }
  .section h1 {
    font-size: 24px;
  }
}

/* Touch screens: no zoom on tap (it covered the text) */
@media (hover: none) {
  .zoom:hover {
    transform: none;
  }
}