@media only screen and (max-width: 992px) {
  .img.trigger {
    width: 100vw !important;
    padding: 0px;
    margin: auto;
  }
}

@media only screen and (max-width: 768px) {
  .image1 {
    position: static !important;
    margin: auto;
    width: 100vw !important;
  }
  p {
    position: static !important;
    margin: auto;
    text-align: center;
    padding-top: 50px;
  }
}

@media only screen and (max-width: 992px) {
  .shark-name {
    font-family: "Open Sans", sans-serif;
    padding-left: 80px !important;
    padding-right: 20px;
    position: absolute;
    align-items: center !important;
    text-align: center !important;
    color: white;
    font-size: 13px;
  }
}

html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
  overflow-y: auto;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.image {
  background-image: url("./assets/sharkPoster_header_01.jpg");
  height: 1000px;
  max-width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.image1 {
  position: relative;
  width: 50vw;
  top: 100px;
  left: 20px;
  scroll-behavior: smooth;
}

.image1:hover {
  opacity: 0.7;
  transition: 0.5s ease;
}
.wf1 {
  position: relative;
  width: 15vw;
  top: 100px;
  left: 1020px;
}

.wf2 {
  position: relative;
  width: 16vw;
  top: 290px;
}

.wf3 {
  position: relative;
  width: 26vw;
  top: 10px;
  left: 1025px;
}

.line {
  position: absolute;
  left: 5px;
  top: 785px;
  height: 80%;
}
.line1 {
  position: absolute;
  left: 13px;
  top: 1252px;
  height: 300%;
}

/* navbar styles */
.navbar {
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 24px;
}

.navbar .brand-logo {
  width: 60px;
  height: 60px;
}

.navbar .about-button {
  font-size: 14px;
  font-weight: 600;
  color: #4d4949;
  text-decoration: none;
  margin-left: 32px;
  cursor: pointer;
  transition: all 0.2s linear;
}

.navbar .about-button:hover {
  color: #000;
}

.navbar .navbar-right-items img {
  width: 30px;
  height: 30px;
}

/* About us modal UI */
.about-us-modal .modal-header {
  color: #2b3c36;
  background-color: #e1f3fd;
  border-bottom: none;
}

.about-us-modal .modal-body-wrapper {
  background-color: #e1f3fd;
  padding: 0 16px 16px;
}

.about-us-modal .modal-body {
  border: 2px solid #212529;
}

.about-us-modal .modal-body p {
  position: static;
  width: auto;
  font-size: 16px;
  font-family: inherit;
  color: #2b3c36;
  margin-bottom: 8px;
}

@media only screen and (max-width: 768px) {
  .about-us-modal .modal-body p {
    padding-top: 0;
    text-align: left;
  }
}

.about-us-modal .modal-body p:hover {
  opacity: 1;
}

.scroll-text {
  z-index: 1;
}

.home-container {
  position: relative;
  top: 120px;
}

p {
  position: relative;
  top: 120px;
  left: 100px;
  font-size: 2.5rem;
  width: 60vw;
  font-family: "Times New Roman", Times, serif;
  scroll-behavior: smooth;
}

p:hover {
  transition: 0.5s ease;
  opacity: 0.7;
}
.first-page-offset div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.depth-line {
  text-align: center;
  position: fixed;
  bottom: 25vh;
  width: 100%;
  border-bottom: 1px dashed;
  font-weight: 700;
  font-size: 28px;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  color: white;
}

.more-sharks {
  position: fixed;
  bottom: 50%;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  /* transition: visibility .3s ease-in-out; */
}

.feral-logo-section {
  position: fixed;
  bottom: 5%;
  left: 0;
  right: 0;
  text-align: center;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

.feral-logo {
  width: 200px;
}

@media only screen and (max-width: 992px) {
  .feral-logo-section {
    bottom: 25px;
  }
}

#sunlight-zone {
  height: 20000px;
  /* background-color: transparent; */
  background-image: linear-gradient(180deg, #459da9, #153338);
  /* position: absolute; */
  width: 100%;
  /* top: 1130px;  */
}

#twilight-zone {
  /* background-color: #0e0a01; */
  background-image: linear-gradient(180deg, #153338, rgb(0, 0, 0));
  height: 80000px;
  color: white;
  /* position: relative; */
  /* top: 2550px; */
}
.zone {
  font-size: 2rem;
  /* color: white; */
}
#midnight-zone {
  color: white;
  background-color: #0e0a01;
  height: 100500px;
  /* position: relative; */
  /* top: 2550px; */
}

.img {
  position: absolute;
}

.ocean-bottom {
  background: linear-gradient(180deg, #ede5ce, #b5ad9a);
  height: 40vh;
  width: 100%;
}

#depth-bar {
  border-left: 3px solid white;
  margin-left: 40px;
  position: absolute;
  z-index: 10;
}

.zone-container {
  display: flex;
  text-align: center;
  justify-content: center;
}

/* .back-to-top {
  position: fixed;
  scroll-behavior: smooth;
  right: 2rem;
  bottom: 2rem;
  z-index: 10000;
  border-radius: 100%;
  background: #41b3e8;
  padding: 0.5rem;
  border: none;
  cursor: pointer;
  opacity: 100%;
  transition: opacity 1s;
} */

.slow {
  position: absolute;
  scroll-behavior: smooth;
  left: 2rem;
  top: 81000px;
  z-index: 10000;
  border-radius: 100%;
  background: #608799;
  padding: 0.5rem;
  border: none;
  cursor: pointer;
  opacity: 100%;
  transition: opacity 1s;
}
.back-to-top:hover {
  opacity: 60%;
}

.hidden {
  display: none;
  opacity: 0%;
}
.w-6 {
  width: 2.5rem;
  height: 2.5rem;
  color: black;
  scroll-behavior: smooth;
}

.gray-text {
  color: #2b3c36 !important;
}

/* Pop-up */
.name {
  font-family: "Open Sans", sans-serif;
  font-size: larger;
  font-weight: 800;
  color: #2b3c36;
}
.range {
  font-family: "Open Sans", sans-serif;
  font-size: medium;
  font-weight: 800;
  color: #2b3c36;
}
.sci_name {
  font-size: medium;
}
.size {
  font-family: "Open Sans", sans-serif;
  font-size: medium;
  font-weight: 800;
  color: #2b3c36;
}
.hab_hard {
  font-size: 13px;
  padding-top: 3px;
  font-weight: 800;
}
.size_hard {
  font-size: 13px;
  padding-top: 3px;
}
.fun_hard {
  font-size: 13px;
  padding-top: 3px;
  font-weight: 801;
}
.range_hard {
  font-size: 13px;
  padding-top: 3px;
}
.modal-body {
  background-color: #e1f3fd;
  padding: 10px !important;
}

#popUp_modal {
  padding: 0px !important;
}

