/*------------------------- Outer container ---------------------*/


@font-face {
    font-family: 'Museo_Sans_100';
    src: url("fonts/MuseoSans-100.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-size: 13pt; /*// Optional styling*/
}

body {
    font-family: "Museo_Sans_100", opentype;; 
    margin: 0;
    padding: 0;
}

Css:root {
  --images-per-row: 3; /* Default value */
}

/************** Menu Items ****************/
/*.parentDiv{    
    display:grid; 
    grid-template-columns: auto;
    height: 50px;
    margin-top: 24px;
    margin-top: 0.1vw;*/
    /*margin-bottom: 10px;
    background-color: rgba(233,236,235);*/
    /*background-color: black; transparent;
}

.navDiv{
    display:grid; 
    margin-top: 32px;
    grid-template-columns: auto;
    height: 20px;
    justify-content:baseline;
    position: fixed;
}

.nav {
  font-family: "Museo_Sans_100", opentype;
  color: rgb(103, 108, 113);
  font-size: 0.88rem; 
  font-size: clamp (0.88rem,0.88rem,0.88rem);
  white-space: nowrap;
   z-index: 3001;
}
.nav ul {
  margin-left: 1px; 
  list-style: none;
  display: grid;
  
  margin-top: -60px;
  margin-left: -32px;
	margin-right: 400px;
  justify-content:space-between;
  align-items:end;  
  gap: 5px;                
  z-index: 3002;
}
.nav li {
  height: 7px;
  margin-right: 15px;
  text-decoration: none; 
}
.nav a {                
  color: rgb(103, 108, 113);
  text-decoration: none; 
  z-index: 3002;
}
.nav a:hover {   
    color: rgba(118,175,161,1.00);
    border:none;             
  
  color: rgba(118,175,161,1.00);
  border:none;
  z-index: 3003;
}*/

.pageC{
      margin-top: 0px; /*330px;*/
}

.nav2 {
    position: fixed;
    margin-top: 60px;
    display: grid;
    grid-template-columns: 10fr;
    width: 100%;
    z-index: 1017;
    display: grid;
    justify-content:centre;
    gap: 5px;         
    border: rgba(233,236,235);
}

ul {
    position: fixed;
    list-style: none;
    display: grid;
    width:83%;
    grid-template-columns:  0.5fr 0.5fr 0.6fr 0.7fr 0.5fr 0.7fr;

    justify-content:start;

    gap: 5px;         
    background-color: white; /*rgba(233,236,235);*/
  
    /*    margin-right: 400px;*/
    font-family: "Museo_Sans_100", opentype;
    color: rgb(103, 108, 113);
    font-size: 0.7rem; 
    font-size: clamp (0.8rem,0.8rem,0.8rem);
    white-space: nowrap;
    border: 1px rgb(103, 108, 113);
    z-index: 3002;
}

.ulFont{
  font-size: 0.7rem; 
    font-size: clamp (0.8rem,0.8rem,0.8rem);
}

li {
    border: 2px solid #d3e0e0;   /* Border thickness, style, and color */
    padding: 4px;             /* Space inside the border */
    margin-bottom: 5px;       /* Space between items */
    border-radius: 4px;       /* Optional: rounded corners */
}

/************** Menu Items End****************/
.fillIframe{
  height:70vw;
  overflow-y: scroll;
}

.paintingsContainer{
  margin-top:15px;
  display:grid ;
	grid-template-columns: repeat(var(--images-per-row), 1fr);
  	gap: 10px;
    flex-direction:row;
    height: 70%;
    justify-content:center;
    /*max-height: 800px; /* 80% of the viewport height */
    /* overflow-y: auto;  Enable vertical scrolling */
    /*font-size: 0.8rem; 
    font-size: clamp (0.8rem,0.8rem,0.8rem);*/
    font-size: 1.8rem; 
    font-size: clamp (1.8rem,1.8rem,1.8rem);
    background-color: rgb(255, 255, 255);
     z-index: 3000;
}

header, footer {
  background-color: white; 
  text-align: center;
}

div p {
	text-align: center;    
	top: 15px; 				/* Centers text horizontally */
	line-height: 17px;
}

.parah{
  font-family: 'Museo_Sans_100';
  font-size: 1.1rem;
  font-size: clamp (1.1rem,2rem,2.5rem);
  color: rgb(103, 108, 113);
  padding-top: 5px;
  margin-left: 0.5vw;
}

.parah2{
  font-family: 'Museo_Sans_100';
  font-size: 1.1rem;
  font-size: clamp (1.1rem,2rem,2.5rem);
  color: rgb(103, 108, 113);
  padding-top: 5px;
  padding-left: 30px;
  margin-left: 0.5vw;
}
.container {
  display: flex; /* Enables Flexbox */
  justify-content:center; /*  Even spacing between elements */
  /*align-items: center; /* Align items vertically */
  /*flex-wrap: nowrap;  Allows wrapping on smaller screens */
  gap: 10px; /* Adds spacing between items */
  padding: 10px;
  background-color: #ffffff;
}

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

.artCont {
	display: flex; 
	flex-direction: column;
	align-items:center;     /* Center children horizontally */
  justify-content: center;
	margin: 20px;
	font-family: "Museo_Sans_100", opentype;
	font-size: '1.8rem'; 
}

.artistCont {
	display: flex; 
	flex-direction: column;
	align-items:center;     /* Center children horizontally */
  justify-content:center;
	margin: 20px;
	font-family: "Museo_Sans_100", opentype;
	font-size: '1.8rem'; 
  cursor: pointer;
}

/*artCont replaces containerColumn*/
.containerColumn {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items:start;   /* 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 */
}

/*.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;

}

.divButtons{
  justify-content: center;
}

/*------------------------ Addins -----------------------*/


.caption {
 display:block;
 align-content: center;
 margin-top: 3px; /* Adds spacing between the image and block*/
 font-size: 14px;
 color:'#4D4B58';
 font-family: 'Museo_Sans_100', opentype;
 font-size: '2.0.rem'; 
}

.artistCaption {
  display:block;
  align-content: center;
  margin-top: 3px; /* Adds spacing between the image and block*/
  font-family: "Museo_Sans_100", opentype;
  font-size: '1.8rem'; 
  color: rgb(103, 108, 113);

}
.space {
	height: 10px;
}

.mouseov {
	/*color: #007bff;
	background-color:  #837F98;*/
	background-color: '#B2A1D6';
}

.mouseot {
	/*color: #367E73;
	background-color: #E7F7F5;*/
	background-color: '';
	
}

.divButtons {
	display: inline-block;
	justify-content: center;
}

    /*button.style.fontFamily = "'texgyretermes', cursive"; // Apply the font
    button.style.fontSize = '14px'; // Optional styling(/)
    /* Button styling */

    button {
      padding: 5px 8px; /* Button padding */
      font-size: 14px; /* Font size scales with viewport */
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f4f4f4;
      color: #3B3545;
      cursor: pointer;
      transition: background-color 0.3s ease;
      font-family: 'Museo_Sans_100', sans serif;
	    border-width: 1px;
    }

    /* Button hover effect */
    button:hover {
      background-color:  #38324D; 
      color: rgba(243,246,245,1.00);
      border:none;
    }

/*-------------------------- Addins End ----------------------------*/

/* 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: 'Museo_Sans_100', sans serif;
    font-size: '1.0rem';
}
.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';
    height: auto;
  }
  p {
      margin-left: 100px;
  }

    .backButton{
    margin: 50px;
    padding: 20px 
  }

  .backElement{
    padding:10px;
  }

  .backDiv{
    width:100VW;
    margin: 20px;
    padding: 20px 
  }
  
 .footerDiv{
	display: flex;
	flex-direction:column-reverse;
	justify-content: flex-start;
	align-items: end;
}

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

 .overlay {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
	 	color: rgba(83,79,94,1.00);
        align-items: center;
        z-index: 1000;
      }

      .overlay img {
        max-width: 93%;
        max-height: 93%;
        object-fit: contain;
        /*border: 2px solid white;
        border-radius: 10px;*/
      }

      .overlay-close {
        position: absolute;
        top: 20px;
        right: 20px;
        color: rgb(229, 25, 110);
        font-size: 100px;
        cursor: pointer;
      }

      .overlay.active {
        display: flex;    
        font-family: 'Museo_Sans_100', sans serif;
      }
      
