/* ========= WELD TAB (layout based on your latest HTML structure) ========= */
.weld-tab{
    padding: 30px;
    padding-top: 0px;
}
/* Page title */
.weld-title-wrap {
  max-width: 700px;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 60px;
}
.weld-title {
    color: #1C1C1E;
    text-align: center;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
}
.weld-title .highlight{
    background: linear-gradient(90deg, #FDB563 0%, #614435 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    display: inline-block;
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

/* Big dark oval rectangle */
.weld-oval-panel{
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: fit-content;
    margin: auto;
    border-radius: 100px;
    background: linear-gradient(180deg, #EAEBEB 40%, #dec9b0 100%);
    padding: 80px;
    padding-top: 10px;
}

/* -------- group 1: torch + bubble -------- */
.weld-torch-group{
    max-width: 1200px;
  display: grid;
  grid-template-columns: 780px auto; /* torch | bubble */
  align-items: center;
   overflow: visible;
   margin-bottom: 60px;
}

.weld-torch{
    position: relative;
    z-index: 0;
}

.weld-torch-bubble{
    position: relative;
    border-radius: 30px;
    background: rgba(247, 248, 250, 0.30);
    box-shadow: 1px 0 3px 0 #FFF inset;
    backdrop-filter: blur(5px);
    max-width: 520px;
    height: auto;
    flex-shrink: 0;
    padding: 30px;
    z-index: 1;
    margin-left: -250px;
}

.weld-torch-bubble p{
    color: #2c2c30;
    font-family: Geologica;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.weld-torch img{
  width: 100%;
  margin-left: -80px;
}

/* The generic bubble box look (semi-transparent with blur) */
.weld-bubble, .weld-bubble2{
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(247, 248, 250, 0.50) 0%, rgba(247, 248, 250, 0.25) 100%);
    box-shadow: 0 1px 3px 1px #FFF inset;
    backdrop-filter: blur(8.5px);
    padding: 30px;
}

.weld-bubble2{
    margin-bottom: 25px;
}

.weld-bubble p, .weld-bubble2 p {
    color: #2c2c30;
    font-family: Geologica;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/* -------- group 2: two photos + their bubbles -------- */
.weld-photos-group{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: center;
}

/* Each side (left/right) is a block with a photo and a bubble */
.weld-photo-block, .weld-photos-block2{
  display: grid;
  grid-template-rows: auto auto; /* item order comes from HTML */
  gap: 25px;
  align-content: start;
}

/* Framed photo with inner overlay */
.weld-photo-frame, .weld-photo-frame2{
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 4px 1px #FFF inset;
    backdrop-filter: blur(10px);
    padding: 10px;
}
.weld-photo-inner, .weld-photo-inner2{
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}

.weld-photo-inner img, .weld-photo-inner2 img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}
.weld-photo-overlay, .weld-photo-overlay2{
    position: absolute;
    border-radius: 30px;
    background: linear-gradient(114deg, rgba(254, 217, 174, 0.15) 0%, rgba(188, 131, 59, 0.10) 100.77%);
    box-shadow: 0 0 15.2px 0 rgba(69, 48, 37, 0.50) inset;    
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ================= Materials (outside the oval) ================= */
.materials-container{
    margin-top: 100px;
    margin-bottom: 100px;
}

.materials-container h2{
    color: #1C1C1E;
    text-align: center;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 60px;
}

.materials-principles {
  max-width: 1200px;
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  background: linear-gradient(180deg, #EAEBEA 0%, #FED9AE 100%);
  padding: 30px;
  border-radius: 30px;
  margin: auto;
  min-height: fit-content;
}

.material-box {
  background: linear-gradient(180deg, rgba(247, 248, 250, 0.70) 0%, rgba(247, 248, 250, 0.35) 100%);
  box-shadow: 0 1px 3px 1px #FFF inset;
  backdrop-filter: blur(2px);
  padding: 30px;
  border-radius: 20px;
  width: 270px;
  max-width: 100%; /* 3 gaps of 20px = 60px */
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.material-box img {
  width: auto;
  height: 100px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.material-box p {
    color: #000;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    align-self: center;
    margin-top: auto;
}

@media (max-width: 1280px) {
    .weld-oval-panel{
        max-width: 1000px;
        overflow: hidden;
    }
    .weld-torch-group{
        grid-template-columns: 100%;
        justify-content: center;   /* centers the single column grid */
        margin-left: auto;         /* center the group as a block */
        margin-right: auto;
        margin-bottom: 50px;
    }
    .weld-torch-bubble{
        margin-left: 0px;
        margin: auto;
        max-width: 100%;
        margin-top: -80px;
        box-shadow: 0 1px 3px 0 #FFF inset;
        backdrop-filter: blur(5px);
    }
    .weld-torch img{
        width: calc(100% + 80px);
        margin-top: -130px;
    }
}

@media (max-width: 940px) {
    .weld-oval-panel{
        max-width: 1000px;
        overflow: hidden;
        padding: 40px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }
    .weld-torch-group{
        grid-template-columns: 100%;
        justify-content: center;   /* centers the single column grid */
        margin-left: auto;         /* center the group as a block */
        margin-right: auto;
        margin-bottom: 60px;
    }
    .weld-torch-bubble{
        margin-left: 0px;
        margin: auto;
        max-width: 100%;
        margin-top: -100px;
    }
    .weld-torch img{
        width: calc(100% + 80px);
        margin-top: -130px;
    }
}

@media (max-width: 700px) {
    .weld-tab {
        padding: 20px;
        padding-top: 0px; /* keep the page padding */
    }

    .weld-oval-panel {
        border-radius: 0px;
        padding: 20px;
        padding-top: 0px;
        width: auto;        /* IMPORTANT: not 100% */
        max-width: none;    /* don't clamp */
        margin-left: -20px; /* cancel parent padding */
        margin-right: -20px;
    }
    .weld-torch img{
        width: calc(150% - 70px);
        margin-top: 0px;
    }
    .weld-torch-bubble{
        margin-top: 35px;
        padding: 20px;
    }
    .weld-bubble, .weld-bubble2{
        padding: 20px;
    }
    .weld-torch-group{
        margin-bottom: 25px;
    }
    .materials-container{
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .materials-container h2{
        margin-bottom: 40px;
    }
    
}

@media (max-width: 940px) {
    .weld-photos-group {
    display: grid;
    grid-template-columns: 100%;   /* one column */
    grid-template-areas:
        "block2"
        "block1";                   /* order top → bottom */
    justify-items: center;        /* center each block horizontally */
    }
    .weld-bubble2{
        margin-top: 25px;
        margin-bottom: 0px;
    }

    .weld-photo-inner, .weld-photo-inner2{
        max-width: 650px;
    }
    .weld-photo-block {
    grid-area: block1;
    display: grid;
    grid-template-columns: 1fr;   /* stack inside vertically */
    justify-items: center;
    }

    .weld-photo-block2 {
    grid-area: block2;
    display: grid;
    grid-template-columns: 1fr;   /* stack inside vertically */
    justify-items: center;
    }

    .weld-photo-block2 {
        display: grid;
        grid-template-areas:
            "photo"
            "bubble";   /* photo first, then bubble */
        justify-items: center;
    }

    .weld-photo-block2 .weld-photo-frame2 {
        grid-area: photo;
    }
    .weld-photo-block2 .weld-bubble2 {
        grid-area: bubble;
    }
}

@media (max-width: 940px) {
    .weld-title, .weld-title .highlight, .materials-container h2 {
        font-size: 30px;
    }
}

@media (max-width: 1260px) {
    .materials-principles {
        max-width: 620px;
    }
}

@media (max-width: 680px) {
    .materials-principles {
        max-width: 330px;
    }
}

@media (max-width: 500px) {
    .materials-principles{
        max-width: 100%;
        padding: 20px;
    }
    .material-box{
        width: 100%;
        min-width: 270px;
    }
}

@media (max-width: 600px) {
  .weld-title, .weld-title .highlight, .materials-container h2{
    font-size: 28px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@keyframes floatSoftUp1 {
  0%, 100% { transform: translateY(3px); }
  50%      { transform: translateY(-3px); }
}

@keyframes floatSoftDown1 {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(3px); }
}

.weld-photo-frame { 
  animation: floatSoftUp1 6s ease-in-out infinite; 
  will-change: transform;
}
.weld-photo-frame2 { 
  animation: floatSoftDown1 6s ease-in-out infinite; 
  will-change: transform;
}
.weld-torch img {
    animation: floatSoftDown1 6s ease-in-out infinite; 
    will-change: transform;
}

.weld-oval-panel,
.weld-title,
.weld-torch,
.weld-torch-bubble,
.weld-photos-group,
.materials-container,
.plan-faq {
  opacity: 0;
  animation: fadeSlideIn 0.5s ease-out forwards;
}

.weld-title {
  animation-delay: 0s;
}

.weld-oval-panel {
  animation-delay: 0.2s;
}

.weld-torch-bubble {
  animation-delay: 0.3s;
}

.weld-torch {
  animation-delay: 0.35s;
}

.weld-photos-group {
    animation-delay: 0.5s;
}

.materials-container {
  animation-delay: 0.7s;
}

.plan-faq {
  animation-delay: 0.9s;
}