/*
Theme Name: Sea2Sea
Theme URI: https://seatosea.com
Author: Sea2Sea
Description: Custom theme for the Sea2Sea website.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: seatosea
*/

body {
  font-family: "Instrument Sans", sans-serif;
  line-height: 140%;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: -3.5%;
  color: #111111;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 43px;
}

.swiper-slide-active h1,
.swiper-slide-active h2 {
  animation: fadeUp .8s ease forwards;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  line-height: 140%;
}

h1,
h2 {
  font-weight: 600;
  font-size: 42px;
}
h3{
  font-size: 24px;
  font-weight: 600;
}
h4{
  font-size: 20px;
  font-weight: 600;
}
h5{
  font-size: 18px;
  font-weight: 600;
}
h6 {
  font-size: 16px;
  font-weight: 600; 
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
  width: max-content;
  position: relative;
  padding: 11px 24px;
  border-radius: 70px;
  color: #fff;
  background: linear-gradient(93.72deg,
      #00AEEF 5.85%,
      #0A93D8 25.06%,
      #254C9E 76.91%,
      #303188 101.88%);
  cursor: pointer;
  transition: all 0.5s ease;

  .arrow {
    filter: grayscale(1) brightness(0) invert(1);
  }

  &:hover {
    background: #fff;

    background-image: linear-gradient(93.72deg,
        #00AEEF 5.85%,
        #0A93D8 25.06%,
        #254C9E 76.91%,
        #303188 101.88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.5s ease;

    .arrow {
      filter: none;
    }
  }

  &:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 70px;
    background: linear-gradient(93.72deg,
        #00AEEF 5.85%,
        #0A93D8 25.06%,
        #254C9E 76.91%,
        #303188 101.88%);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: all 0.5s ease;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    line-height: 120%;
  }

  h1,
  h2 { 
    font-size: 32px; 
  }

  .container {
    padding: 0 16px;
  }

}