/**
 * GLOBAL VARIABLES
 * Use:  var(--main-bg-color)
 * Web Safe Colors  https://htmlcolorcodes.com/color-chart/web-safe-color-chart/
 **/

:root {
	--black: #000;
	--blue: #002bd5;
	--gray: #ccc;
	--green: #339900;
	--orange: #ff9900;
	--red: #ff0000;
	--tan: #CC9966;
	--white: #fff;
	--yellow: #ffff00;
	--body-color: #666;
	--nav-color: #2bd100;
	--nav-hover: #ff5800;
	--nav-active: #ff5800;
	--footer-bg: #002bd5;
	--font1: 'Poppins', sans-serif;
	--font2: 'Rubik', sans-serif;
}

/**
 * COLORS
 **/
 .bg-red {
	background-image: url("../images/atom-background.png");
	background-repeat: repeat-x;
}

.bg-black {
	background-color: #000000;
}

.bg-green-top {
	background-image: url("../images/green-science-top.jpg");
	background-repeat: repeat-x;
}

.bg-green-bottom {
	background-image: url("../images/green-science-bottom.jpg");
	background-repeat: repeat-x;
}

.bg-student {
	background-image: url("../images/student-background.jpg");
	background-repeat: repeat-x;
}

.bg-blue {
	background-image: url("../images/blue-science-notes.jpg");
	background-repeat: repeat-x;
}

.bg-banner2 {
	background-image: url("../images/science-days.jpg");
	background-repeat: repeat-x;
}

/**
 * FONTS
 * Family  font-family: 'Poppins', sans-serif;
 * Family  font-family: 'Rubik', sans-serif;
 **/

 /* commented out by TLS
  * this is overriding over css even when marked !important
* {
	font-family: var(--font1);
	color: var(--body-color);
}
	*/

.font2 {
	font-family: var(--font2);
}

.announce {
	font-size: 2.0rem;
	font-weight: 500;
	letter-spacing: .06rem;
	color: #fff;
}





 @media (min-width: 1200px) {
	.announce-blue {
		font-size: 2.0rem;
		font-weight: 600;
		letter-spacing: .06rem;
		color: #01209f;
		text-shadow: 1px 1px #fff;
	}
 }	

 @media (min-width: 1100px) and (max-width: 1199px){
	.announce-blue {
		font-size: 2rem;
		font-weight: 600;
		letter-spacing: .06rem;
		color: #01209f;
		text-shadow: 1px 1px #fff;
	}
 }

  @media (max-width: 1099px) {
	.announce-blue {
		font-size: 2rem;
		font-weight: 600;
		letter-spacing: .06rem;
		color: #01209f;
		text-shadow: 1px 1px #fff;
	}
 }






.featurette-heading {
    color:#ff5800;
	font-weight: 300;
  }



.font-blue {
	color:#002bd5;
}

.marketing h2 {
	font-weight: 300;
  }

/**
 * BRAND
 **/
.navbar-brand-item {
	width: 170px;
}


/**
 * TOP NAV
 **/
li.nav-item a, li.nav-item a:visited {
	color: var(--nav-color) !important;
	font-weight: 600;
	text-decoration: none;
	font-size: 1.1em
}

li.nav-item a:hover {
	color: var(--nav-hover) !important;
	font-weight: 600;
	text-decoration: none;
}

li.nav-item a.active {
	color: var(--nav-active) !important;
}

ul.dropdown-menu li a.active {
	color: var(--white) !important;
} 


.carousel {
    margin-bottom: 0rem !important;
}



  .carousel-item img {
    width: 100%; /* Makes sure the image scales with the container */
    height: 100%; /*Ensures aspect ratio is maintained */
    
    object-fit: cover; /* Ensures image looks good without stretching */
}

.carousel-item {
    /* max-height: 80vh; Limit maximum height */
    display: flex; /* Ensures images align properly */
    align-items: center; /* Centers the image */
}


/**
 * IMAGE OVERRIDES
 **/
.custom-img {
	border-radius: 25px;
}


/**
 * HEADINGS
 **/
 @media (min-width: 1200px) {
	h2.custom {
		font-size: 18px !important;
		margin-left: 40px;
		margin-right: 40px;
	}
 }

 @media (min-width: 1100px) and (max-width: 1199px){
	h2.custom {
		font-size: 18px !important;
		margin-left: 70px;
		margin-right: 70px;
	}
 }

  @media (max-width: 1099px) {
	h2.custom {
		font-size: 16px !important;
		margin-left: 75px;
		margin-right: 75px;
	}
 }



 @media (min-width: 1200px) {
	h2.featurette-heading {
		font-size: 50px !important;
	}
 }

 @media (min-width: 1100px) and (max-width: 1199px){
	h2.featurette-heading {
		font-size: 45px !important;
	}
 }

  @media (max-width: 1099px) {
	h2.featurette-heading {
		font-size: 40px !important;
	}
 }


 @media (min-width: 1200px) {
	h1.featurette-heading {
		font-size: 50px !important;
	}
 }

 @media (min-width: 1100px) and (max-width: 1199px){
	h1.featurette-heading {
		font-size: 40px !important;
	}
 }

  @media (max-width: 1099px) {
	h1.featurette-heading {
		font-size: 30px !important;
	}
 }


 @media (min-width: 1200px) {
	h3.sponsors {
		font-size: 35px !important;
		color: #ff5800;
		font-weight: 600;
	}
 }

 @media (min-width: 1100px) and (max-width: 1199px){
	h3.sponsors {
		font-size: 30px !important;
		color: #ff5800;
		font-weight: 600;
	}
 }

  @media (max-width: 1099px) {
	h3.sponsors {
		font-size: 25px !important;
		color: #ff5800;
		font-weight: 600;
	}
 }


 @media (min-width: 1200px) {
	.banner-custom {
		font-size: 50px !important;
		color: #ffffff;
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		font-weight: 300;
	}
 }

 @media (min-width: 1100px) and (max-width: 1199px){
	.banner-custom {
		font-size: 45px !important;
		color: #ffffff;
		font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		font-weight: 300;
	}
 }

  @media (max-width: 1099px) {
	.banner-custom {
		font-size: 35px !important;
		color: #ffffff;
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		font-weight: 300;
	}
 }




