header {
		display: flex; justify-content: space-between; align-items: center;
	}
	.dropbtn {
	  background-color: #4169E1;
	  color: white;
	  padding: 16px;
	  font-size: 20px;
	  border: none;
	  margin: 5px;
	}

	.dropdown {
	  position: relative;
	  display: inline-block;
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f1f1f1;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	}

	.dropdown-content a {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	}

	.dropdown-content a:hover {background-color: #ddd;}

	.dropdown:hover .dropdown-content {display: block;}

	.dropdown:hover .dropbtn {background-color: #ffffff; color:#4169E1}

	.slider-container {
	  background: linear-gradient(
		149deg,
		rgb(47, 0, 255) 0%,
		rgb(55, 115, 255) 100%
	  );
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 75%;
	}

	.slider {
	  width: 80%;
	  max-width: 600px;
	  height: 400px;
	  margin: 20px;
	  text-align: center;
	  border-radius: 20px;
	  overflow: hidden;
	  position: relative;
	}

	.slides {
	  display: flex;
	  overflow-x: scroll;
	  position: relative;
	  scroll-behavior: smooth;
	  scroll-snap-type: x mandatory;
	}

	.slide:nth-of-type(even) {
	  background-color: rgb(250, 246, 212);
	}

	.slide {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-shrink: 0;
	  width: 100%;
	  height: 400px;
	  scroll-snap-align: center;
	  margin-right: 0px;
	  box-sizing: border-box;
	  background: white;
	  transform-origin: center center;
	  transform: scale(1);
	}

	.slide__text {
	  font-size: 40px;
	  font-weight: bold;
	  font-family: sans-serif;
	}

	.slide a {
	  background: none;
	  border: none;
	}

	a.slide__prev,
	.slider::before {
	  transform: rotate(135deg);
	  -webkit-transform: rotate(135deg);
	  left: 5%;
	}

	a.slide__next,
	.slider::after {
	  transform: rotate(-45deg);
	  -webkit-transform: rotate(-45deg);
	  right: 5%;
	}

	.slider::before,
	.slider::after,
	.slide__prev,
	.slide__next {
	  position: absolute;
	  top: 48%;
	  width: 35px;
	  height: 35px;
	  border: solid black;
	  border-width: 0 4px 4px 0;
	  padding: 3px;
	  box-sizing: border-box;
	}

	.slider::before,
	.slider::after {
	  content: "";
	  z-index: 1;
	  background: none;
	  pointer-events: none;
	}

	.slider__nav {
	  box-sizing: border-box;
	  position: absolute;
	  bottom: 5%;
	  left: 50%;
	  width: 200px;
	  margin-left: -100px;
	  text-align: center;
	}

	.slider__navlink {
	  display: inline-block;
	  height: 15px;
	  width: 15px;
	  border-radius: 50%;
	  background-color: black;
	  margin: 0 10px 0 10px;
	}
	
	.leftftr {
	  background-color: #4169E1;
	  padding: 20px;
	  float: left;
	  width:30%; /* The width is 20%, by default */
	}
	.ctrftr {
	  background-color: #f1f1f1;
	  padding: 20px;
	  float: left;
	  width: 25%; /* The width is 60%, by default */
	}
	.rightftr {
	  background-color: #4169E1;
	  padding: 20px;
	  float: left;
	  width: 33%; /* The width is 20%, by default */
	}
	/* Use a media query to add a break point at 800px: */
	@media screen and (max-width: 700px) {
	  .leftftr, .ctrftr, .rightftr {
	    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
	    height:auto;
	  }
	}