/*FIELDSET STYLES*/
#set1{background-color: #058a10cb;float: right;margin-top:90px; }
#set2{background-color: #0b38ffcb;float: right;margin-top:0px;}
#set3{background-color: #ff580bcb;float: left;margin-top:0px;}
#set4{background-color: #ff0b71cb;margin-top:40px;}
fieldset{
	width: 10px;
	height: 700px;
	color: #ffffff;
	border-style: solid;
	border-radius:20px;
	border-width:2.5px;
	margin-left:3.5px;	
}
p{color: #ffffff;font-size:25px;}
.title{background-color: #ffffff;color: #000000;}
p.copy{font-size:15px;}


/*IMAGES STYLES*/
	.image-container img:hover {
 	     opacity: 0.9; /* Change the opacity of the image on hover */
  		transform:scale(1.1); /*zoom the image when hover*/ 
	}
	.image-container {
      display: grid;
      grid-template-columns: repeat(4, 3fr);
      grid-gap: 14.8px;
      text-align: center;
      margin-bottom: 20px;
    }
    .image-container img {
      width: 251px;
      height: 150px;
	  transition: opacity 0.3s ease; /* Add a transition effect */
    }
    img{
            width:100%;
            margin:0%
        }
    h2{font-size:50px;
        text-align: center;}

       /*BODY STYLES*/
		body {background-image:url("shades.jpg");
			font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
			background-size:1500px 1000px;		
		}
		html {
			scroll-behavior: smooth;
		  }
		  
	
		/* Navigation bar styles */
		#navigation {
			background-color: #6e0351;
			padding: 10px 20px;
			justify-content: flex-start;
			flex-wrap: wrap;
			font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;				
		}
		header{
		top: 0;
        width: 100%;
        position: fixed;
        z-index: 999; }
		
		#navigation a:link{text-decoration:none;}
		#navigation a:visited{color:none;}
		#navigation a:hover{background-color:#c509b5;color: #ffffff;}
		#navigation a:active{background-color:rgb(255, 1, 120); color:#ffffff;}
		
		.active {
  			background-color: #c509b5;
		}
		.active {
  			color: #000000;
		}
		#navigation ul {
			list-style: none;
			margin-left:100px;
			padding: auto;
			display: flex;
		}
		#navigation li {
			margin-left: 10px;	
		}
		#navigation a {
			font-size: 17px;
  			text-decoration: none;
  			color: white;
  			padding: 10px 23px;
  			border-radius: 3px;
  			border: 2px transparent solid;
  			transition: all 0.4s ease;
		}
		/* LOGO STYLES */
		#logo {
			position: fixed;
  			left: 40px;
  			top: 4.3%;
			width: 70px;
			height: 70px;
			margin-right: 40px;
			transform: translateY(-40%);
		}
		/* FOOTER STYLES */
		footer {
			background-color: #6e0351;
			color: #fff;
			padding: 6px 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
			border-radius:10px;
		}
		/* FOOTER LEFTSIDE STYLES */
		#leftside {
			flex-basis: 25%;
		}
		#leftside h3 {
			font-size: 18px;
			margin-bottom: 10px;
		}
		#leftside ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		#leftside ul li {
			margin-bottom:5px;
		}

		#leftside ul li a {
			color: #fff;
			text-decoration: none;
			transition: color 0.3s ease;
		}
		#leftside ul li a:hover {
			color: #ff4500;
		}
		/* FOOTER CENTER STYLES */
		#center {
			flex-basis: 1%;
			text-align: center;
		}
		#center h3 {
			font-size: 18px;
			margin-bottom: 10px;	
		}
		#center ul li {
			margin-bottom: 5px;
			margin-right: 35px;
		}
		.social img{
			width:50px;
			height:50px;
		}
		.social img:hover{
			transform:scale(1.1); /*zoom the image when hover*/ 
		}
		.social{
			display: flex;
  			justify-content: center;
  			align-items: center;
  			list-style: none;
  			padding: 0;}

		/* FOOTER RIGHT SIDE STYLES */
		#rightside {
			flex-basis: 25%;
			text-align: right;
		}
		#rightside h3 {
			font-size: 18px;
			margin-bottom: 10px;
		}
		#rightside ul {
			list-style: none;
			padding: 0;	
		}
		#rightside ul li {
			margin-bottom: 5px;
		}
		#rightside ul li a {
			color: #fff;
			text-decoration: none;
			transition: color 0.3s ease;
		}
		#rightside ul li a:hover {
			color: #ff4500;
		}

		/* PAGE EDITOR LINK STYLES */
		.pageeditor a {
			color: #0099ff;
			text-decoration: none;
			transition: color 0.3s ease;
			font-size:20px;
			margin-top:30px;
		}

		.pageeditor a:hover {
			color: #2f00ff;
		}
		/* BACK TO TOP LINK STYLES */
		#backtotop a {
			color: #ffef08;
			text-decoration: none;
			float: right;
			font-size:20px;
		}
		#backtotop a:hover{color: #91ff00;}