@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Open+Sans:wght@400;600;700&family=Parisienne&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#000;
}

/* HERO */

.tsb-hero-detail{

  position:relative;

  min-height:620px;

  overflow:hidden;

  display:flex;

  align-items:center;

  padding:145px 5% 55px;

  background:#050505;

  font-family:'Open Sans',sans-serif;
}

/* IMAGE */

.tsb-hero-bg-img{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  animation:tsbZoom 8s ease forwards;
}

/* OVERLAY */

.tsb-overlay{

  position:absolute;

  inset:0;

  z-index:1;

  background:
  linear-gradient(
    90deg,
    rgba(0,0,0,.86) 0%,
    rgba(0,0,0,.66) 34%,
    rgba(0,0,0,.20) 70%,
    rgba(0,0,0,.08) 100%
  );
}

/* CONTENT */

.tsb-hero-content{

  position:relative;

  z-index:5;

  max-width:430px;

  color:#fff;

  animation:tsbFadeLeft .9s ease both;
}

/* HAND TEXT */

.tsb-hand-text{

  font-family:'Parisienne',cursive;

  color:#95CBD8;

  font-size:26px;

  line-height:1;

  margin-bottom:18px;

  transform:rotate(-5deg);

  text-shadow:
  0 0 12px rgba(149,203,216,.4);
}

/* TITLE */

.tsb-hero-content h1{

  margin:0;

  font-family:'Montserrat',sans-serif;

  font-size:
  clamp(42px,4vw,62px);

  line-height:.92;

  font-weight:800;

  letter-spacing:-2px;

  color:#fff;

  text-shadow:
  0 8px 24px rgba(0,0,0,.35);
}

.tsb-hero-content h1 span{

  display:block;

  margin-top:10px;

  font-family:'Parisienne',cursive;

  font-size:
  clamp(34px,3vw,52px);

  line-height:1;

  font-weight:400;

  color:#95CBD8;

  letter-spacing:0;
}

.tsb-hero-content h1 span::after{

  content:"";

  width:72px;

  height:2px;

  background:#95CBD8;

  display:block;

  margin-top:10px;
}

/* TEXT */

.tsb-hero-content p{

  max-width:340px;

  margin-top:20px;

  color:rgba(255,255,255,.92);

  font-size:14px;

  line-height:1.7;
}

/* BUTTON */

.tsb-main-btn{

  margin-top:24px;

  width:220px;

  height:52px;

  border-radius:10px;

  background:#95CBD8;

  color:#fff;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  text-decoration:none;

  font-family:'Montserrat',sans-serif;

  font-size:12px;

  font-weight:800;

  letter-spacing:.5px;

  box-shadow:
  0 16px 34px rgba(149,203,216,.22);

  transition:.35s ease;
}

.tsb-main-btn:hover{

  background:#073556;

  color:#fff;

  transform:translateY(-3px);
}

/* ICONS */

.tsb-hero-icons{

  margin-top:32px;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:20px;

  max-width:350px;
}

.tsb-hero-icons div{

  position:relative;

  color:#fff;
}

.tsb-hero-icons div:not(:last-child)::after{

  content:"";

  position:absolute;

  right:-10px;

  top:15px;

  width:1px;

  height:42px;

  background:
  rgba(149,203,216,.35);
}

.tsb-hero-icons i{

  width:42px;

  height:42px;

  border-radius:50%;

  border:1.5px solid #95CBD8;

  color:#95CBD8;

  display:grid;

  place-items:center;

  font-size:16px;

  margin-bottom:10px;

  background:
  rgba(255,255,255,.04);

  backdrop-filter:blur(8px);
}

.tsb-hero-icons span{

  font-family:'Montserrat',sans-serif;

  font-size:9px;

  line-height:1.6;

  font-weight:700;
}

/* BUBBLE */

.tsb-bubble{

  position:absolute;

  top:145px;

  right:14%;

  z-index:6;

  width:92px;

  height:92px;

  border-radius:50%;

  border:
  2px solid rgba(255,255,255,.7);

  background:
  rgba(255,255,255,.06);

  backdrop-filter:blur(10px);

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  color:#fff;

  animation:tsbFloat 5s ease-in-out infinite;
}