@media (max-width: 768px) {
  #popUp_modal .btn-close {
    position: relative;
    right: 16px;
  }
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 550px !important;
    margin: 1.75rem auto;
  }
}

#top-button {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 1000;
  border: none;
  outline: none;
  background-color: #124953;
  color: #459da9;
  padding: 20px;
  border-radius: 10px;
  font-size: 18px;
  height: 50px;
  width: 50px;
}
#top-button:hover {
  background-color: #152f33;
}

#up {
  position: absolute;
  top: 0;
  left: 0;
}

.shark-name {
  font-family: "Open Sans", sans-serif;
  position: absolute;
  padding-left: 150px;
  align-items: center;
  text-align: center;
  color: white;
  font-size: 20px;
  z-index: 1050 !important;
}

@media only screen and (max-width: 992px) {
  .shark-name {
    font-family: "Open Sans", sans-serif;
    padding-left: 80px !important;
    padding-right: 20px;
    position: absolute;
    align-items: center !important;
    text-align: center !important;
    color: white;
    font-size: 10px;
  }
}

/* 
.popup {
  color: black;
  position: relative;
  padding: 2%;
  margin-top: 1%;
  border: 1px black;
  border-radius: 20px;
  height: 60vh;
  width: 85%;
  row-gap: 0.5px;
  display: block;
  margin-left: auto;
  margin-right: auto;

  display: grid;
  grid-template-columns: 2% 5% 45% 20.5% 17.5% 4% 0.5% 2% 3.5%;
  grid-template-rows: 2% 40% 2% 8% 8% 4% 12% 4% 18% 2%;
  grid-template-areas:
    "void void void void void void void close void"
    "void void image image image void void void void"
    "void void void void void void void void void"
    "void name name range_hard size_hard size_hard void void void"
    "void sci_name sci_name range size size void void void"
    "void hab_har hab_har hab_har hab_har hab_har void void void"
    "void hab hab hab hab hab void void void"
    "void fun_hard fun_hard fun_hard fun_hard fun_hard void void void"
    "void fun fun fun fun fun void void void"
    "void void void void void void void void void";

  z-index: 100;
}

.void {
  opacity: 0;
}

.close {
  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 2;
  color: #53A5AD;
  height: 25px;
  width: 25px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  vertical-align: center;
  line-height: 25px;
}

.image-popup {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 3;
  justify-content: center;
  display: flex;
  
  
}

.name {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
  border-top: solid 0.5px black;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
  font-weight: bold;
  padding-left: 10px;
  padding-top: 7px;
}

.range_hard {
  padding-top: 7px;
  padding-left: 7px;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
  border-top: solid 0.5px black;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
}

.size_hard {
  padding-top: 7px;
  padding-left: 7px;
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 5;
  border-top: solid 0.5px black;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
}

.sci_name {
  padding-top: 7.5px;
  padding-left: 10px;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
  font-size: small;
  border-bottom: solid 0.5px black;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
}

.range {
  padding-top: 7.5px;
  padding-left: 7px;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 6;
  font-weight: bold;
  border-bottom: solid 0.5px black;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
}

.size {
  padding-top: 7.5px;
  padding-left: 7px;
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row-start: 5;
  grid-row-end: 6;
  font-weight: bold;
  border-bottom: solid 0.5px black;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
}

.hab_hard {
  padding-top: 10px;
  padding-left: 10px;
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 6;
  grid-row-end: 7;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
}

.hab {
  padding-top: 10px;
  padding-left: 10px;
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 7;
  grid-row-end: 8;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
}

.fun_hard {
  padding-top: 5px;
  padding-left: 10px;
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 8;
  grid-row-end: 9;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
}

.fun {
  padding-top: 5px;
  padding-left: 10px;
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 9;
  grid-row-end: 10;
  border-bottom: solid 0.5px black;
  border-left: solid 0.5px black;
  border-right: solid 0.5px black;
}
*/
.photo {
  max-width: 100%;
  max-height: 100%;
  padding: 10px 13px 23px;
  padding-left: 50px;
  display: block;
  height: auto;
}