/* All */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Tomorrow&display=swap');
body {
  margin: 0px;
}

html {
  font-family: 'Roboto', sans-serif;
  color: #563C00;
}

* {
  box-sizing: border-box;
}

h1{
  font-size: 40px;
  text-align: left;
}

p {
  font-size: 18px;
  text-align: left;
  line-height: 27px;
}
.drop-title{
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom:0px;
}

.row {
  display: flex;
}

.col {
  flex: 1;

}
.text-container {
  width: 50%;
  height: 100vh;           /* full viewport height */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* start at top, we’ll center smaller content with padding if needed */
  overflow-y: auto;            /* scroll if content exceeds height */
  background: #f5f5f5;         /* your background color */
}
/* Navbar */
/* #navbar {
  z-index: 100;
  top: 0px;
  position: fixed;
  width: 100%;
  height: 80px;
  background-color: #FFBF2C;
  transition: height 0.4s;
} */
.tab-content {
  flex: 1;             /* fills remaining height if needed */
  display: flex;
  flex-direction: column;
}
#brass-logo{
  z-index: 1;
  top: 0px;
  position: fixed;
  padding-left: 2%;
  padding-top: 10px;
  height: 70px;
}

/* #logo-l {
  padding-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#logo-s {
  display: none;
  padding-top: 5px;
  margin-left: auto;
  margin-right: auto;
} */

/* Content */
html, body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  width: 100%;
  height: 100vh; /* full viewport height */
}

.video-container {
  width: 50%;
  height: 100%;
  background: white;
  overflow: hidden;
  position: relative;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop top/bottom for portrait */
  opacity: 0;
  transition: opacity 0.6s ease;
  transform: scale(1.01);

}



.half-container {
  float: left;
  width: 50%;
}

video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;          /* fill the half-container height */
  background: white;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops top/bottom if portrait */
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ill-container {
  background-color: #FFF0D2;
}

.cont-container{
    background-color: #FFBF2C;

}

.top-text{
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 32px 32px;
}

.product-video{
  max-width: 100%;
  max-height: 300px;
  padding-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  clip-path: inset(2px 2px);
}




.kit-wrapper {
  position: relative;
  margin: 0 10%;
}

.kit-bg,
.kit-svg {
  width: 100%;
  height: auto;
  display: block;
}

.kit-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.kit-svg {
  position: relative;
  z-index: 1;
}



/* Ring */


#ring-set-brand-container{
  position: relative;
}

#ring-set-brand{
  position: absolute;
  top: -100px;
  right:20px;
  height: 100px;
}
#ring-animation {
  padding-top: 40px;
  height: 100vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#ring-text-container{
  padding-top: 80px;
  background-color: #F5F5F5;

}

#ring-test{
  padding-top: 15vh;
  height: 85vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#ring-set-buy-container{
  margin-left: auto;
  margin-right: 20px;
  cursor: pointer;
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #563C00;
  text-align: center;
  position:relative;
  height: 42px;
  width: 200px;
  overflow:hidden;
  background: #FFBF2C;
  clip-path: polygon(
0 20%,
5% 0,
95% 0,
100% 20%,
100% 80%,
95% 100%,
5% 100%,
0% 80%,
0% 20%
)
}

#ring-set-buy{
  padding: 10px;
}

#ring-model-yan{
  display: none;
}
#ring-model-yam{
  display: none;
}
#ring-set-new-model{
  color: #563C00;
  display: block;
  margin-top:5px;
}


#ring-brass-measure-img-container{
  width: 40%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;

}

#ring-brass-measure-img-top{
  opacity: 0.2;
  position: absolute;
  width: 100%;
  transition: 0.2s;
}

#ring-brass-measure-numbers{
  opacity: 0;
  width: 100%;
  transition: 0.2s;
}

#ring-brass-measure-img{
  width: 100%;
}

#ring-brass-measure-out{
  top: -11%;
  left: 44%;
}

#ring-brass-measure-in{
  top: 8%;
  left: 44%;
}

#ring-brass-measure-height{
  top: 52%;
  left: 78%;
}

.ring-brass-measure-text{
  font-size: 16px;
  position: absolute;
}
.ring-brass-measure-text-bold{
  font-weight: bold;
}



#ring-brass-code-error{
  margin:0px;
  margin-top: 10px;
  font-size: 16px;
  color: #BD0D0D;
  font-weight: bold;
  text-align: center;
  opacity: 0;
}

#ring-brass-measure-container{
  padding-top: 20px;
  position: relative;

}

.tab-filler {
  flex: 1;                  /* takes leftover vertical space */
  border-left: 2px solid #FFBF2C;

}

#ring-brass-material{
}


/* Holder */

#holder-video{
  transition: 0.2s;
}

#holder-lottie-animation{
  fill: white;
}
#holder-animation-container{
  display: flex;
	flex-direction: column;
}
#holder-animation{
  margin-top: auto;
  height: 80vh;

}

.kit-image{
  padding: 24px;
  width: 100%;
}


/* Extra small devices (phones, <576px) */
@media (max-width: 575.98px) {

  h1{
    font-size: 24px;
  }

   .tabs > label {
    padding: 4px 8px;
  }
}

/* Small devices (phones in landscape, 576px – 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  
  h1{
    font-size: 28px;
  }

  p {
    font-size: 14px;
  }
   .tabs > label {
    padding: 4px 8px;
    font-size: 14px;
  }
}

/* Medium devices (tablets, 768px – 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  
  h1{
    font-size: 32px;
  }

  p {
    font-size: 16px;
  }
   .tabs > label {
    padding: 4px 8px;
    font-size: 16px;
  }
}

/* Large devices (desktops, 992px – 1199px) */
@media (min-width: 992px) and (max-width: 2000px) {
  
  h1{
    font-size: 40px;
  }

  p {
    font-size: 18px;

  }
  .product-text{
    margin-right: 10%;
  }
   .tabs > label {
    padding: 8px 16px;
    font-size: 18px;
  }
  .kit-wrapper{
    margin: 0% 10%;
  }

  .kit-description{
    margin: 5% 10%;
  }
}

/* Extra large devices (large desktops, ≥1200px) */
@media (min-width: 2001px) {
  
  h1{
    font-size: 60px;
  }

  p {
    font-size: 20px;
  }
  .product-text{
    margin-right: 20%;
  }

  .tabs > label {
    padding: 12px 24px;
    font-size: 24px;
  }
  .kit-wrapper{
    margin: 0% 20%;
  }

  .kit-description{
    margin: 5% 10%;
  }
}



@media only screen and (max-width: 800px) { 


  .row {
    display: block;
  }

  .ill-container {
    background-color: #FFF0D2;
    margin: 16px;
    border-radius: 10px;
  }
  #content{
    padding-top: 80px;
  }


  .half-container {
    float: none;
    width: auto;
  }



  .left-half{
    order: 2;
  }
  .right-half{
    order: 1;
  }

  #ring-text-container{
    padding-top: 0px;
  }
  #ring-animation{
    padding-top: 40px;
    height: 40vh;
  }
  #holder-animation{
    padding-top: 20px;
    height: 60vh;
  }

  #ring-tab{
    padding-bottom: 0px;
  }

  #holder-container{
    display: flex;
    flex-flow: column;
  }

}

@media (max-width: 900px) {
  .container {
    flex-direction: column;
    height: auto; /* allow scrolling if needed */
  }

  .video-container {
    width: 100%;
    aspect-ratio: 1 / 1; /* square video on top */
  }

  .text-container {
    width: 100%;
    height: auto;
  }
}