html {
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  img {
    max-width: 100%;
  }
  
  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat'),
      url('Montserrat-Regular.ttf') format('truetype');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
  }
  
  body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
  }
  
  /* glob */
  
  .list-reset {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .btn-reset {
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }
  
  .flex {
    display: flex;
  }
  
  .container {
    max-width: 1140px;
    padding: 0 15px;
    margin: 0 auto;
  }
  
  .section-offset {
    padding: 90px 0;
  }

  .header {
    background-color: white;
  }

  .header-logo {
    max-width: 70px;
    margin-right: 15px;
    color: black;
  }

  .burger {
    position: absolute;
  }

  .hero-container {
    position: relative;
    z-index: 110;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 110px;
    padding-bottom: 110px;
  }

  .hero-section {
    position: relative;
    min-height: 100vh;
    background-image: url(img/hero.jpg);
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .header-bg {
    position: absolute;
    z-index: 11;
    background-color: rgb(27 27 27 / 51%);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .header-container {
    position: relative;
    z-index: 111;
    flex-direction: column;
    justify-content: space-between;
    color: black;
  }

  .header-top {
    padding: 15px 0;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }

  .header__nav {
    padding: 15px 0 ;
    display: flex;
    align-items: center;
  }

  .nav__list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .nav-item {
    margin-right: 20px;
  }

  .nav-item a {
    color: black;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    transition: color 0.3s ease-in-out;
  }

  .nav-item a:hover {
    color: #de6f5c;
  }

  .hero-title {
    margin: 0;
    margin-bottom: 20px;
    color:white;
    font-size: 136px;
    font-family: "Montserrat";
    font-weight: 400;
  }

  .hero-container span {
    font-size: 22px;
    max-width: 50%;
    margin-bottom: 20px;
    color: white;
  }

 .button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    background-color: white;
    cursor: pointer;
    height: 50px;
    padding: 15px 25px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: black;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
  }

  .button:hover {
    background-color: black;
    color: white;
  }

  .hero-button:hover {
    background-color: #4f0548;
    color: white;
  }

  .section-title {
    margin: 0;
    margin-bottom: 20px;
    color: rgba(0,0,0,1);
    font-size: 48px;
    font-weight: 400;
    text-decoration: none;
    line-height: 130%;
    font-family: "Montserrat", sans-serif;
  }



.order-form {
  padding: 20px;
}

.form-left {
  display: flex;
  flex-direction: column;
}

.form-left a {
  margin-bottom: 20px;
  text-decoration: underline;
  color: black;

}

.form-left a:hover {
  color: #00000099;
}

.order-form-inputs {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.order-form-input {
  width: 100%;
  height: 45px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-form-input input {
  padding: 20px 10px;
  background-color: rgba(244,244,244,1);
  width: 99%;
  height: 30px;
  box-sizing: border-box;
  outline: none;
  border: 1px solid transparent;
}


/* General Section Styling */
#sharkcove-exhibit-section {
  position: relative;
  background: linear-gradient(135deg, #00203F 50%, #ADEFD1 100%);
  color: #FFF;
  padding: 100px 20px;
  overflow: hidden;
}

/* Background Waves */
#sharkcove-exhibit-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

#sharkcove-wave, #sharkcove-wave2 {
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 200%;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.7;
  border-radius: 100%;
  animation: waveAnimation 20s linear infinite;
}

#sharkcove-wave2 {
  bottom: -75px;
  opacity: 0.5;
  animation-duration: 25s;
}

/* Wave Animation */
@keyframes waveAnimation {
  0% {transform: translateX(0);}
  50% {transform: translateX(-50%);}
  100% {transform: translateX(0);}
}

/* Exhibit Content */
#sharkcove-exhibit-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

#sharkcove-exhibit-title {
  font-size: 48px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

#sharkcove-exhibit-description {
  font-size: 20px;
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* Shark Gallery */
#sharkcove-gallery {
  display: flex;
  justify-content: space-around;
  margin-bottom: 50px;
}

#sharkcove-gallery .gallery-item {
  width: 30%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

#sharkcove-gallery .gallery-item img {
  width: 100%;
  display: block;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

#sharkcove-gallery .gallery-item:hover {
  transform: scale(1.05);
}

