/* screen - index-desktop */

.index-desktop {
  align-items: center;
  background-color: var(--cultured-pearl);
  display: flex;
  flex-direction: column;
  min-width: 1280px;
  position: relative;
}

.index-desktop .navbar {
  align-items: center;
  align-self: stretch;
  background-color: var(--pink-swan);
  display: flex;
  height: 105px;
  justify-content: space-around;
  padding: 20px 50px;
  position: relative;
  width: 100%;
}

.index-desktop .headernav {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 30px;
  margin-bottom: -3.07px;
  margin-left: -8.00px;
  margin-right: -8.00px;
  margin-top: -3.07px;
  position: relative;
}

.index-desktop .links {
  align-items: center;
  border-radius: 20px;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: 51px;
  justify-content: center;
  position: relative;
}

.index-desktop .text {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
}

.index-desktop .frame-10 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 12px;
  position: relative;
}

.index-desktop .link {
  cursor: pointer;
  height: 21px;
  position: relative;
  width: 90px;
}

.index-desktop .about {
  cursor: pointer;
  left: 0;
  letter-spacing: -0.16px;
  line-height: 20.8px;
  position: absolute;
  top: -1px;
  transition: all 0.2s ease;
  width: 90px;
}

.index-desktop .about:hover {
  color: #242424
}

.index-desktop .listen {
  cursor: pointer;
  left: 0;
  letter-spacing: -0.16px;
  line-height: 20.8px;
  position: absolute;
  top: -1px;
  transition: all 0.2s ease;
  width: 90px;
}

.index-desktop .listen:hover {
  color: #242424
}

.index-desktop .watch {
  cursor: pointer;
  left: 0;
  letter-spacing: -0.16px;
  line-height: 20.8px;
  position: absolute;
  top: -1px;
  transition: all 0.2s ease;
  width: 90px;
}

.index-desktop .watch:hover {
  color: #242424
}

.index-desktop .place {
  cursor: pointer;
  left: 0;
  letter-spacing: -0.16px;
  line-height: 20.8px;
  position: absolute;
  top: -1px;
  transition: all 0.2s ease;
  width: 90px;
}

.index-desktop .place:hover {
  color: #242424
}

.index-desktop .project-card {
  align-items: center;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0px 0px 30px;
  position: relative;
  width: 370px;
}

.index-desktop .navigation-menu {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: flex-end;
  position: relative;
}

.index-desktop .instagram:hover {
  color: #242424
}

.index-desktop .layer_1:hover {
  color: #242424
}

.index-desktop .layer_1-1:hover {
  color: #242424
}

.index-desktop .component-3:hover {
  color: #242424
}

.index-desktop .hero-section {
  align-items: center;
  align-self: stretch;
  background-color: var(--pink-swan);
  display: flex;
  gap: 101px;
  height: 737px;
  justify-content: space-around;
  padding: 120px 55px;
  position: relative;
  width: 100%;
}

.index-desktop .trovaire_header_narrow-1 {
  height: 737px;
  left: 157px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 967px;
}

.index-desktop .header {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 40px;
  position: relative;
}

.index-desktop .header-1 {
  gap: 20px;
  width: 605px;
}

.index-desktop .new-release-lp-the-stonefruit-sessions {
  align-self: stretch;
  letter-spacing: -0.80px;
  line-height: 41.6px;
  margin-top: -1.00px;
  position: relative;
}

.index-desktop .produced-by-trovaire {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
}

.index-desktop .ct-as {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 18px;
  position: relative;
}

.index-desktop .buy-vinyl:hover {
  transform: scale(0.97); 
}

