@charset "UTF-8";
/* CSS Document */
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: 'Inter', sans-serif;
}



/* Nav */

.nav {
  position: absolute;
  padding-top: 40px;
  padding-bottom: 40px ;
  padding-left: 5vw;
  padding-right: 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  color: white;
  width: 100%;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;

}

.nav .logo {
  font-size: 1.8rem;
  font-weight: 600;
  margin-left: 5px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
}

.nav .nav-item {
  padding-left: 50px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  color: white
}


.blue-nav {
background-color: #2A386E;
position: relative

}

/* Base styles */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
}


/* Mobile styles */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100px; /* Adjust depending on nav height */
    right: 5vw;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    z-index: 3;
    
    max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  }

  .nav-links.active {
    display: flex;
    max-height: 200px;
  }

  

  .nav .nav-item {
    padding: 10px 0;
    color: #2A386E;
  }

  .nav {
    flex-wrap: wrap;
  }
}



/* Text Styles */


p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: #2A386E
}

a {
  text-decoration: none;
  color: white
}

h2 {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 30px;
  letter-spacing: -0.2px;
  color: #2A386E;

}



 h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #2A386E
}

.bold {
font-weight: 500

}

h5 {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: #2A386E;
  padding: 6px 10px;
  display: inline-block;
  border: 1px solid #2A386E;
  border-radius: 30px;
  color: #2A386E;
}
/* Buttons */

.btn-white {
  padding: 14px 32px;
  background-color: transparent;
  border: 1px solid white;
  color: white;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 30px;
  font-weight: 400;
  transition: all 0.3s ease;
}

.btn-white:hover {
  background-color: white;
  color: #1b1b1b;
}

.btn-blue {
  padding: 14px 32px;
  display: inline-block;
  border: 1px solid #2A386E;
  font-size: 1rem;
  border-radius: 30px;
  color: #2A386E;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-blue:hover {
  background-color: #2A386E;
  color: white;
}

.btn-blue-solid {
  padding: 14px 32px;
  display: inline-block;
  border: 1px solid #2A386E;
  background-color: #2A386E;
  font-size: 1rem;
  border-radius: 30px;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-blue-solid:hover {
  background-color: white;
  color: #2A386E;
  border: 1px solid white;
}




/* Hero Section */
.hero {
  height: 100vh;
  background-image: url('images/header.jpg');
  background-position: 80% center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 0 5%;
}

.hero-content {

position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 60px;
  padding-bottom: 60px;
  
}

.headline {
  position: absolute;
  max-width: 40%;
}

.headline-top {
  top: 15%;
  min-width: 300px

}

.headline-bottom {
  bottom: 20%;
  right: 0;
  min-width: 300px;
}

.bottom-right {
  align-self: flex-end;
  margin-top: 200px;
  position: absolute;
  right: 0;

}

@media (max-width: 800px) {

.headline-bottom {
  bottom: 22%;
}
}




/* Info  */
.info-section {
  padding: 100px 20px;
  text-align: center;
  
}

.gradient {
   background-image: url('images/bg-2.jpg');
   background-size: cover;
  background-position: center;

}

.mid-blue {
  background-color: #DDF1FF
}

.text-content {
  padding-left: 15%;
  padding-right: 15%;
  margin: 0 auto;

}

.info-section .btn-blue {
  margin-top: 40px;
 margin-left: 20px;
 margin-right: 20px
}

.info-section .btn-blue-solid {
  margin-top: 40px
}
.info-section p 
{
  padding-left: 10%;
  padding-right: 10%
}


/* Featured  */

.featured {
  background-color: white;
  padding: 60px 20px;
  text-align: center;
}

.featured-label {

  text-transform: uppercase;
  margin-bottom: 50px;
}

.featured-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-image img {
  width: 350px;
}

.feature-text {
  max-width: 500px;
  text-align: left;
}

.feature-title {
  width: 100%;
  max-width: 400px;
  margin-bottom: 30px;
  display: block;
}

.feature-text p {
  width: 80%;
  margin-bottom: 30px;
}


@media (max-width: 800px) {
  .feature-text {
    text-align: center;
    margin: 0 auto;
  }

  .feature-description {
    width: 100%;
    margin: 0 auto 30px;
  }

  .feature-title {
    margin-left: auto;
    margin-right: auto;
  }

  .btn-blue {
    margin: 0 auto;
  }
}


/* Footer */

.site-footer {
  background-color: #2A386E;
  padding: 80px 10%;
  color: white;
  font-family: 'Inter', sans-serif;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer-logo {
  max-height: 60px;
  height: auto;
  margin-bottom: 20px
}

.footer-text {
  font-size: 10px;
  line-height: 1.5;
  position: relative;
  font-weight: 300;
  
}

.footer-text p {
  color: white
  
}


@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-text {
    text-align: center;
    margin-top: 20px;
  }
}


/* Why Sharks  */

.why-sharks {
  background-color: #E3F3FF;
  padding: 100px 20px;
  text-align: center;
  font-weight: regular;
  
}

.why-title {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 60px;
  display: block;
}

.why-sharks-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px 40px;
  padding-left: 10%;
  padding-right: 10%;
  font-size: 1rem
}