#sharkcove-gallery .gallery-item:hover img {
  transform: scale(1.1);
}

#sharkcove-gallery .gallery-caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 16px;
}

/* Call to Action Button */
#sharkcove-cta-button {
  text-align: center;
}

#sharkcove-cta-link {
  background: #FF6F61;
  color: #FFF;
  padding: 15px 30px;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 5px;
  transition: background 0.3s ease;
}

#sharkcove-cta-link:hover {
  background: #FF4A3A;
}

/* General Section Styling */
#sharkcove-3d-section {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #001F3F;
  color: #FFF;
  padding: 80px 20px;
  perspective: 1000px;
}

/* 3D Container */
#sharkcove-3d-container {
  display: flex;
  align-items: center;
  gap: 50px;
  transform-style: preserve-3d;
  animation: rotateShark 20s infinite linear;
}

@keyframes rotateShark {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* Shark 3D Model */
#sharkcove-3d-model {
  width: 400px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
}

#sharkcove-shark-image {
  width: 100%;
  height: auto;
  transform: translateZ(100px);
}

/* Shark Info Section */
#sharkcove-shark-info {
  max-width: 400px;
}

#sharkcove-shark-title {
  font-size: 36px;
  margin-bottom: 20px;
}

#sharkcove-shark-description {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* Button Styling */
#sharkcove-learn-more-btn {
  background: #FF851B;
  color: #FFF;
  padding: 15px 25px;
  font-size: 16px;
  text-transform: uppercase;
  border-radius: 50px;
  transition: background 0.3s ease;
}

#sharkcove-learn-more-btn:hover {
  background: #FF6200;
}


/* General Section Styling */
#sharkcove-parallax-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #000d1a;
  color: #FFF;
}

#sharkcove-parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Parallax Layers */
.parallax-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
}

.layer-background {
  
  background-size: cover;
  transform: translateZ(-2px) scale(3);
}

.layer-shark1 {
  transform: translateZ(-1.5px) scale(2);
  top: 20%;
  left: 10%;
}

#sharkcove-shark1 {
  width: 300px;
  height: auto;
}

.layer-shark2 {
  transform: translateZ(-1px) scale(1.5);
  top: 50%;
  left: 70%;
}

#sharkcove-shark2 {
  width: 400px;
  height: auto;
}

.layer-shark3 {
  transform: translateZ(0) scale(1);
  top: 70%;
  left: 30%;
}

#sharkcove-shark3 {
  width: 500px;
  height: auto;
}

/* Info Section */
#sharkcove-parallax-info {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
}

#sharkcove-parallax-title {
  font-size: 36px;
  margin-bottom: 20px;
}

#sharkcove-parallax-description {
  font-size: 18px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}



/* General Section Styling */
#sharkcove-facts-section {
  background-color: #0B3D91;
  padding: 50px 0;
  color: #FFF;
  text-align: center;
}

#sharkcove-facts-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

#sharkcove-facts-title {
  font-size: 36px;
  margin-bottom: 30px;
  animation: fadeIn 1s ease-in-out;
}

/* Carousel Styling */
#sharkcove-facts-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 20px;
}

.fact-item {
  min-width: 300px;
  background: #1E4174;
  padding: 20px;
  border-radius: 8px;
  flex: 0 0 auto;
  scroll-snap-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.5s ease;
}

#sharkcove-fact1 {
  animation: slideIn 0.5s 0.5s forwards;
}

#sharkcove-fact2 {
  animation: slideIn 0.5s 1s forwards;
}

#sharkcove-fact3 {
  animation: slideIn 0.5s 1.5s forwards;
}

.fact-heading {
  font-size: 24px;
  margin-bottom: 15px;
}

.fact-text {
  font-size: 16px;
  line-height: 1.6;
}

