.about {
    text-align: center;
    font-size: var(--size-2xl);
    padding-top: 2em;
    padding-bottom: 2em;
   color: var(--clr-wtrb);
 
    
  
}

.about__head{
    font-size:var(--size-5xl) ;
    font-family: 'PiperAlpha';
    padding-bottom: 1em;
  display: inline-block; /* makes border fit to text width */
  border-bottom: 3px solid var(--clr-ind-3); /* underline */
  padding-bottom: 0.25rem; /* spacing between text & line */
  color: var(--clr-ind-3);
margin-bottom: 1rem;
  
}

.about__description{
    font-family: 'ICA Rubrik';
    color: var(--clr-wtrb-3);
}

.card{
      padding: 2rem;
    background-image: url(../images/yessir\ this\ shut.png);
    background-size: cover;
    background-color: rgb(56, 56, 56);
    background-blend-mode: multiply;
    color: aliceblue;
    text-align: center;
    font-size: var(--size-lg);
}
.card__title{
position: relative;
z-index: 1;
display: inline-block;
margin-bottom: 1rem;
text-align: center;
}
.card__title::after{
    content: '';
    position: absolute;
    top: -0.25rem;
    left: -2rem;
    bottom: -0.25rem;
    width: calc(100% + 4rem);
    background: var(--clr-wtrb);
    z-index: -1;
    transform: scaleX(0.1);
    transform-origin: left;
    transition: transform 250ms ease-in;
}

.card:hover .card__title::after{
    transform: scaleX(1);
}


.card__body{
    position: relative;
    z-index: 1;
color: transparent;
margin: 0;
transition: color 150ms 210ms;
font-size: var(--size-lg);


}


.card__body::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(245, 241, 241);
    z-index: -1;
    transform: scaleY(0);
    transition: transform 250ms ease-in;
    transform-origin: top ;
}

.card:hover .card__body{
    color: black;
}
.card:hover .card__body::after{
transform: scaleY(1);
}
/* Card title blue line (top) */
.card__title::after {
    content: '';
    position: absolute;
    top: -0.25rem;
    left: -2rem;
    bottom: -0.25rem;
    width: calc(100% + 4rem);
    background: var(--clr-wtrb);
    z-index: -1;
    transform: scaleX(0.1);       /* initial small line */
    transform-origin: left;
    transition: transform 250ms ease-in;
}

/* Trigger line on scroll via .card--active */
.card.card--active .card__title::after {
    transform: scaleX(1);         /* expand line fully */
}

/* Card body text and white line (bottom) */
.card__body {
    position: relative;
    z-index: 1;
    color: transparent;            /* hidden initially */
    margin: 0;
    font-size: var(--size-lg);
    transition: color 250ms ease-in 0.2s; /* slight delay */
}

/* White background line behind text */
.card__body::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(245, 241, 241);
    z-index: -1;
    transform: scaleY(0);          /* hidden initially */
    transition: transform 250ms ease-in;
    transform-origin: top;
}

/* Scroll-triggered reveal */
.card.card--active .card__body {
    color: black;                  /* reveal text */
}

.card.card--active .card__body::after {
    transform: scaleY(1);          /* reveal white background */
}

/* Optional: slide-in effect for card container */
.card {
    opacity: 0.85;                 /* slightly visible at start */
    transform: translateY(15px);   /* small downward offset */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.card.card--active {
    opacity: 1;
    transform: translateY(0);      /* slide into place */
}

@media (max-width: 768px){
    .about__head{
        font-size:var(--size-4xl) ;
    
    }
    .about {
      
        font-size: var(--size-xl);
        
    }
    .card__body{
      
    font-size: var(--size-base);
    
    
    }
    .card{
        font-size: var(--size-base);
    }
}



   
    
  
    

   
      @media (max-width: 420px){
        .about__head{
            font-size:var(--size-3xl) ;
            
        }
        .about {
           
            font-size: var(--size-lg);
            
          
        }
        
      }