:root {

  /**
   * COLORS
   */

  /* background colors */
  --bg-white: hsla(0, 0%, 100%, 1);
  --bg-light-gray: hsla(240, 1%, 83%, 1);
  --bg-dark-gray: #adadab;
  --bg-navyblack: #2d3847;
  --bg-white: #d3c7bb;

  /* gradient colors */
  --gradient-1: linear-gradient(to top, var(--bg-black) 0%, transparent 40%);
  --gradient-2: radial-gradient(circle at 75% 100%, hsla(79, 100%, 70%, 0.3) 0%, transparent 100%);

  /* text colors */
  --text-white: hsla(0, 0%, 100%, 1);
  --text-light-gray: hsla(240, 1%, 83%, 1);
  --text-black: hsla(0, 0%, 0%, 1);
  --text-navyblack: #2d3847;
  --text-offwhite: #dbd8e3 ;

  /* border colors */
  --border-white: hsla(0, 0%, 100%, 1);
  --border-light-gray: hsla(240, 1%, 83%, 1);
  --border-gainsboro: hsla(220, 13%, 91%, 1);
  --border-eerie-black: hsla(0, 0%, 13%, 1);
  --border-smoky-black: hsla(0, 0%, 6%, 1);

  /* Font Families */
  --main-font: syne;
  --fontFamily-recoleta: 'Shrikhand';

  --radius-pill: 160px;



  body {
  background-color: var(--bg-light-gray);
  /*color: var(--text-navyblack);*/
  font-family: var(--main-font);
  padding: 0;
  margin: 0;
}





/*---------------------------------Header:start---------------------------------------- */



ul {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  background-color: var(--bg-navyblack);
  font-size: 1.2rem;
  position: sticky;
  margin-top: 0;
  display: inline-block;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

}

/*          end                */


/*---------------------------------section one: start---------------------------------------- */


.sectionOneTextBox{
  position: absolute;
  text-align: center;
  z-index: 3;
}


.mainImage {
  width: 25%;
  height: auto;
  position: relative;
  margin-top: 5%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.3;
  border-radius: var(--radius-pill);
}

.mainImage:hover {
  animation-name: fadeIn; 
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  z-index: 4;
}


.mainImage:not(:hover) {
  animation-name: fadeOut; 
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  z-index: 3;
}

.sectionOneTextBox{
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 10%
}

.title {
  color: #000;
  font-family: var(--fontFamily-recoleta);
  font-weight: var(--weight-regular);
  font-size: 3rem;
  text-align: center;
  z-index: 1;
  opacity: 1;
}


@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1;
  }
}



/*---------------------------------section one:end---------------------------------------- */