/* Carousel Controls */
#sharkcove-carousel-controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.prev-btn, .next-btn {
  background: #1E4174;
  color: #FFF;
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.prev-btn:hover, .next-btn:hover {
  background: #283E72;
}

/* Animations */
@keyframes slideIn {
  0% {
      opacity: 0;
      transform: translateY(50px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* General Section Styling */
#sharkcove-timeline-section {
  background-color: #062C50;
  color: #FFF;
  padding: 50px 0;
  text-align: center;
}

#sharkcove-timeline-title {
  font-size: 40px;
  margin-bottom: 40px;
  text-transform: uppercase;
  animation: fadeInText 1s ease-in-out;
}

/* Timeline Container */
#sharkcove-timeline-container {
  display: grid;
  grid-template-columns: repeat(3, calc((100% - 40px) / 3));
  gap: 20px;
  padding: 20px;
  
}

.timeline-item {
  background: #074372;
  border-radius: 15px;
  flex: 0 0 300px;
  scroll-snap-align: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.timeline-item:hover {
  transform: scale(1.05);
}

.shark-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  filter: brightness(0.7);
  transition: filter 0.3s ease;
}

#sharkcove-shark-img1 {
  background-image: url('img/a5.jpg'); /* Replace with actual image URL */
}

#sharkcove-shark-img2 {
  background-image: url('img/a6.jpg'); /* Replace with actual image URL */
}

#sharkcove-shark-img3 {
  background-image: url('img/a7.jpg'); /* Replace with actual image URL */
}

.timeline-item:hover .shark-img {
  filter: brightness(1);
}

.shark-info {
  padding: 20px;
  text-align: left;
}

.shark-name {
  font-size: 24px;
  margin-bottom: 10px;
}

.shark-desc {
  font-size: 16px;
  line-height: 1.6;
}

/* Animations */
@keyframes fadeInText {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* General Section Styling */
#sharkcove-shark-feeding {
  background-color: #005f73;
  color: #e0f0f1;
  padding: 60px 0;
  text-align: center;
}

#sharkcove-feeding-title {
  font-size: 36px;
  margin-bottom: 40px;
  text-transform: uppercase;
  animation: fadeInTitle 1s ease-in-out;
}

/* Feeding Container Styling */
#sharkcove-feeding-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* Shark Display Styling */
#sharkcove-shark-display {
  position: relative;
  width: 80%;
  max-width: 600px;
  background-color: #003f5c;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#sharkcove-shark-image {
  width: 100%;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

#sharkcove-shark-display:hover #sharkcove-shark-image {
  transform: scale(1.05);
}

#sharkcove-feeding-info {
  margin-top: 20px;
  font-size: 18px;
}

/* Feeding Controls Styling */
#sharkcove-feeding-controls {
  display: flex;
  padding: 10px;
  gap: 15px;
}

.feed-btn {
  background-color: #00bfae;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.feed-btn:hover {
  background-color: #008f8c;
  transform: scale(1.1);
}

/* Animations */
@keyframes fadeInTitle {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}
/* General Section Styling */
#sharkcove-shark-facts {
  background-color: #002F4C;
  color: #AEEEEE;
  padding: 60px 0;
  text-align: center;
}

#sharkcove-carousel-title {
  font-size: 36px;
  margin-bottom: 40px;
  text-transform: uppercase;
  animation: fadeInTitle 1s ease-in-out;
}

/* Carousel Wrapper Styling */
#sharkcove-carousel-wrapper {
  position: relative;
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #003B5C;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Carousel Inner Styling */
#sharkcove-carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  min-width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.fact-text {
  font-size: 20px;
  line-height: 1.5;
  color: #AEEEEE;
}

/* Carousel Control Buttons Styling */
.carousel-control {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  background-color: #004B6C;
  color: #AEEEEE;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.carousel-control:hover {
  background-color: #003B5C;
  transform: scale(1.2);
}

