html,body{
	height: 99%;
	width: 99%;
	background-color: lavender;
}
.banner{
	
	width: 100%;
	height: 500px;
	background-color: rgb(120, 101, 130);
	border: 3px solid #a3c1ad;
	outline: 10px 10px #270f33 groove;
	text-transform: capitalize;
	text-shadow: 1px 1px #270f33 ;
	font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
	text-align: right;
	font-style: oblique;
	overflow: hidden;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center; /* or flex-start/space-around/etc. */
  gap: 20px; /* space between menu items */
}

.menu{
    padding: 10px 0;
	list-style-type: none;
	float:left;
	/*position: relative;*/
	left: 20px;
	background-color: #a3c1ad;
	border-style: none;
	font-family: "Lato", sans-serif;
	font-weight: 400;
  font-style: normal;
  text-align: center;
  font-style: oblique;
	}
.cfu-scroll {
  display: flex;
  overflow-x: auto;
  gap: 1em;
  padding-bottom: 1em;
  scroll-snap-type: x mandatory;
}

.cfu-card {
  flex: 0 0 90%;
  max-width: 600px;
  max-height:600px;
  background: white;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  scroll-snap-align: start;
}

.cfu-card h4 {
  margin-top: 0;
  margin-bottom: 0.5em;
  color: #333;
}

h4 {
  text-align: center;
  margin-bottom: 1em;
}


iframe {
  border: 1px solid #ccc;
  border-radius: 4px;
}

.cfu-content {
  display: none;
  margin-bottom: 20px;
}

.cfu-title {
  cursor: pointer;
  background-color: #eee;
  padding: 10px;
  margin: 0;
  border: 1px solid #ccc;
}

.cfu-title:hover {
  background-color: #ddd;
}

	
	ul{
	    list-style-type: none;
	     margin: 0;
  padding: 0;
  overflow: hidden;
	}
	
	li {
  float: left;
}

	li a {
	    
  display: block;
  text-align: center;
  padding: 6px 8px;
  text-decoration: none;
}
	a:link {
   color: rgb(145, 23, 139);
  
	}
	
	a:visited {
	  color: dimgrey;
	}
	
	a:hover {
	 color: rgb(189, 131, 218)
	}
	
	a:active {
	  color: rgb(92, 195, 255);
	}
.container{
border-color: aliceblue;
border-style: double;
border-width: 2px;
background: linear-gradient(358deg, #ad9fd2, #bee6e6);
background-size: 200% 200%;

animation: AnimationNam
e1 30s ease infinite;
}

@keyframes AnimationName1 {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}