er 
 /*------------------------- Outer container ---------------------*/
body {
    font-family: texgyretermes-regular; /*Arial, sans-serif;*/
    margin: 0;
    padding: 0;
}


/*body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  background-color: #f0f0f0;
}*/


@font-face {
    font-family: 'texgyretermes-regular';
    src: url('CHG/fonts/texgyretermes-regular.otf') format('texgyretermes')/*,
        url('CHG/fonts/texgyretermes-regular.otf') format('texgyretermes')*/;
    font-weight: normal;
    font-style: normal;
    font-size: 14px; /*// Optional styling*/
    }

header, footer {
  background-color: #f4f4f4;
  text-align: center;

 /* padding: 1rem;*/
}

.outercontainer{
    display:grid ;
    flex-direction:row;
    padding: 20px;
    height: 800px;
    max-height: 800px; /* 80% of the viewport height */
    overflow-y: auto;  /* Enable vertical scrolling */
}

.outercontainerEmpty{
  display:none;
  visibility:hidden;
}

.container {
  display: flex; /* Enables Flexbox */
  justify-content: space-between; /* Even spacing between elements */
  /*align-items: center; /* Align items vertically */
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  gap: 10px; /* Adds spacing between items */
  padding: 10px;
  background-color: #FFFFFF;
}

.containerColumn {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center;   /* Center horizontally */
  gap: 5px;             /* Add spacing between items */
  /*padding: 100px;*/         /* Add padding around the container */
  max-width: 300px;      /* Optional: Limit the width of the column */
  margin: 0 auto;        /* Center the container on the page */
}

.containerimg{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px; /* Adjust spacing between items */
}

.artCont {
  display: 'inline-block';    
}


.centerBtns{
  flex: 1 1 auto; /* Flexible width with minimum size */
  align-items: center;
  padding: 2px;
  margin-right: 5px;
  /*background-color: #007bff;*/
  color: white;
  border-radius: 5px;

}

/* Individual item styling */
.item {
  flex: 1 1 auto; /* Flexible width with minimum size */
  text-align: center;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
}

.imageContainer {
    padding: '20px'; 
    font-family: "texgyretermes-regular";
    font-size: '14px';
}

.gallery {
  text-align: center;
  margin-top: 50px;
}

.responsive-image {
  max-width: 100%;
  min-width: 360px;
  max-height: 100%;
  object-fit: fill; /* Ensures proportional resizing */
}

img {
    border-radius: 5px;
    width:'300px';
  }

  p {
      margin-left: 100px;
  }

.dummyButton{
  display: inline-block;
  padding: 10px 20px;
  background-color: #ffffff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
.footerDiv{
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
	align-items: flex-end;
}

.footerImg {
	max-width: 100%; /* Ensures the image scales down to fit the container */
  	height: auto;    /* Maintains the aspect ratio */
}

/* ------------------ Carousel -----------------------

    /* Carousel container */
    .carousel {
      position: relative;
      width: 95vw;
      height:auto;
      margin: 13px auto;
      overflow: hidden;
      border: 2px solid #ddd;
      border-radius: 10px;

    }
	.carousel:hover {
	  cursor: pointer;
	}
    /* Carousel images */
    .carousel-images {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .carousel-images img {
      width: 100%;
      height: auto;
    }

    /* Navigation buttons */
    .carousel-button {
      position: absolute;
      top: 50%;
      /*transform: translateY(-50%);*/
      background-color: white;
      color: rgba(0, 0, 0, 0.5); 
      border: none;
      padding: 10px;
      cursor: pointer;
      border-radius: 50%;
    }

    .carousel-button.left {
      left: 10px;
    }

    .carousel-button.right {
      right: 10px;
    }

    .carousel-button:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
	
	.lowerDiv{
		display: flex;
		flex-direction:row;	
		margin-left: 5.4%;
		align-items:flex-start;   /* Align items Center  */
		  justify-content:center; /*flex-start;*/
	}

	.divColumn {
		  display: flex;
		  flex-direction: column; /* Stack children vertically */
		  align-items:flex-start;   /* Align items Center  */
		  justify-content:center; /*flex-start;*/
			 /* Add spacing between items */
	}

  .divColumnN {
    display: flex;
		  flex-direction: column; /* Stack children vertically */
		  align-items:flex-start;   /* Align items Center  */
		  justify-content:center; /*flex-start;*/
      cursor: pointer;
  }

	.lowerImage{
	  width:25vw;
	  height:auto;
	  margin: 2vh;
	  margin: 2vw
	}

	.pText{
		display: flex;
		flex-direction:row;
		font-family: "texgyretermes-regular";
		font-size: 20px;
		margin-left: 40px;	
		margin-right: auto;	
		white-space: normal;
		text-align: center;
		word-wrap: normal;
    color: rgb(103, 108, 113);
		text-decoration: none;
	}

	.pText1{
		display: flex;
		flex-direction:row;
		font-family: "texgyretermes-regular";
		font-size: 20px;
		margin-top: -0.5vw;
		margin-left: auto;	
		margin-right: auto;	
		white-space: normal;
		text-align: center;
		word-wrap: normal;
    color: rgb(103, 108, 113);
		text-decoration: none;
	}
  .pText1 p:hover{
    color: rgba(118,175,161,1.00);
  }

	.pText2{
		display: flex;
		flex-direction:row;
		font-family: "texgyretermes-regular";
		font-size: 20px;
		margin-top: -0.5vw;
		margin-left: auto;	
		margin-right: auto;	
		text-align: center;
		word-wrap: normal;
    color: rgb(103, 108, 113);
		text-decoration: none;
	}
  .pText2 p:hover{
    color: rgba(118,175,161,1.00);
  }
	.pText3{
		display: flex;
		flex-direction:row;
		font-family: "texgyretermes-regular";
		font-size: 20px;
		margin-top: -0.5vw;
		margin-left: auto;	
		margin-right: auto;	
		text-align: center;
		word-wrap: normal;
    color: rgb(103, 108, 113);
		text-decoration: none;
	}
  .pText3 p:hover{
    color: rgba(118,175,161,1.00);
  }

	.footerDiv{
		display: flex;
		flex-direction:column-reverse;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.footerImg {
		max-width: 100%; /* Ensures the image scales down to fit the container */
		height: auto;    /* Maintains the aspect ratio */
	}

	.pageHeader {
	  margin: 20px;
	  padding-top: 15px;
	  color: mintcream;
	  background-color: #f4f4f4;
	}



	/*-----------------------------------------*/


    /* Responsive adjustments */
    @media (max-width : 1219px ){
      .item {
        flex: 1 1 100%; /* Stack items on smaller screens */
      }
    }