:root{
  --black:#001219;
  --darkTeal:#006D77;
  --mediumTeal:#83c1c5;
  --lightTeal:#EDF6F9;
  --peach:#FFDAB9;
  --darkPink: #F08080;
  --mediumPink:#F4978E;
  --lightPink:#F5CAC1;
}

body {
  height: 100vh;
  color: var(--black);
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--lightTeal);
  
}

/* #region Headings */
h1 {
  text-align: center;
  /* size: 100px; */
  font-size: 60px!important;
  /* font: bold; */
  font-family: 'Tiro Devanagari Sanskrit', serif;
}

h3{
  text-align: center;
  margin-top: 15px;
}
h2{
  text-align: center;
  margin-top: 25px;
  font-family: 'Tiro Devanagari Sanskrit', serif;
  font-weight: bold;
}

/* #endregion */

/* #region Blog Cards on Blog Main Page */
.blog-card{
  transition: 0.3s;
  border: #FFDAB9;
  border-radius: 25px;
  border-style:solid;
  border-width: 2.5px;
  padding-bottom: 15px;
  height: 250px;
  max-width: 525px;
}

.blog-card a{
  text-decoration: none;
  color: #001219;
  font-family: 'Tiro Devanagari Sanskrit', serif;
}

.cardHolder{
  text-decoration: none;
  color: #001219;
}

.cardHolder:hover{
  background-color: #ffdab97d;
  border-radius: 25px;
}

#gridContainer{
  padding: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

@media screen and (max-width: 800px) {
  #gridContainer{
    flex-direction:column;
  }
}

.sources-link{
  text-decoration: none;
  color: var(--darkPink);
}

/* #endregion */


#meParagraph {
  text-align: center;
  font-size: 30px;
  margin-bottom: 25px;
  margin-top: 15px;
}

#meParagraph a {
  text-decoration: none;
  font-style: oblique;
  color: var(--mediumPink);
  
}

/* #region index page carousel */
#index-images-container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-height: 70%;
  /* background-color: var(--mediumTeal);  */
}

.index-images{
  width:100%;
  max-height: 630px;
}

.work-title{
  font-size: 20px;
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  /* margin: auto; */
  z-index: -2;
  /* max-height: 200px; */
  /* background-color: var(--mediumTeal); */
}

/* Hide the images by default */
.mySlides {
  display: none;
}

#firstImage{
  display: block;
  
}

/* #endregion */

nav {
  background: var(--darkTeal);
  backdrop-filter: blur(7px);
  height: 70px;
  width: 100%;
}

.logo {
  font-size: 35px;
  font-weight: bold;
  line-height: 80px;
  margin: 0 50px;
  /* max-height: 165px; */
}

#logo {
  width: 110px;
  margin: 0 0 -10px -35px;
}

/* #region Aside List styling */

#aside-list{
  text-align: right;
  margin-right: 35px;
  width: 25%;
  float: right;
  position: fixed;
  z-index: 1;
  right: 0;
  /* background-color: #F8AD9D; */
  overflow-x: hidden;
  padding-top: 25px;
  padding-right: 20px;
}

#aside-label{
  text-align: center;
  text-align: right;
  top: 0;
}

#aside-list ul{
  list-style: none;
  text-align: right;

}

.aside-link{
  margin-top: 15px;
  font-size: 30px;
  /* font-size:x-large; */
}

/* #aside-list ul li{
  margin-top: 15px;
  font-size: 30px;
} */

#aside-list ul li a{
  text-decoration: none;
  color: var(--black);
}

#aside-list ul li a:hover{
  color: var(--mediumPink)!important;
}

/* #aside-list ul li a:hover ~ .photoshoot-description-text{
  opacity:1;
} */
/* #endregion */

/* #region Aside Details styling */

#aside-details{
  text-align: center;
  margin-right: 35px;
  width: 25%;
  float: right;
  height: 90%;
  position: fixed;
  right: 0;
  /* background-color: #F8AD9D; */
  overflow-x: hidden;
  padding-right: 20px;
}

#aside-details-label{
  text-align: center;
}

#aside-details a{
  text-decoration: none;
  color: var(--mediumPink);
}


/* #endregion */

/* #region Rows of Images in grids styling */


.image-row-photoshoot{
  width: 75%;
  align-items:center;
  margin-top: 25px;
  /* padding-top: 55px; */
  /* margin-top: 65px;
  padding-left: 35px;
  padding-bottom: 30px; */
  /* background-color: #F8AD9D; */
}

.image-row-photoshoot img{
  object-fit: contain;
  width: 45%;
  height: 800px;
  
} 

@media screen and (max-width: 1000px) {
  #aside-details{
    display: none;
  }

  .image-row-photoshoot img{
    width: 95%;
  }

  .image-row-photoshoot{
    width: 100%;
  }

  .footer-section{
    display: none;
  }
}



/* #endregion */

/* #region Photography Section */

.photoshoot-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  
}

/* Create four equal columns that sits next to each other */
.photoshoot-column {
  flex: 33%;
  max-width: 33%;
  padding: 15px 15px;
  /* background-color: #F08080; */
}

