/************************* General *************************/
html{scroll-behavior: smooth;}

*{margin: 0;padding: 0;box-sizing: border-box;}

:root{
  --dark-blue: #24293D;
  --medium-blue: #2F3855;
	--medium-blue-20: #979caa;
	--medium-blue-60: #262d44;
  --light-blue: #8EBBFF;
  --off-white: #F4F4FC;
  --white: #FFFFFF;
  --black: #000000;
	/* --component-tag: 142, 187, 255, 0.3;
	--button-focus: 142, 187, 255, 0.5; */
}


/************************* Heading *************************/
.heading1{font-size: 48px;transition: .5s;font-weight: 600;}
.heading2{font-size: 40px;transition: .5s;font-weight: 600;}
.heading3{font-size: 32px;transition: .5s;font-weight: 600;}
.heading4{font-size: 24px;transition: .5s;}


/************************* Tags *************************/
/* .tag{display: inline-block;justify-content: flex-start;align-items: center;flex-direction: row;margin-top: 8px;width:95%;}
.tag .button{background: rgba(var(--component-tag));color: var(--light-blue);height: 32px;padding: 0 8px;font-size: 13px;margin: 6px 6px 6px 0;border-radius: 4px;cursor:default;outline: 1px solid var(--light-blue);outline-offset: -1px;} */


/************************* Button *************************/
.button{background-color: transparent;border: none;border-radius: 6px;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;z-index: 0;text-transform: capitalize;transition: .5s;}
.button.outlined{border: 1px solid var(--white);color: var(--white);background-color: var(--dark-blue);}
.button.filled{background-color: var(--white);color: var(--dark-blue);}
.button:hover{cursor: pointer;background-color: var(--medium-blue);color: var(--white);border-color: var(--dark-blue);}
.button:focus{outline:1px solid var(--light-blue);outline-offset: -1px;}

#topBtn{display: none;position: fixed;bottom: 7%;right: 5%;z-index: 99;font-size: 14px;border: none;outline: none;background-color: #747474;color: white;cursor: pointer;padding: 12px 18px;border-radius: 50%;}
#topBtn:hover{background-color: #2D2D2D;box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}


/************************* Navigation Bar *************************/
/* navigation bar (General) */
.topnav{overflow: hidden;position: fixed;top: 0;width: 100%;z-index: 99;min-height: 72px;background-color: var(--medium-blue);transition: .5s;}

/* navigation bar links */
.topnav a{height: 95px;background-color: inherit;float: left;display: flex;justify-content: center;align-items: center;color: var(--medium-blue-20);text-align: center;text-decoration: none;}

/* navigation bar links and dropdown button - text color on hover */
.topnav a:hover{color: var(--white);opacity: 1;}

/* navigation bar logo */
.navbarlogo{float: left;margin-left: 24px;margin-top: 0px;opacity: 1;padding: 0;width: 100px;height: 100px;background-image: url("../images/logo/Logo_ColoredBackground.png");background-position: center;background-size: contain;display: flex;}

/* navigation bar item */
.navitems{float: right;margin: 0px 20px 0 0;;}
/* .navitems a{color: var(--white);background-color: var(--medium-blue);} */

/* navigation bar item - active */
.navitems .active{color: var(--light-blue);}

/* navigation bar menu icon - when screen is resized/on small screens */
.topnav .icon{height: 48px;display: none;font-size: 200%;margin: 24px 0 0 5px;padding: 0 8px 3px 10px;color: var(--white);border: 1px solid var(--white);border-radius: 5px;}

/* navigation bar menu icon - when user hover */
.topnav .icon:hover{border: 1px solid var(--light-blue);color: var(--light-blue);}


/************************* Responsive *************************/
@media screen and (max-width: 1920px){
	/* navigation bar: responsive - screen size is less than 1920px */
	.topnav a{padding: 0px 35px;}
}

@media screen and (max-width: 1500px){
	/* navigation bar: responsive - screen size is less than 1500px */
	.topnav a{padding: 0px 25px;}
	.navitems a, .dropdown .dropbtn{font-size:1em;}
}

@media screen and (max-width: 800px){
	/* navigation bar: responsive - screen size is less than 800px: hide all links except for logo and menu icon */
	.navitems a, .dropdown .dropbtn{float: left;display: none;}
	.navbarlogo{float: right;margin-right: 8px;padding: 0;}
	.topnav a.icon{display: block;}
	.navbar-brand{float: right;}
}

@media screen and (max-width: 800px){
	/* navigation bar: "responsive" class is added to the topnav with JavaScript when the user clicks on the icon */
	.topnav.responsive{position: fixed;width: 100%;top: 0;background-color: var(--medium-blue);box-shadow: 10px 10px 32px rgba(36, 41, 61, 0.8);}
	.topnav.responsive a.icon{position: absolute;left: 0;margin: 24px 0 0 25px;}
	.topnav.responsive a{float: none;display: block;text-align: left;}

	.topnav.responsive #nav_contact{margin-bottom: 0px;}
	.topnav.responsive .navitems{margin-top: 32px;}

	.navitems{float: left;padding-top: 72px;}
	.navitems a{height: 64px;}

	/* heading */
	.heading3{font-size: 28px;transition: .5s;}
	.heading4{font-size: 20px;transition: .5s;}
}

@media only screen and (max-width: 550px){
	/* button */
	.button{font-size: 14px;transition: .5s;}
}

@media screen and (max-width: 450px){
	/* navigation bar */
	.topnav{width: 100vw;}
	/* button */
	.button{font-size: 16px;;pointer-events: none;}
}

@media screen and (max-width: 768px) and (max-height: 1024px) {
  .topnav{width: 100vw;}

}

@media screen and (max-width: 768px) and (max-height: 1024px) {
  .topnav.responsive{width: 100vw;}

}