.index-desktop .label {
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index-desktop .listen-now {
  align-items: center;
  border-radius: 20px;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px 16px 85px;
  width: 113px;
}

.index-desktop .label-1 {
  letter-spacing: 0;
  line-height: 24px;
  margin-left: -56.50px;
  margin-right: -56.50px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index-desktop .link-1 {
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  height: 60px;
  justify-content: center;
  padding: 16px 0px;
  position: relative;
  transition: all 0.3s ease;
  width: 62px;
}

.index-desktop .link-1:hover {
  transform: scale(0.97); 
}

.index-desktop .rocket-launch {
  height: 20px;
  position: relative;
  width: 20px;
}

.index-desktop .headline-subhead {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  position: relative;
  width: 948px;
}

.index-desktop .tenterfield-nsw-au {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.index-desktop .listen-1 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--cultured-pearl);
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  padding: 120px 55px;
  width: 100%;
}

.index-desktop .headline-subhead-1 {
  align-items: center;
  gap: 4px;
}

.index-desktop .title {
  color: var(--black);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index-desktop .cards-row {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 30px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.index-desktop .spotify-badge {
  cursor: pointer;
  height: 66px;
  position: relative;
  width: 202px;
}

.index-desktop .link-2 {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 66px;
  justify-content: center;
  position: relative;
  width: 210px;
}

.index-desktop .youtube-badge {
  background-color: var(--neutral-colorswhite);
  border: 1px solid;
  border-color: var(--neutral-colors600);
  height: 66px;
  width: 201.47px;
}

.index-desktop .watch-1 {
  cursor: pointer;
  height: 512px;
  object-fit: cover;
  position: relative;
  width: 1280px;
}

.index-desktop .contact {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--neutral---zircon);
  display: flex;
  flex: 0 0 auto;
  gap: 60px;
  justify-content: center;
  padding: 60px 55px;
  position: relative;
  width: 100%;
}

.index-desktop .contact-form {
  align-items: center;
  background-color: var(--neutral-colorswhite);
  border: 1px solid;
  border-color: #e2e2e2;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 29px;
  justify-content: flex-end;
  padding: 33px 60px;
}

.index-desktop .header-2 {
  align-self: stretch;
  gap: 40px;
  width: 100%;
}

.index-desktop .headline-subhead-2 {
  align-items: flex-start;
  gap: 10px;
}

.index-desktop .join-our-mailing-list {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index-desktop .friends-and-follower {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.index-desktop .sign-up {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 40px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.index-desktop .buy-vinyl-1:hover {
  transform: scale(0.97); 
}

.index-desktop .connect-with-us {
  color: var(--neutral---mine-shaft);
  font-weight: 600;
  line-height: 27.3px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index-desktop .frame-17 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 30px;
  position: relative;
  width: 235px;
}

.index-desktop .image-4 {
  align-self: stretch;
  height: 27px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.index-desktop .footer {
  align-items: center;
  align-self: stretch;
  background-color: var(--neutral---mine-shaft);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 24px 60px;
  position: relative;
  width: 100%;
}

.index-desktop .x2023-anima-landing-page-ui-kit {
  letter-spacing: 0;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index-desktop .social-links {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
}

.index-desktop .contact-1 {
  display: flex;
  position: relative;
}

.index-desktop .header-3 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.index-desktop .headline-subhead-3 {
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.index-desktop .listen-2 {
  display: flex;
  position: relative;
}
/* screen - index-mobile-all-breakpoints */

.index-mobile-all-breakpoints {
  align-items: center;
  background-color: var(--nobel);
  display: flex;
  flex-direction: column;
  min-width: 375px;
  position: relative;
}

.index-mobile-all-breakpoints .navbar-1 {
  align-self: stretch;
  height: 77px;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .hero-section-1 {
  background-color: var(--nobel);
  gap: 101px;
  height: 393px;
  justify-content: space-around;
  padding: 120px 55px;
}

.index-mobile-all-breakpoints .trovaire_header_narrow5-1 {
  height: 417px;
  margin-bottom: -132.00px;
  margin-left: -141.00px;
  margin-right: -141.00px;
  margin-top: -132.00px;
  object-fit: cover;
  position: relative;
  width: 547px;
}

.index-mobile-all-breakpoints .hero-section-2 {
  background-color: var(--neutral-colorswhite);
  flex-direction: column;
  height: 593px;
  justify-content: center;
  padding: 37px 19px;
}

.index-mobile-all-breakpoints .header-3 {
  align-items: center;
  align-self: stretch;
  gap: 21px;
  height: 319px;
  width: 100%;
}

.index-mobile-all-breakpoints .header-4 {
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 20px;
  width: 301px;
}

.index-mobile-all-breakpoints .new-release-lp-the-stonefruit-sessions-1 {
  align-self: stretch;
  letter-spacing: -0.40px;
  line-height: 26.0px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index-mobile-all-breakpoints .produced-by-trovaire-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.index-mobile-all-breakpoints .ct-as-1 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.index-mobile-all-breakpoints .button {
  align-items: center;
  background-color: var(--masala);
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px;
  position: relative;
  transition: all 0.3s ease;
}

.index-mobile-all-breakpoints .button:hover {
  transform: scale(0.97); 
}

.index-mobile-all-breakpoints .label-2 {
  position: relative;
  width: fit-content;
}

.index-mobile-all-breakpoints .button-1 {
  border-radius: 20px;
  height: 18px;
  position: relative;
  width: 113px;
}

.index-mobile-all-breakpoints .label-3 {
  left: 11px;
  position: absolute;
  top: -4px;
}

.index-mobile-all-breakpoints .frame-8 {
  gap: 7px;
  height: 18px;
}

.index-mobile-all-breakpoints .link-4 {
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  height: 60px;
  justify-content: center;
  margin-bottom: -21.00px;
  margin-top: -21.00px;
  padding: 16px 0px;
  position: relative;
  transition: all 0.3s ease;
  width: 62px;
}

.index-mobile-all-breakpoints .link-4:hover {
  transform: scale(0.97); 
}

.index-mobile-all-breakpoints .rocket-launch-3 {
  height: 50px;
  margin-bottom: -11.00px;
  margin-top: -11.00px;
  position: relative;
  width: 50px;
}

.index-mobile-all-breakpoints .rocket-launch-2 {
  height: 20px;
  position: relative;
  width: 20px;
}

.index-mobile-all-breakpoints .itunes-1 {
  height: 50px;
  left: 5px;
  position: absolute;
  top: 5px;
  width: 50px;
}

.index-mobile-all-breakpoints .yt-music-icon-2 {
  height: 50px;
  left: 6px;
  position: absolute;
  top: 5px;
  width: 50px;
}

.index-mobile-all-breakpoints .about-2 {
  align-items: center;
  align-self: stretch;
  background-image: url(../img/about-1.svg);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  padding: 56px 20px;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .headline-subhead-3 {
  align-items: center;
  flex: 0 0 auto;
  gap: 20px;
}

.index-mobile-all-breakpoints .about-trovaire-1 {
  letter-spacing: -0.64px;
  line-height: 41.6px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index-mobile-all-breakpoints .tenterfield-nsw-au-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.index-mobile-all-breakpoints .listen-2 {
  align-items: center;
  align-self: stretch;
  background-color: var(--cultured-pearl);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  padding: 60px 55px;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .headline-subhead-4 {
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
}

.index-mobile-all-breakpoints .title-1 {
  color: var(--black);
  font-weight: 700;
  line-height: 49.4px;
  margin-left: -8.50px;
  margin-right: -8.50px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index-mobile-all-breakpoints .find-and-follow-us-o-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.index-mobile-all-breakpoints .frame-6 {
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
}

.index-mobile-all-breakpoints .spotify-badge-1 {
  cursor: pointer;
  height: 66px;
  position: relative;
  width: 202px;
}

.index-mobile-all-breakpoints .member-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 66px;
  justify-content: center;
  position: relative;
  width: 210px;
}

.index-mobile-all-breakpoints .apple-music-badge-1 {
  cursor: pointer;
  height: 66px;
  position: relative;
  width: 204px;
}

.index-mobile-all-breakpoints .youtube-badge-1 {
  background-color: var(--neutral-colorswhite);
  border: 1px solid;
  border-color: var(--neutral-colors600);
  cursor: pointer;
  height: 66px;
  position: relative;
  width: 201.47px;
}

.index-mobile-all-breakpoints .flex-col-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  left: 64px;
  min-height: 39px;
  position: absolute;
  top: 15px;
  width: 120px;
}

.index-mobile-all-breakpoints .cta-1 {
  height: 10px;
  margin-left: 5.0px;
  width: 54px;
}

.index-mobile-all-breakpoints .image-3-1 {
  height: 26px;
  object-fit: cover;
  width: 120px;
}

.index-mobile-all-breakpoints .yt-music-icon-3 {
  height: 41px;
  left: 15px;
  position: absolute;
  top: 13px;
  width: 41px;
}

.index-mobile-all-breakpoints .watch-2 {
  cursor: pointer;
  height: 209px;
  position: relative;
  width: 375px;
}

.index-mobile-all-breakpoints .contact-1 {
  align-items: center;
  align-self: stretch;
  background-color: var(--cultured-pearl);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  padding: 30px;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .contact-form-1 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--neutral-colorswhite);
  border: 1px solid;
  border-color: var(--cta---aqua-squeeze);
  border-radius: 20px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .header-5 {
  align-items: flex-start;
  align-self: stretch;
  gap: 40px;
  height: 164px;
  width: 100%;
}

.index-mobile-all-breakpoints .header-6 {
  align-items: flex-start;
  align-self: stretch;
  flex: 0 0 auto;
  gap: 15px;
  margin-bottom: -55.00px;
  width: 100%;
}

.index-mobile-all-breakpoints .headline-subhead-5 {
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 10px;
}

.index-mobile-all-breakpoints .join-our-mailing-list-1 {
  align-self: stretch;
  letter-spacing: -0.40px;
  line-height: 26.0px;
  margin-top: -1.00px;
  position: relative;
}

.index-mobile-all-breakpoints .friends-and-follower-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
}

.index-mobile-all-breakpoints .contact-details-2 {
  align-self: stretch;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .buy-vinyl-2 {
  align-items: center;
  background-color: var(--masala);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px;
  position: relative;
  transition: all 0.3s ease;
}

.index-mobile-all-breakpoints .buy-vinyl-2:hover {
  transform: scale(0.97); 
}

.index-mobile-all-breakpoints .headline-subhead-6 {
  align-items: flex-start;
  gap: 10px;
  height: 10px;
}

.index-mobile-all-breakpoints .connect-with-us-1 {
  align-self: stretch;
  letter-spacing: -0.40px;
  line-height: 26.0px;
  margin-bottom: -15.00px;
  margin-top: -1.00px;
  position: relative;
}

.index-mobile-all-breakpoints .frame-17-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 30px;
  position: relative;
  width: 235px;
}

.index-mobile-all-breakpoints .image-4-1 {
  align-self: stretch;
  height: 27px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .footer-1 {
  align-self: stretch;
  background-color: var(--neutral---mine-shaft);
  height: 63px;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .social-links-1 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 113px;
  position: relative;
  top: 12px;
  width: 150px;
}

.index-mobile-all-breakpoints .instagram-frame {
  align-self: stretch;
  cursor: pointer;
  position: relative;
  width: 29px;
}

.index-mobile-all-breakpoints .spotify-frame {
  align-self: stretch;
  cursor: pointer;
  flex: 1;
  flex-grow: 1;
  position: relative;
}

.index-mobile-all-breakpoints .apple-music-frame {
  align-self: stretch;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
}

.index-mobile-all-breakpoints .youtube-frame {
  align-self: stretch;
  cursor: pointer;
  flex: 1;
  flex-grow: 1;
  position: relative;
  transition: all 0.2s ease;
}

.index-mobile-all-breakpoints .youtube-frame:hover {
  background-color: #1f1f1f
}

.index-mobile-all-breakpoints .frame {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.index-mobile-all-breakpoints .header {
  display: flex;
  flex-direction: column;
  position: relative;
}

.index-mobile-all-breakpoints .headline-subhead {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .hero-section {
  align-items: center;
  align-self: stretch;
  display: flex;
  position: relative;
  width: 100%;
}

.index-mobile-all-breakpoints .label {
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
}
/* screen - index-tablet */

.index-tablet {
  align-items: center;
  background-color: var(--pink-swan);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 780px;
  overflow: hidden;
  position: relative;
}

.index-tablet .navbar-2 {
  background-color: var(--pink-swan);
  height: 76px;
  margin-left: -25.00px;
  margin-right: -25.00px;
  position: relative;
  width: 830px;
}

.index-tablet .cards-row-1 {
  align-items: flex-start;
  gap: 1px;
  left: 50px;
  min-width: 730px;
  top: 20px;
}

.index-tablet .project-card-2 {
  border-radius: 20px;
  cursor: pointer;
  height: 71px;
  transition: all 0.3s ease;
  width: 246px;
}

.index-tablet .project-card-2:hover {
  transform: scale(0.97); 
}

.index-tablet .project-card-3 {
  height: 71px;
  position: relative;
  width: 246px;
}

.index-tablet .hero-section-3 {
  align-items: center;
  align-self: stretch;
  background-color: var(--pink-swan);
  display: flex;
  gap: 101px;
  height: 503px;
  justify-content: space-around;
  padding: 120px 55px;
  position: relative;
  width: 100%;
}

.index-tablet .trovaire_header_narrow-1-1 {
  height: 503px;
  margin-bottom: -120.00px;
  margin-top: -120.00px;
  object-fit: cover;
  position: relative;
  width: 659.82px;
}

.index-tablet .highlighted-cta {
  align-items: center;
  align-self: stretch;
  background-color: var(--neutral-colorswhite);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  padding: 17px 32px 100px;
  position: relative;
  width: 100%;
}

.index-tablet .social-links-2 {
  background-color: var(--pink-swan);
}

.index-tablet .frame-1 {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.index-tablet .instagram-frame-1 {
  width: 29px;
}

.index-tablet .x-frame {
  cursor: pointer;
  height: 40px;
  position: relative;
  width: 48px;
}

.index-tablet .apple {
  cursor: pointer;
  height: 40px;
  position: relative;
  width: 37px;
}

.index-tablet .frame-5 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 10px;
  position: relative;
  width: 566px;
}

.index-tablet .header-8 {
  gap: 40px;
  width: 532px;
}

.index-tablet .header-9 {
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 20px;
}

.index-tablet .new-release-lp-the-stonefruit-sessions-2 {
  align-self: stretch;
  letter-spacing: -0.64px;
  line-height: 41.6px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index-tablet .produced-by-trovaire-2 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.index-tablet .ct-as-2 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 18px;
  position: relative;
}

.index-tablet .link-5 {
  align-items: center;
  background-color: var(--masala);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px;
  position: relative;
  transition: all 0.3s ease;
}

.index-tablet .link-5:hover {
  transform: scale(0.97); 
}

.index-tablet .button-3 {
  align-items: center;
  border-radius: 20px;
  display: flex;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px 16px 85px;
  position: relative;
  width: 113px;
}

.index-tablet .label-5 {
  margin-left: -56.50px;
  margin-right: -56.50px;
}

.index-tablet .frame-8-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
}

.index-tablet .button-2 {
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  height: 60px;
  justify-content: center;
  padding: 16px 0px;
  position: relative;
  transition: all 0.3s ease;
  width: 62px;
}

.index-tablet .button-2:hover {
  transform: scale(0.97); 
}

.index-tablet .rocket-launch-5 {
  height: 50px;
  margin-bottom: -11.00px;
  margin-top: -11.00px;
  position: relative;
  width: 50px;
}

.index-tablet .rocket-launch-4 {
  height: 20px;
  position: relative;
  width: 20px;
}

.index-tablet .itunes-2 {
  height: 50px;
  left: 5px;
  position: absolute;
  top: 5px;
  width: 50px;
}

.index-tablet .yt-music-icon-4 {
  height: 50px;
  left: 6px;
  position: absolute;
  top: 5px;
  width: 50px;
}

.index-tablet .about-3 {
  align-items: center;
  align-self: stretch;
  background-image: url(../img/about-2.svg);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  padding: 120px 99px;
  position: relative;
  width: 100%;
}

.index-tablet .headline-subhead-7 {
  align-items: center;
  gap: 20px;
}

.index-tablet .about-trovaire-2 {
  letter-spacing: -0.64px;
  line-height: 41.6px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index-tablet .tenterfield-nsw-au-2 {
  letter-spacing: 0;
  line-height: 24px;
  margin-left: -44.00px;
  margin-right: -44.00px;
  position: relative;
  text-align: center;
  width: 670px;
}

.index-tablet .listen-3 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--cultured-pearl);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  padding: 120px 55px;
  position: relative;
  width: 100%;
}

.index-tablet .headline-subhead-8 {
  align-items: center;
  gap: 4px;
}

.index-tablet .title-2 {
  color: var(--black);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index-tablet .find-and-follow-us-o-2 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.index-tablet .cards-row-2 {
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  gap: 30px;
  justify-content: center;
  width: 100%;
}

.index-tablet .member-card-2 {
  margin-left: -10.00px;
}

.index-tablet .spotify-badge-2 {
  cursor: pointer;
  height: 66px;
  position: relative;
  width: 202px;
}

.index-tablet .member-card-3 {
  height: 66px;
}

.index-tablet .apple-music-badge-2 {
  cursor: pointer;
  height: 66px;
  position: relative;
  width: 204px;
}

.index-tablet .member-card-4 {
  height: 66px;
  margin-right: -10.00px;
}

.index-tablet .youtube-badge-2 {
  background-color: var(--neutral-colorswhite);
  border: 1px solid;
  border-color: var(--neutral-colors600);
  cursor: pointer;
  height: 66px;
  position: relative;
  width: 201.47px;
}

.index-tablet .flex-col-2 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  left: 64px;
  min-height: 39px;
  position: absolute;
  top: 15px;
  width: 120px;
}

.index-tablet .cta-2 {
  height: 10px;
  margin-left: 5.0px;
  width: 54px;
}

.index-tablet .image-3-2 {
  height: 26px;
  object-fit: cover;
  width: 120px;
}

.index-tablet .yt-music-icon-5 {
  height: 41px;
  left: 15px;
  position: absolute;
  top: 13px;
  width: 41px;
}

.index-tablet .watch-3 {
  align-self: stretch;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
}

.index-tablet .contact-2 {
  align-items: center;
  align-self: stretch;
  background-color: var(--neutral---zircon);
  box-shadow: 34.85px 29.63px 48.34px #3265ff0d;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  padding: 50px 32px;
  position: relative;
  width: 100%;
}

.index-tablet .contact-form-2 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--neutral-colorswhite);
  border: 1px solid;
  border-color: var(--cta---aqua-squeeze);
  border-radius: 20px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  position: relative;
  width: 100%;
}

.index-tablet .header-7 {
  align-self: stretch;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.index-tablet .headline-subhead-9 {
  align-items: flex-start;
  gap: 10px;
}

.index-tablet .join-our-mailing-list-2 {
  color: var(--neutral---mine-shaft);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  width: 465px;
}

.index-tablet .friends-and-follower-2 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
}

.index-tablet .input-fields-button-1 {
  align-items: flex-start;
  border-radius: 0px 20px 20px 0px;
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  position: relative;
  width: 224px;
}

.index-tablet .frame-15 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: 40px;
  position: relative;
  width: 318px;
}

.index-tablet .frame-17-2 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 30px;
  position: relative;
  width: 235px;
}

.index-tablet .image-4-2 {
  align-self: stretch;
  height: 27px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.index-tablet .footer-2 {
  align-items: center;
  align-self: stretch;
  background-color: var(--neutral---mine-shaft);
  display: flex;
  flex: 1;
  flex-grow: 1;
  justify-content: space-between;
  padding: 24px 30px;
  position: relative;
  width: 100%;
}

.index-tablet .x2023-anima-landing-page-ui-kit-1 {
  letter-spacing: 0;
  line-height: 22.4px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index-tablet .social-links-3 {
  background-color: var(--neutral---mine-shaft);
}

.index-tablet .apple-music-frame-1 {
  cursor: pointer;
  height: 40px;
  position: relative;
  width: 25px;
}

.index-tablet .instagram-frame-2 {
  width: 50px;
}

.index-tablet .cards-row {
  display: flex;
  position: relative;
}

.index-tablet .header {
  align-items: flex-start;
  display: flex;
  position: relative;
}

.index-tablet .headline-subhead {
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.index-tablet .instagram-frame {
  cursor: pointer;
  height: 40px;
  position: relative;
}

.index-tablet .label {
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index-tablet .member-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  position: relative;
  width: 210px;
}

.index-tablet .social-links {
  height: 40px;
  position: relative;
  width: 150px;
}
@media screen and (max-width: 779px) {
  .screen.index-desktop { 
    display: none;
   }
  .screen.index-tablet { 
    display: none;
   }
}
@media screen and (min-width: 780px) and (max-width: 1279px) {
  .screen.index-desktop { 
    display: none;
   }
  .screen.index-mobile-all-breakpoints { 
    display: none;
   }
}
@media screen and (min-width: 1280px) {
  .screen.index-mobile-all-breakpoints { 
    display: none;
   }
  .screen.index-tablet { 
    display: none;
   }
}