.photoshoot-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.photoshoot-description-text{
  position: absolute;
  bottom: 0;
  background:rgba(244, 151, 142, 0.5);
  width: 100%;
  height: 100%;
  transition: .7s ease;
  opacity:0;
  color: var(--black);
  font-size: 25px;
  padding: 20px;
  text-align: center;
  align-items: center;
}

.photoshoot-description-text h3{
  margin-top: 65%;
}

.photoshoot-image-container{
  position: relative;
}

.photoshoot-image-container:hover .photoshoot-description-text{
  opacity:1 !important;
}

@media screen and (max-width: 800px) {
  .photoshoot-column {
    flex: 50%;
    max-width: 65%;
    /* z-index: -1; */
  }

  #aside-list {
    display: none;
  
  }
}

@media screen and (max-width: 1000px) {
  .photoshoot-column {
    flex: 100%;
    max-width: 100%;
    /* z-index: -1; */
  }

  #aside-list {
    display: none;
  }

  .exhibitions-row{
    max-width: 100%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .photoshoot-column {
    flex: 100%;
    max-width: 100%;
    /* z-index: -1; */
  }
}
/* #endregion */

#about-section{
  align-items: center;
  padding: 20px;
}

#about-section img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 45%;
}

a.active {
  background: var(--lightPink);
  color: var(--black);
  padding: 10px 30px;
  border-radius: 50px;
  font-weight: bold;
}


/* #region Navigation Styling */
nav ul{
 float: right;
 margin-left: 40px;
}

nav ul li{
  display: inline-block;
  margin-right: 20px;
  margin-top: 10px;
}

nav ul li a{
  font-size: 25px;
  color: var(--black);
  text-decoration: none;
  
}

.burger-button {
  font-size: 30px;
  color: var(--darkPink);
  float: right;
  margin-right: 40px;
  line-height: 80px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

/* Make burger button appear and top navigation disappear when screen width gets too small */
@media (max-width:800px) {
  .burger-button{
    display: block;
  }

  nav ul{
    position:fixed;
    width: 100%;
    background-color: var(--lightTeal);
    height: 100vh;
    text-align: center;
    top: 60px;
    /* right: -110%; */
    transition: all 1s;
    z-index: 5;
    display: none;
    /* visibility: hidden; */
  }

  nav ul li{
    display: block;
    padding: 30px 0;
  }

  nav ul li a {
    font-size: 25px;
    color: var(--black);
    text-transform: uppercase;
    text-decoration: none;
  }

  #check:checked~ul{
    right: 0;
    display: block;
    /* visibility: visible; */
  }

  

}






.animate { transition: transform 0.3s ease-out; }
/* #endregion */





p{
  margin: auto;
  width: 65%;
  margin-top: 15px;
  font-size: 20px;
  margin-bottom: 25px;
  
}


* {box-sizing:border-box}


/* Next & previous buttons */
/* .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

Position the "next button" to the right
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}





.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
} */

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 2.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*#region Design Section */
 .wireframe-images{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-height: 70%;
  margin-bottom: 15px;
 }

/*#endregion */

/*#region Exhibitions Section  */

.exhibitions-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;

}

/* Create four equal columns that sits next to each other */
.exhibitions-column {
  flex: 33%;
  max-width: 33%;
  padding: 10px 10px;
}

.exhibitions-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.exhibition-description-text{
  position: absolute;
  bottom: 0;
  background:rgba(244, 151, 142, 0.5);
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity:0;
  color: var(--black);
  font-size: 25px;
  padding: 20px;
  text-align: center;
  align-items: center;
}

.exhibition-description-text h3{
  margin-top: 65%;
}

.image-container{
  position: relative;
}

.image-container:hover .exhibition-description-text{
  opacity:1;
}

@media screen and (max-width: 800px) {
  .exhibitions-column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .exhibitions-column {
    flex: 100%;
    max-width: 100%;
  }
}

.quuerantine-images{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: fit-content;
  /* max-height: 20%; */
  margin-bottom: 15px;
}

/*#endregion  */

/* #region footer */
footer{
  background-color: var(--mediumTeal);
  height: fit-content;
  padding-bottom: 15px;
  display: grid;
  /* grid-template-columns: 25fr 25fr 25fr 25fr ; */
  grid-template-columns: 33fr 33fr 33fr;
  bottom: 0vh;
  /* position: fixed; */
  width: 100%;
  /* flex-direction: column; */
}

.footer-section{
  /* width: fit-content; */
  /* background-color: #006D77; */
  align-content: center;
  align-items: center;
}

.footer-section p{
  text-align: flex-start;
  text-emphasis: bold;
  /* float: center; */
  color: var(--darkTeal);
}

.footer-section a{
  text-decoration: none;
  color: var(--black);
  float: center;
  margin-left: 10px;
}

.footer-section a:hover{
  color: var(--darkPink);
}

/* #endregion */

.fade{
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from{
    opacity:0;
  }to{
    opacity:1
  }
}