.spc {
    margin-bottom: 0px !important;
}
.termsConditions, #termsConditions {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

#termsConditions {
	margin: 100px auto;
    text-align: left;
    font-size: 14px;
    line-height: 18px;
    font-style: italic;
    color: #414141;
    .title {
        font-size: 16px;
        font-style: normal;
        font-weight: bold;
        margin: 25px 0px 0px 0px;
        padding: 0px;
        color: #2b2b2b;
    }
}

.cBTN {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.2em;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: #2b2b2b;
    border-radius: 5px;
    transition: background-color 0.3s;
    &:hover {
        background-color: #3A4E44;
        text-decoration: none;
    }
}

.actionSets {
    display: flex;
    gap: 20px;
}



.willowtreeDiamond{
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 25px auto;
    padding: 20px 20px;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #A3743C;
    border-radius: 10px;
    & p{
        color: white;
        font-size: 1.5em;
        margin: 0px ;
    } 
    & a {
        color: #2b2b2b;
        text-decoration: none;
        background-color: white;
        padding: 20px 20px;
        border-radius: 10px;
    }
    & a:hover {
        color: white;
        text-decoration: none;
        background-color: transparent;
        border: solid white 1px;
        padding: 20px 20px;
        border-radius: 10px;
    }
}
@media (max-width: 600px) {
	.willowtreeDiamond {
		flex-direction: column;
        height: 180px;
        margin: 25px 25px;
        width: 90%;
        justify-content: center;
        gap: 30px;
	}
}
.chart-wrapper {

    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    .banner {
        position: relative;
        width: 100%;
        height: 100px;
        background: #425563;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        padding: 20px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
		
        & h2 {
            font-size: 2.25em;
			font-family: Arial, Helvetica, sans-serif;
            margin: 0px;
            padding: 0px;
            color: white;
            text-align: center;
        }
        & p {
            font-size: 1.2em;
            margin: 0px;
            padding: 0px;
            color: white;
            text-align: center;
        }
        & a {
            font-size: 1.2em;
            margin: 0px;
            padding: 0px;
            color: white;
            text-align: center;
        }
    }
	
	@media screen and (max-width: 600px) {
		.banner{
			height: 200px;
		}
	}
}


.chart {

    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--chart-item-min-width, 75px), 1fr));
    gap: var(--chart-item-gap, 20px);
    margin-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    grid-auto-rows: 1fr;
    .cell {
        box-sizing: border-box;
        grid-row: var(--grid-row, auto);
        grid-column: var(--grid-column, auto);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #efefef;
        & :not(:last-child) {
            border-right: none;
        }
        .content {            
            border-bottom: 1px solid #efefef;
            height: 100%;
            width: calc(100% - 40px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: var(--bg-color, white);
            & p {
                width: 100%;
                text-align: center;
                margin: 0px;
                padding: 10px 0px;
            }
        }
        .text-left p{
            text-align: left;
            margin-left: 20px;
            span {
                font-size: 14px;
                font-weight: bold;
            }
        }
        
    }
    .cell.borderless {
        border-right: none;
    }
    .cell.header {
		border-bottom: 0px;
        font-weight: bold;
        .content {
            background-color: var(--bg-header, white);
            & p {
                color: var(--text-header, black);
                font-size: 20px;
            }
        }
    }
}


.activePromotions {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0px auto 20px auto;
    width: 100%;
    max-width: 1300px;
    @media screen and (max-width: 1280px) {
        padding: 0px 20px;
    }
    @media screen and (max-width: 768px) {
        flex-direction: column;
        padding: 0px 20px;
    }
    & img {
        width: 70%;
        height: 750px;
        object-fit: cover;
        border-radius: 10px;
        max-width: 900px;
		@media screen and (max-width: 1280px) {
            height: 400px;
            width: 100%;
        }
        @media screen and (max-width: 1000px) {
            height: 300px;
            width: 100%;
        }
    }
    .content {
        width: 100%;
        min-width: 275px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        & h2 {
            font-size: 2.5rem;
            line-height: 2.75rem;
            font-weight: bold;
            margin: 20px 0px;
            font-family: Arial, Helvetica, sans-serif;
        }
        .cBTN {
            align-self: flex-start;
            width: auto; 
        }
        .cBTN[class*="gray--"] {
            background-color: #29546B;
            color: white;
        }
    }
    @media screen and (max-width: 768px) {
        .content {
            justify-content: center;
            align-items: center;
            text-align: center;
            .cBTN {
                align-self: center;
                width: auto; 
            }
        }
    }
}

