@charset "utf-8";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'system-ui;
  line-height: 1.6;
}

img {
 
  display: block;
	object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
	text-align:center;
	
}

h1,
h2,
h3,
p {
	margin: 0;
	padding-bottom:1rem;
}

section {
  padding: 7em 0;
}

.containerM {
  width: 85%;
  max-width: 65em;
  margin: 0 auto;
	
}


.spacing > * + * {
  margin-top: var(--spacer, 2rem);
}

.btn {
  display: inline-block;
	align:center;
  text-decoration: none;
  color: var(--clr-text, black);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.125rem;
  padding: .5em 1.25em;
  background: var(--clr-accent, #fbaf5d);
  border-radius: .25em;
  -webkit-transition: opacity 250ms linear, -webkit-transform 250ms ease-in-out;
  transition: opacity 250ms linear, -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, opacity 250ms linear;
  transition: transform 250ms ease-in-out, opacity 250ms linear, -webkit-transform 250ms ease-in-out;
}

.btn:hover,
.btn:focus {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  opacity: .9;
}

.primary-title {
  font-size: 4rem;
  font-size: clamp(3rem, calc(5vw + 1rem), 4.5rem);
  line-height: 1;
  text-transform: uppercase;
	color:white;
}

.section-title {
  text-align: center;
  font-size: clamp(2.5rem, calc(5vw + 1rem), 4rem);
  line-height: 1;
  color: #17353d;
  margin-bottom: 5rem;
}

.hero {
  color: white;
  text-align: center;
  padding: 5em 0;
	background-color:darkblue;
  background-image: url("../img/blue.png");
}

.text1{
color:black;
text-align: justify;
  padding-top: 1rem;
	padding-left:1rem;
	padding-right:1rem;
	font-size: 1.5rem;
  line-height: 1;
}

.text2{
color:black;
text-align: justify;
  padding-top: 1rem;
	padding-left:3rem;
	padding-right:1rem;
	font-size: 1.5rem;
  line-height: 1;
}

 a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: black;
 }

.box{
	border-width;3px;
	border-style:solid;
	border-color:darkblue;
	padding:1em;
	background-color:lightsteelblue;
}

.box1{
	border-width;3px;
	border-style:solid;
	border-color:yellowgreen;
	padding:1em;
	background-color:lightgoldenrodyellow;
	text-align: center;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
	text-align:center;
}
/* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  left: -80px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#B2T {
  top: 2020px;
  background-color: cadetblue; 
}

#contact {
  top: 2100px;
  background-color: coral;
}


#B2T2 {
  top: 5320px;
  background-color: cadetblue; 
}

#contact2 {
  top: 5400px;
  background-color: coral;
}

#B2T3 {
  top: 8020px;
  background-color: cadetblue; 
}

#contact3 {
  top: 8100px;
  background-color: coral;
}

#B2T4 {
  top: 11020px;
  background-color: cadetblue; 
}

#contact4 {
  top: 11100px;
  background-color: coral;
}


#B2T5 {
  top: 14020px;
  background-color: cadetblue; 
}

#contact5 {
  top: 14100px;
  background-color: coral;
}

#B2T6 {
  top: 16020px;
  background-color: cadetblue; 
}

#contact6 {
  top: 16100px;
  background-color: coral;
}


/*   IGNORE BELOW
Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.containerC {
  border-radius: 5px;
  background-color: lightblue;
  padding: 20px;
}