/**
 * BUTTON COLOR
 **/
 .btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ff5800;
    --bs-btn-border-color: #ff5800;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc4e03;
    --bs-btn-hover-border-color: #ff5800;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ff5800;
    --bs-btn-active-border-color: #ff5800;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc4e03;
    --bs-btn-disabled-border-color: #dc4e03;
    font-size: 1.1rem;
    font-weight: 600;
}


  .btn-green {
	--bs-btn-color: #fff;
	--bs-btn-bg: #2bd100;
	--bs-btn-border-color: #2bd100;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #27ab05;
	--bs-btn-hover-border-color: #2bd100;
	--bs-btn-focus-shadow-rgb: 130,138,145;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #2bd100;
	--bs-btn-active-border-color: #2bd100;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #27ab05;
	--bs-btn-disabled-border-color: #27ab05;
	font-size: 20px;
	font-weight: 600;
  }
 
  .btn-blue {
	--bs-btn-color: #fff;
	--bs-btn-bg: #002bd5;
	--bs-btn-border-color: #002bd5;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #06249c;
	--bs-btn-hover-border-color: #002bd5;
	--bs-btn-focus-shadow-rgb: 130,138,145;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #002bd5;
	--bs-btn-active-border-color: #002bd5;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #06249c;
	--bs-btn-disabled-border-color: #06249c;
	font-size: 20px;
	font-weight: 600;
  }


  .btn-white {
	--bs-btn-color: #ff0009;    
	--bs-btn-bg: #fff; 
	--bs-btn-border-color: #fff;  
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #ab090f; 
	--bs-btn-hover-border-color: #fff;  
	--bs-btn-focus-shadow-rgb: 130,138,145;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #fff;  
	--bs-btn-active-border-color: #fff;   
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #000; 
	--bs-btn-disabled-border-color: #000;
	font-size: 20px;
	font-weight: 600;
  }


  .btn-outline-secondary {
	--bs-btn-color: #6c757d;
	--bs-btn-border-color: #6c757d;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #6c757d;
	--bs-btn-hover-border-color: #6c757d;
	--bs-btn-focus-shadow-rgb: 108,117,125;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #6c757d;
	--bs-btn-active-border-color: #6c757d;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #6c757d;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #6c757d;
	--bs-gradient: none;
  }


/**
 * NUDGES
 **/
 .pt-20 {
	padding-top: 20px;
}

 .pt-30 {
	padding-top: 30px;
}

.pt-40 {
	padding-top: 40px;
}

.pb-20 {
	padding-bottom: 20px;
}

 .pb-30 {
	padding-bottom: 30px;
}

.pt-100 {
	padding-top: 100px;
}

.pt-120 {
	padding-top: 120px;
}

/**
 * PAGE FOOTER
 **/
footer {
	background-color: var(--footer-bg);
	font-family: 'Rubik', sans-serif;
}

footer img.brand-item {
	width: 170px;
}

footer img.inverse {
	/* filter: brightness(0) saturate(100%) invert(100%) sepia(31%) saturate(509%) hue-rotate(204deg) brightness(111%) contrast(101%); */
}

.text-copyright {
	color: #fff;
}

/* footer navigation */
footer ul.footer-nav {
	list-style-type: none;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding: 0;
}

footer ul.footer-nav li {
	line-height: 1.75;
}

footer ul.footer-nav li a {
	color: #999;
	text-decoration: none;
}

footer ul.footer-nav li a:hover {
	color: #fff;
}

/**
 * BREAKPOINTS
 *	xs: 0,
 *	sm: 576px,
 *	md: 768px,
 *	lg: 992px,
 *	xl: 1200px,
 *	xxl: 1400px
 **/

@media (min-width: 576px) {

}


@media (min-width: 768px) {

}


@media (min-width: 992px) {

	.navbar-expand-lg .navbar-nav .nav-link {
	  padding-right: 1rem;
	  padding-left: 1rem;
	}
}


@media (max-width: 992px) {

	.navbar-collapse {
		flex-basis: 100%;
		flex-grow: 1;
		align-items: center;
		background-color: #efefef;
		padding-left: 20px;
		padding-top: 4px;
		padding-bottom: 20px;
	}
}


@media (min-width: 1200px) {

}


@media (min-width: 1400px) {

}