#promotion-page-banner {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px auto 50px auto;
    position: relative;
    & img {
        width: 100%;
        height: 750px;
        object-fit: cover;
    }
    @media screen and (max-width: 1500px) {
        & img {
            height: 750px;
        }
    }
	@media screen and (max-width: 600px) {
        & img {
            height: 850px;
        }
    }
    .content {
        max-width: unset;
        position: absolute;
        inset: 0px;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background: rgba(0, 0, 0, 0.2);
        color: white !important;
        & h1 {
            font-family: Arial, Helvetica, sans-serif;
            color: white ;
            font-size: 5rem;
            line-height: 5rem;
            font-weight: bold;
            margin: 0px auto;
        }
        & p {
            color: white ;
            font-size: 1.2rem;
            line-height: 1.5rem;
            margin: 0px auto;
            max-width: 800px;
        }
        .signup-form form{
            width: 100%;
            max-width: 650px;
            display: flex;
            align-items: center;
            margin: 30px auto;
            gap: 20px;
            & input{
				text-align: left;
                height: 51px;
                width: 100%;
                padding: 10px;
                margin: 10px 0px;
                border: 1px solid #ccc;
                border-radius: 5px;
                color: #000;
            }
        }
    }
    @media screen and (max-width: 768px) {
        .content {
            padding: 40px 20px;
            color: #2b2b2b;
            & h1 {
                font-size: 4rem;
                line-height: 4rem;
            }
            & p {
                line-height: 1.5rem;
            }
            .signup-form form{ 
                flex-direction: column;
                gap: 10px;
                & input{
					text-align: left;
                    width: 100%;
                }
                & button {
                    width: 100%;
                }
            }
        }
    }
}
.containerShows-padding {
    padding: 30px;
	margin: 20px auto;
    background-color: #fff;
	border-radius: 10px;
	
  }
  .containerShows {
    display: flex;
    max-width: 1000px;
    width: 100%;
    border-radius: 6px;
    align-content: center;
    align-items: center;

    .product-image {
      width: 259px;
      height: 258px;
      background-image: url('https://www.demdaco.com/content/DDR/structured-folders/07-landingpages/03-promotions/2025-Q1/form-cover.jpg');
      background-color: #333;
      border-radius: 10px;
      background-size: cover;
      background-position: center;
    }
	
	  
    .content-container {
      flex: 1;
      padding: 0 20px;

      .header-container {
		flex-direction: column;
        display: flex;
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 20px;
		border-bottom: unset !important;
        .titleShow-container {
          flex: 1;

          .titleShow {
			line-height: 1em !important;
            font-family: 'Arial', sans-serif  !important;
            font-weight: bold  !important;
            font-size: 25.6px  !important;
            color: #000  !important;
            text-align: left  !important;
          }

          .subtitleShow {
            font-family: 'Arial', sans-serif  !important;
            font-size: 16px  !important;
            color: #000  !important;
            text-align: left  !important;
          }
        }

        .event-container {
          display: flex;
          gap: 10px;
          /* flex-direction: column; */
          align-items: flex-start;

          .event {
            margin: 0px !important;
            font-family: 'Arial', sans-serif !important;
            font-size: 16px !important;
            color: #000 !important;
            text-align: left !important;
          }
        }
      }

      .form-container {
        margin-top: 20px;

        .form-section {
          margin-bottom: 20px;

          .form-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            .first-name-container,
            .zip-code-container,
            .email-container,
            .phone-container {
              flex: 1;
              margin-right: 10px;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }

        label {
          font-family: 'Arial', sans-serif;
          font-size: 16px;
          color: #000 !important;
        }

        input {
			width: 100%;
			padding: 10px;
			border: 1px solid #a1a1a1;
			border-radius: 5px;
			margin-top: 5px;
			text-align: left;
        }

        .button-row {
          display: flex;
          gap: 10px;
		   	@media (max-width: 1000px) {
				.book-appointment {
				  width: 100%;
				}
				.start-shopping {
				  width: 100%;
				}
			}
          .book-appointment,
          .start-shopping {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;

            &.book-appointment {
              background-color: #2a4f6e;
            }

            &.start-shopping {
              background-color: #2a4f6e;
            }
          }
        }
      }
    }
  }
	@media (max-width: 1000px) {
		.containerShows-padding {
			margin: 20px;
		}
	}
  @media (max-width: 768px) {
    .containerShows-padding {
		padding: 25px 10px;
      	background-color: #fff;
	  
    }
    .containerShows {
      flex-direction: column;
      width: 100%;

      .product-image {
        width: 100%;
        height: auto;
      }

      .header-container {
        flex-direction: column;
        margin-bottom: 20px;
        gap: 0px;
      }

      .button-row {
        .book-appointment,
        .start-shopping {
          background-color: #2a4f6e;
          width: 100%;
        }
      }
    }
  }

@media (max-width: 800px) {
	.chart-wrapper .chart{
		display: none;
	}
}


.mobileScroll {
    overflow-x: auto;
    overflow-y: hidden;
    gap: 20px;
    display: flex;
    scroll-snap-type: x mandatory; /* Enables snapping horizontally */
    scroll-behavior: smooth; /* Smooth scrolling */
	
	max-width: 800px;
    margin: 40px auto; /* Top and bottom 40px, center by default */
    margin-left: min(20px, auto); /* Auto when >800px, 20px when smaller */
    margin-right: min(20px, auto);
}


@media (min-width: 800px) {
	.mobileScroll{
		display: none;
	}
}

.promotion-card{
    scroll-snap-align: start; /* Snaps to the start of each card */
    font-family: Arial, Helvetica, sans-serif;
    min-width: 250px;
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
    .promotion-card__wrapper {
        width: 250px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: #2b2b2b;
      border-radius: 58px;
      padding: 7px 15px;
      width: fit-content;
      .badge__text {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
      }
    }
    .level-card {
      background-color: #fff;
      border-radius: 6px;
      padding: 20px;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
      .level-card__info-card {
        margin-bottom: 8px;
        .info-card__title {
          font-family: Arial, sans-serif;
          font-size: 26px;
          font-weight: bold;
          color: #2b2b2b;
          letter-spacing: -0.4px;
          margin: 0;
        }
        .info-card__subtitle {
          font-family: Arial, sans-serif;
          font-size: 16px;
          color: #2b2b2b;
          margin: 0;
        }
      }

      .level-card__award-card {
        .award-card__icon {
			display: flex;
			justify-content: center;
			align-items: center;
			min-width: 17px;
			min-height: 17px;
			width: 17px;
			height: 17px;
			background-color: #2b2b2b;
			border-radius: 50%;
			margin-right: 5px;
          i {
            color: #fff;
            width: 12px;
            height: 12px;
          }
        }
        .award-card__discount {
          font-family: Arial, sans-serif;
          font-size: 16px;
          font-weight: bold;
          color: #2b2b2b;
          margin: 0;
        }
      }
    }
  }