@charset "utf-8";
/* CSS Document */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header .left,
        .header .right {
            width: 10%;
        }

        .header .middle {
            width: 80%;
            text-align: center;
			border-bottom: 1px solid black;
			padding-bottom: 10px;
        }

        .header .middle ul {
            list-style-type: none;
            display: flex;
            justify-content: space-around;
        }
		/* Styles for the dropdown menu */
        .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;}
		.Title{
			font-size: xx-large;
			text-align-last: center;
			font-weight: bold
		}

		.intro_section{ /*The section where the intro text is on the left side of the page and the corresponding image is on the right side*/
			display:flex;
			justify-content: space-between;
			align-items: center; /* makes the items align at their centre height */
			padding-bottom: 2%;

		}
		.intro{
			display:flex;
			width: 40%;
			justify-content: center;
			align-items: center;
			margin-left: 10% ;
			margin-right: 10% ;
			font-size: x-large;
			text-align: center;
			border: 2px solid black;
    		padding: 10px;
			font-weight: normal
		}
		.image{
			display: flex;
			justify-content: flex-start;
			width: 50%;
			margin-top: 20px;
		}
.image-wide{
			display: flex;
			justify-content: center;
			width: 100%;
			margin-bottom: 20px;
		}
		img{
			max-width: 60%;
			height: auto;
		}


		.accordions {
            display: flex;
    		justify-content: space-between;
    		margin: 0 15%; /* added auto to center */
    		max-width: 90%; /* or any width you prefer */
   			font-size: large;
			padding-top: 10px;
        }

        .accordions .accordion-left,
        .accordions .accordion-right {
            width: 45%;
        }
		
		.accordions details {
        padding: 10px; 
        margin-bottom: 10px;
		}
		
		.accordions details summary {
			
		color: darkblue;
		font-weight: bold;
		}
		.SubHeading{
				font-size: X-Large;
				text-align: center;
				font-weight: bold
			}
		.Red-text{
				color:red;
				font-size: Large;
				text-align: center;
			}
		/* Responsive design with CSS media query for smaller screens */
        @media screen and (max-width: 700px) {
            .header {
                flex-direction: column;
            }

            .header .left,
            .header .right,
            .header .middle {
                width: 100%;
            }

            .header .middle ul {
                flex-direction: column;
                align-items: center;
            }

            .intro_section {
                flex-direction: column;
				text-align: center;
            }

            .intro {
                width: 80%;
                margin-left: 10%;
                margin-right: 10%;
            }
			.image{
				padding-top: 2%;
				display: flex;
    			justify-content: center;
    			align-items: center;
    			width: 100%;
    			height: 100%; /* Added to fill the space vertically */
			}

            .accordions {
                flex-direction: column;
            }

            .accordions .accordion-left,
            .accordions .accordion-right {
                width: 100%;
            }
			.SubHeading{
				font-size: X-Large;
				text-align: center;
				font-weight: bold
			}
			.Red-text{
				color:red;
				font-size: Large;
				text-align: center;
			}