.tsb-bubble i{

  position:absolute;

  top:-10px;

  left:6px;

  width:30px;

  height:30px;

  border-radius:50%;

  background:#95CBD8;

  display:grid;

  place-items:center;

  font-size:13px;
}

.tsb-bubble strong{

  font-family:'Montserrat',sans-serif;

  font-size:17px;
}

.tsb-bubble span{

  font-size:9px;

  line-height:1.25;

  text-align:center;
}

/* PHOTO STRIP */

.tsb-photo-strip{

  position:absolute;

  right:3%;

  top:170px;

  z-index:6;

  width:112px;

  background:#fff;

  padding:7px;

  transform:rotate(11deg);

  box-shadow:
  0 25px 50px rgba(0,0,0,.4);

  animation:tsbStrip 1s ease both;
}

.tsb-photo-strip img{

  width:100%;

  height:88px;

  object-fit:cover;

  display:block;

  margin-bottom:7px;
}

.tsb-photo-strip img:last-child{

  margin-bottom:0;
}

/* DOODLES */

.tsb-doodle{

  position:absolute;

  z-index:7;

  color:#95CBD8;

  font-family:'Parisienne',cursive;

  text-shadow:
  0 0 14px rgba(149,203,216,.5);

  pointer-events:none;
}

.tsb-doodle-1{

  left:28%;

  top:250px;

  font-size:30px;

  transform:rotate(-8deg);
}

.tsb-doodle-2{

  right:4%;

  bottom:95px;

  font-size:34px;

  transform:rotate(18deg);
}

.tsb-doodle-3{

  left:28%;

  bottom:110px;

  font-size:32px;

  transform:rotate(-18deg);
}

/* BOTTOM LINE */

.tsb-bottom-line{

  position:absolute;

  left:0;

  right:0;

  bottom:14px;

  height:8px;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.7),
    transparent
  );

  opacity:.75;
}

.tsb-bottom-line::after{

  content:"";

  position:absolute;

  left:0;

  right:0;

  bottom:-6px;

  height:3px;

  background:#fff;

  opacity:.8;
}

/* ANIMATIONS */

@keyframes tsbZoom{

  from{
    transform:scale(1.08);
  }

  to{
    transform:scale(1);
  }
}

@keyframes tsbFadeLeft{

  from{
    opacity:0;
    transform:translateX(-30px);
  }

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

@keyframes tsbFloat{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }
}

@keyframes tsbStrip{

  from{
    opacity:0;
    transform:rotate(16deg) translateX(40px);
  }

  to{
    opacity:1;
    transform:rotate(11deg) translateX(0);
  }
}

/* RESPONSIVE */

@media(max-width:1100px){

  .tsb-photo-strip,
  .tsb-doodle,
  .tsb-bubble{

    display:none;
  }

  .tsb-hero-detail{

    min-height:590px;

    padding:140px 5% 55px;
  }
}

@media(max-width:768px){

  .tsb-hero-detail{

    min-height:640px;

    padding:110px 22px 40px;

    align-items:flex-end;

    background:#000;
  }

  .tsb-hero-bg-img{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:340px;

    object-fit:cover;

    object-position:center top;
  }

  .tsb-overlay{

    background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.18) 32%,
      rgba(0,0,0,.82) 55%,
      rgba(0,0,0,1) 100%
    );
  }

  .tsb-hero-content{

    max-width:100%;

    margin-top:0;

    position:relative;

    z-index:5;
  }

  .tsb-hand-text{

    font-size:22px;
  }

  .tsb-hero-content h1{

    font-size:38px;

    letter-spacing:-1px;
  }

  .tsb-hero-content h1 span{

    font-size:34px;
  }

  .tsb-hero-content p{

    font-size:13px;

    line-height:1.7;
  }

  .tsb-main-btn{

    width:100%;

    height:50px;
  }

  .tsb-hero-icons{

    gap:14px;
  }

  .tsb-hero-icons span{

    font-size:8px;
  }
}