/*-----------------------------------------*/


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

    .lowerImage1{
      width:25vw;
      height:auto;
      margin-top: 2vh;
      margin-left:2vw

    }

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

@media (max-width: 950px) {
	/*header, footer {
		background-color: #f4f4f4; 
	}*/
	
	.footTxt{
	font-family:'Museo_Sans_100', sans serif; 
  font-size: 1.0rem;
	height: 70px;
	font-size: 20px; 
	color: #FFFFFF;  
	background-color: #000000; 
	display: flex; 
	align-content: center; 
	justify-content: center;
	padding:10px;
	width: 100%;
}

/*@media (max-width: 768px) {
	header {
	  background-color: #f4f4f4; 
	}	
}*/
  /*text-align: center;*/
}
@media (max-width: 414px) {
	header{	  
		background-color: #ffffff; 
		margin-bottom: 400px;
	}
	.containerColumn {
		top: 700px;
		display: flex;
		flex-direction: column; /* Stack children vertically */
		align-items: center;    /* Center horizontally */
		gap: 5px;               /* Add spacing between items */
		max-width: 350px;       /* Optional: Limit the width of the column */
		margin: 0 auto;         /* Center the container on the page */
	}
}

@media (max-width: 375px) {
	/*background-color: #f4f4f4;*/
}