.shark-point {
 max-width: 300px;
 text-align: center;
  margin: 0 auto;
  font-size: 1 rem 
}

.shark-point img {
  width: 80px;
  height: auto;
  margin-bottom: 20px;
}



/* About Section */
.about-section {
  padding: 100px 80px;
  display: flex;
  justify-content: center;
}
.about-container {
  display: flex;
  max-width: 1000px;
  align-items: flex-start;
  gap: 50px;
  flex-wrap: wrap;
}
.profile-img {
  width: 210px;
}
.bio-text {
  max-width: 500px;
  line-height: 1.3;
  margin-top: auto;
  margin-bottom: auto;
}

.about-hero {
  background-image: url('images/about-sharks.jpg'); 
  background-size: cover;
  background-position: 95% 70%;
  height: 56vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-text {
  max-width: 90%;
  width: 530px;
  z-index: 2;
  padding: 30px
}



/* About Responsive */
@media (max-width: 768px) {
  .about-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .bio-text {
    text-align: center;
  }
 
}



/* Mission */
.mission-section {
  background-image: url('images/bg-3.jpg');
  background-size: cover;
  background-position: center;
  padding: 100px 40px;
  text-align: center;
}

.mission-title {
  max-width: 250px;
  margin: 0 auto 30px;
  display: block;
}

.mission-description {
  max-width: 700px;
  margin: 0 auto 60px;
}

.mission-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  background: white;
  padding: 40px;
  border-radius: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.mission-card {
  flex: 1 1 250px;
  max-width: 300px;
}

.icon {
  width: 32px;
  margin-bottom: 12px;
}



@media (max-width: 768px) {
  .mission-cards {
    padding: 30px 20px;
    gap: 24px;
  }
}
/* Shop */

.shop-preview {
  text-align: center;
  padding: 80px 20px;
  background-color: white;
}



.shop-section {

  background-color: white;
  padding: 30px 5vw 30px 5vw 
}

.shop-heading img {
  max-width: 500px;
  width: 100%;
  margin-bottom: 30px;
}


.shop-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding-top: 40px
}

.shop-item {
  max-width: 240px;
  text-align: left
}

.shop-item img {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 16px;
}

.shop-item p {
  font-size: 0.95rem;
  text-align: left


}

.shop-item h5 {
  text-align: left


}





/* Featured Product */
.shop-hero {
  padding: 80px 5vw 0 5vw;
  text-align: center;
}

.shop-hero-heading img {
  max-width: 220px;
  margin-bottom: 20px;
  
}

.shop-hero-heading p {
  max-width: 700px;
  margin: 0 auto 60px auto;
}

.shop-hero-feature {
  background-color: #D0DFF3;
  border-radius: 40px;
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  overflow: hidden; 
}



.shop-hero-image {
  height: 100%;
  display: flex;
  align-items: stretch;
  max-width: 480px;
}

.shop-hero-image img {
  height: 100%;
  width: auto;
  border-radius: 0px;
  object-fit: cover;
  max-width: 480px;
}

.shop-hero-text {
  max-width: 440px;
  padding: 10px 20px 10px 0px;
 
}

.shop-hero .btn-blue {
  margin-top: 10px
}

/* Responsive */
@media (max-width: 810px) {
  .shop-hero-feature {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  .shop-hero-text {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px
  }


  .shop-item {
    max-width: 310px
  }

    .shop-section {
      padding-top:0 
  }
}

/* Contact Page */
.contact-section {
  background-color: #E3F3FF; 
  padding: 120px 20px;
}

.contact-container {
  max-width: 700px;
  margin: 0 20% 0 20%;
  text-align: left;
}

.contact-heading {
  max-width: 250px;
  margin-bottom: 30px;
}

.contact-container p {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.5;
  color: #2A386E;
}

.contact-container a {
  color: #2A386E;
}

.contact-container .btn-blue {
  margin-top: 20px;
}

@media (max-width: 810px) {
  .contact-container {
 text-align: center;
   margin: 0 5% 0 5%;
}
}