/* Animations */
@keyframes fadeInTitle {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* General Section Styling */
#sharkcove-shark-encounter {
  background-color: #003366;
  color: #E0F7FA;
  padding: 60px 20px;
  text-align: center;
}

#sharkcove-encounter-title {
  font-size: 36px;
  margin-bottom: 30px;
  text-transform: uppercase;
  animation: fadeInTitle 1s ease-in-out;
}

/* Encounter Container Styling */
#sharkcove-encounter-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Shark Info Styling */
#sharkcove-shark-info {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}

/* Shark Areas Styling */
#sharkcove-shark-areas {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.shark-area {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
}

.shark-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.shark-area:hover img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.shark-area:hover .overlay {
  opacity: 1;
}

.shark-area:hover::after {
  content: attr(data-info);
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #E0F7FA;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
}

/* Animations */
@keyframes fadeInTitle {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}


/* General Section Styling */
#sharkcove-behavior-tracker {
  background-color: #004d40;
  color: #E0F7FA;
  padding: 60px 20px;
  text-align: center;
  position: relative;
}

#sharkcove-behavior-title {
  font-size: 36px;
  margin-bottom: 30px;
  text-transform: uppercase;
  animation: fadeInTitle 1s ease-in-out;
}

/* Tracker Container Styling */
#sharkcove-tracker-container {
  position: relative;
  height: 500px;
  overflow: hidden;
}

/* Behavior Item Styling */
.behavior-item {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}




.behavior-content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.behavior-content h3 {
  font-size: 28px;
  margin-bottom: 15px;
  animation: fadeInContent 1s ease-in-out;
}

.behavior-content p {
  font-size: 16px;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
}

/* Scroll Animation */



/* Animations */
@keyframes fadeInTitle {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes fadeInContent {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* General Section Styling */
#sharkcove-mythbusters {
  background-color: #00796b;
  color: #E0F7FA;
  padding: 60px 20px;
  text-align: center;
  position: relative;
}

#sharkcove-mythbusters-title {
  font-size: 36px;
  margin-bottom: 40px;
  text-transform: uppercase;
  animation: fadeInTitle 1s ease-in-out;
}

/* Myth Carousel Styling */
#sharkcove-myth-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 300px;
  border-radius: 10px;
  background-color: #004d40;
  margin: 0 auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.myth-item {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.myth-content {
  text-align: center;
}

.myth-content h3 {
  font-size: 24px;
  margin-bottom: 10px;
  animation: fadeInContent 1s ease-in-out;
}

.myth-content p {
  font-size: 16px;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
}

/* Carousel Controls Styling */
.carousel-controls {
  margin-top: 20px;
}

.carousel-btn {
  background-color: #004d40;
  color: #E0F7FA;
  border: none;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  margin: 0 10px;
  transition: background-color 0.3s ease;
}

.carousel-btn:hover {
  background-color: #00796b;
}

/* Animations */
@keyframes fadeInTitle {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes fadeInContent {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* General Section Styling */
#sharkcove-evolution-timeline {
  background-color: #002f3c;
  color: #e0f7fa;
  padding: 60px 20px;
  text-align: center;
  position: relative;
}

#sharkcove-timeline-title {
  font-size: 36px;
  margin-bottom: 30px;
  text-transform: uppercase;
  animation: fadeInTitle 1s ease-in-out;
}

/* Timeline Container Styling */
#sharkcove-timeline-container {

  display: grid;
  grid-template-columns: repeat(3, calc((100% - 40px) / 3));
  gap: 20px;
  width: 100%;
  padding: 10px 0;
}

.timeline-item {
  display: inline-block;
  
  margin: 0 15px;
  background-color: #004d40;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-item:nth-child(1) {
  animation: fadeInItem 1s ease-in-out 0.2s forwards;
}

.timeline-item:nth-child(2) {
  animation: fadeInItem 1s ease-in-out 0.4s forwards;
}

.timeline-item:nth-child(3) {
  animation: fadeInItem 1s ease-in-out 0.6s forwards;
}

.timeline-item:nth-child(4) {
  animation: fadeInItem 1s ease-in-out 0.8s forwards;
}

