#Plan-root::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1964px;
  background: var(--secondary-color);
  opacity: 0.1; /* Adjust background opacity */
  z-index: -1; /* Keeps text above */
}

.Plan-card-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    gap: 6rem;
    padding: 1rem;
    overflow: hidden;
}

.Plan-card{
    display: flex;
    width: 600px;
    height: 350px;
    box-shadow: 8px 4px 16px rgba(0, 0, 0, 0.3);
    border-radius: 32px;
    overflow: hidden;
    line-height: 1;
    background-color: var(--clr-base-100);
}

.Plan-card:hover{
    transform: scale(1.05);
    transition: transform 0.4s ease-in-out;
}

.Plan-card span{
    width: 560px;
    height: 350px;
    padding: 8px;
}

.Plan-card p{
    padding-left: var(--size-400);
    max-width: 48ch;
}

.Plan-card br{
    padding-left: var(--size-400);
}

.Plan-card button{
    position: relative;
    top: 2rem;
    right: 1.5rem;
    width: 180px;
    margin: 0 auto; 
}

.Plan-card button:hover,
.Plan-card button:focus-within{
    color: var(--clr-base-100);
    background-color: var(--secondary-color);

    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
}

.Plan-card-trailing{
    position: relative;
    width: 100px;
    height: inherit;
    background-color: var(--primary-color);
    margin: 0;
}

.ads-pane{
    margin: 0 auto;
    padding: var(--size-400);
    overflow: hidden;
}

.ads-pane button{
  position: relative;
  left: 5rem;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.ads-pane span{
  text-align: center;
  place-items: center;
}

.ads-pane p{
    max-width: 8ch;
}


.ads-pane button:hover,
.ads-pane button:focus-within{
    color: var(--clr-base-100);
    background-color: var(--primary-color);
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}

.ads-pane svg{
    fill: white;
    width: 16px;
    height: 16px;
}

.ads-pane div:first-of-type{
    margin: 24px auto;
}

/*AD CONTAINER AND ELEMENTS*/

#ads-img-1{
    width: 700px;
}

#ad-content-2{
    margin-top: var(--size-400);
    padding-top: var(--size-600);
    background-color: var(--secondary-color);
    width: inherit;
    height: 900px;
    overflow: hidden;
    color: var(--clr-base-100);
}

#ad-content-2 span{
    text-align: left;
}

#ads-2 {
    margin: 0 auto;
}

#ads-2 span{
    place-items: center;
}

#ads-2-btn-container{
    padding-left: var(--size-800);
    justify-content: left;
    width: 75%;
}

#ads-2 svg{
    fill: var(--primary-color);
}

#ads-2 button:hover,
#ads-2 button:focus-within{
    background-color: var(--clr-base-100);
    color: var(--primary-color);
}

#ad-content-2 p{
    line-height: 1.25;
    max-width: 40ch;
    padding-left: var(--size-800);
}

#ads-2{
    background: url(/assets/JPEG/pexels-mikoto-3367850.jpg);
    width: inherit;
    height: 835px;
    background-size: cover;
    background-position: bottom center;
}

/*UNIQUE TEXT*/
.gold-text{
    background: linear-gradient(to bottom, hsl(40,45%,60.8%), hsl(50.6,100%,50%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*UNIQUE BTNS*/

#bronze-btn{
    background: linear-gradient(to bottom,hsl(28.4,40.4%,53.9%) ,hsl(28.1,40.7%,39%), hsl(26.4,42.3%,30.6%));
}

#bronze-btn:hover,
#bronze-btn:focus-within{
    background: hsl(28.1,40.7%,39%);
}

#silver-btn{
    background-color: hsl(0,0%,75.3%)
}

#silver-btn:hover,
#silver-btn:focus-within{
    background-color: hsl(0,0%,60.4%);
}

#gold-btn{
    background: linear-gradient(to bottom, hsl(40,45%,60.8%), hsl(50.6,100%,50%));
}

#gold-btn:hover,
#gold-btn:focus-within{
    background: hsl(50.3,100%,30.2%);
}

#platinum-btn{
    background: linear-gradient(to bottom, hsl(170.7,100%,32.9%), hsl(162.5,68.7%,48.8%));
}

#platinum-btn:hover,
#platinum-btn:focus-within{
    background: hsl(170.7,100%,32.9%)   ;

}

#emerald-btn{
    background: linear-gradient(to bottom, hsl(139.8,52%,40%),hsl(140,52.2%,54.9%), hsl(140.2,52.2%,59.8%));
}

#emerald-btn:hover,
#emerald-btn:focus-within{
    background: hsl(139.8,52%,40%);
}

#diamond-btn{
    background: linear-gradient(to bottom, hsl(191.1,100%,71.4%),hsl(191.1,100%,86.3%), hsl(190.9,100%,91.4%));
}

#diamond-btn:hover,
#diamond-btn:focus-within{
    background: hsl(191.1,100%,71.4%);
}