.timeline-content h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.timeline-content p {
  font-size: 16px;
  line-height: 1.5;
}

/* Animations */
@keyframes fadeInTitle {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes fadeInItem {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Scroll Bar Styling */
#sharkcove-timeline-container::-webkit-scrollbar {
  height: 8px;
}

#sharkcove-timeline-container::-webkit-scrollbar-thumb {
  background-color: #004d40;
  border-radius: 10px;
}

#sharkcove-timeline-container::-webkit-scrollbar-thumb:hover {
  background-color: #00796b;
}

/* General Section Styling */
#sharkcove-comparison {
  background-color: #00796b;
  color: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

#sharkcove-comparison-title {
  font-size: 36px;
  margin-bottom: 30px;
  text-transform: uppercase;
  animation: fadeInTitle 1s ease-in-out;
}

/* Comparison Container Styling */
#sharkcove-comparison-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
}

.comparison-item {
  background-color: #004d40;
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transform: scale(1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comparison-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}

.comparison-img {
  width: 100%;
  height: auto;
  border-bottom: 2px solid #004d40;
  transition: transform 0.5s ease;
}

.comparison-info h3 {
  font-size: 24px;
  margin-top: 15px;
}

.comparison-info p {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 10px;
}

/* Animations */
@keyframes fadeInTitle {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes fadeInItem {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Hover Effect */
.comparison-item:hover .comparison-img {
  transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  #sharkcove-comparison-container {
      flex-direction: column;
      align-items: center;
  }

  .comparison-item {
      width: 90%;
  }
}

/* General Section Styling */
#sharkcove-dive {
  background-color: #004d40;
  color: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

#sharkcove-dive-title {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#sharkcove-dive-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

#sharkcove-dive-info {
  margin-bottom: 30px;
}

#sharkcove-dive-intro {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 1.6;
}

#sharkcove-dive-button {
  background-color: #009688;
  color: #ffffff;
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#sharkcove-dive-button:hover {
  background-color: #00796b;
}

/* Dive Animation Styling */
#sharkcove-dive-animation {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: linear-gradient(to bottom, #00796b, #004d40);
}

#sharkcove-shark-swim {
  position: absolute;
  width: 100px;
  height: 60px;
  
  background-size: contain;
  animation: swim 10s infinite;
  bottom: 10px;
  left: -100px;
}

@keyframes swim {
  0% {
      transform: translateX(-100px);
  }
  100% {
      transform: translateX(100vw);
  }
}

#sharkcove-bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 10%, transparent 20%);
  opacity: 0.5;
  pointer-events: none;
  animation: bubbles 5s infinite;
}

@keyframes bubbles {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(-100%);
  }
}



  /* Cookie */
#cookie-notification {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11111;
    width: 100%;
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    display: none;
}

#cookie-notification button {
    background: #df7731;
    color: white;
    border-radius: 10px;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

.form-container {
  display: grid;
  grid-template-columns: repeat(2, calc((100% - 50px) / 2));
  gap: 50px;
}

/* Footer Styling */
#sharkcove-footer {
  background-color: #00251a;
  color: #ffffff;
  padding: 40px 20px;
  text-align: center;
  border-top: 2px solid #009688;
}

#sharkcove-footer-links {
  margin-bottom: 20px;
}

#sharkcove-footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  margin: 0 15px;
  transition: color 0.3s ease;
}

#sharkcove-footer-links a:hover {
  color: #00bfae;
}

#sharkcove-footer-location {
  margin-top: 20px;
}

#sharkcove-location-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

#sharkcove-location-address {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.interactive-experience {
  padding: 40px 0;
  background-color: #e0f7fa;
  color: #006064;
  text-align: center;
  position: relative;
}

.interactive-experience .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-content {
  max-width: 600px;
  margin-bottom: 20px;
}

.text-content h2 {
  font-size: 2.5em;
  margin-bottom: 15px;
}

.text-content p {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 25px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1em;
  color: #fff;
  background-color: #00796b;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #004d40;
}

.svg-content {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.wave-svg {
  width: 100px;
  height: auto;
}

.fish-svg {
  width: 100px;
  height: auto;
}


.shark-adventure {
  padding: 60px 20px;
  background-color: #006064;
  color: #ffffff;
  text-align: center;
}

.shark-adventure .container {
  max-width: 800px;
  margin: 0 auto;
}

.shark-adventure h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

.shark-adventure p {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 30px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1.1em;
  color: #ffffff;
  background-color: #009688;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn:hover {
  background-color: #00796b;
  transform: scale(1.05);
}

.svg-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.shark-svg {
  width: 100px;
  height: auto;
  margin: 20px;
  animation: shark-swim 5s infinite linear;
}

.bubbles-svg {
  width: 100px;
  height: auto;
  margin: 20px;
}

@keyframes shark-swim {
  from {
      transform: translateX(-100px);
  }
  to {
      transform: translateX(100px);
  }
}



@media (max-width: 1144px) {

}

@media (max-width: 1024px) {
  .timeline-item {
    padding: 10px;
    margin: 0;
  }

  #sharkcove-timeline-container {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 20px) / 2));
    gap: 20px;
  }

  
}

@media (max-width: 768px) {
  .nav__item a {
    color: white;
  }

  #sharkcove-gallery {
    flex-direction: column;
    gap: 20px;
  }

  .fact-item {
    max-width: 100%;
  }

  #sharkcove-3d-model {
    width: 100%;
    height: auto;
  }

  .shark-area {
    width: 100%;
  }

  #sharkcove-timeline-container {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    gap: 20px;
  }

  #sharkcove-3d-container {
    flex-direction: column;
  }

  #sharkcove-gallery .gallery-item {
    width: 100%;
  }

  .header-top {
    justify-content: space-between;
  }
  
  .header__nav {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    min-width: 250px;
    height: 100vh;
    z-index: 1000;
    padding: 50px;
    box-shadow: 0 0 5px #888;
    background-color: #3c3c3cfc;
    opacity: 0.9;
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(-120%);
    transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  
  .header__nav .nav__list {
    flex-direction: column;
  }
  
  .header__nav .nav__item:not(:last-child) {
    margin-right: 0;
    margin-bottom: 30px;
  }
  
  .header__nav .nav__item-link {
    font-size: 18px;
  }
  
  .header__nav--active {
    visibility: visible;
    transform: none;
  }
  
  .burger {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 13px;
    border-radius: 3px;
    color: black;
  }
  
  .stop-scroll {
    overflow: hidden;
  }
  
  .burger--active .burger__line:nth-child(2) {
    opacity: 0;
  }
  
  .burger--active .burger__line:nth-child(1) {
    top: 50%;
    left: 25%;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
  }
  
  .burger--active .burger__line:nth-child(3) {
    bottom: auto;
    top: 50%;
    left: 25%;
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
  }
  
  .burger__line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background-color: currentColor;
  }
  
  .burger__line:nth-child(1) {
    top: 13px;
  }
  
  .burger__line:nth-child(2) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  
  .burger__line:nth-child(3) {
    bottom: 13px;
  }


.hero-title {
  max-width: 100%;
  font-size: 39px;
}

.hero-descr {
  max-width: 100%;
}

.hero-text {
  width: 100%;
}

.form-container {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  gap: 50px;
}


.hero-container span {
  font-size: 22px;
  max-width: 100%;
  margin-bottom: 20px;
  color: white;
}
}

@media (max-width: 425px) {
  .hero-container {

     max-width: 100%; 

  }

  #sharkcove-footer-links {
    display: flex;
    flex-direction: column;
    gap: 20px ;
  }

  #sharkcove-exhibit-title {
    font-size: 30px;
  }

  .section-title {
    font-size: 22px;
}

.products-name {
  font-size: 57px;
}

.products-descr {
  font-size: 24px;
}

  .form-container {
    border-bottom: 1px solid gray;
}
}