.about-section {
    display: flex;
    flex-direction: column;
}

.about-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: var(--font-secondary);
}

.about-left h2 {
    font-family : var(--font-primary);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 0.2rem; 
    padding-left : 0.5rem;
}

.about-logo {
    max-width: 100%;
}

.about-left p {
    font-family: var(--font-secondary);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.4;
}

.about-right img {
    width: 100%;
    height: auto;
    display: block;
}

.stats-section {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 4rem;
    font-family: var(--font-primary);
    padding-block: 0.5rem;
    max-width: 100%;
}


.stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat .number {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 0.9;
}

.stat .label {
    font-size: 4rem;
    font-weight: 700;
    text-align : left;
}

.brands { color: var(--clr-yellow); }
.products { color: var(--clr-pink); }
.customers { color: var(--clr-purple); }

.curtain-image {
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


.curtain-image img {
    width: 100%;
    height: 550px;
    object-position : 30% bottom;
    max-width: 100%;     
    object-fit: cover;
}

.description p {
    font-family: var(--font-secondary);
    text-align: justify;
}

/* --- Desktop Styles --- */
@media (min-width: 768px) {

    .content-wrap{
        max-width : 100%;
        padding-inline : 5.56%;
    }
    
    .about-section {
        flex-direction: row;
        align-items: stretch; 
        gap: 2.5rem;
        margin-bottom : 5rem;
    }
    .about-left {
        flex: 1;
        align-items: flex-start;
        text-align: left;
        display: flex;
   }
    .about-right {
        flex: 1;
        display: flex;
    }
    .about-right img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

@media(max-width : 900px){
    .stat .label{
        font-size : 2.5rem;
    }

    .stats-section{
        gap : 3rem;
    }
}

@media (max-width: 768px) {

    .content-wrap{
        max-width : 100%;
        padding-inline : 4.10%;
    }

    .stat .label{
        font-size : 1.7rem ;
    }

    .about-section{
        margin-block : 0
    }

  .about-left {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .about-left h2 {
    text-align: left !important;
    margin-left: 0 !important;
  }

  .curtain-image{
    padding-top :0;
  }
  .curtain-image img {
    width: 100%;
    height: 220px;
    object-position : 30% bottom;
    padding-top : 0;
  }

  .stats-section{
    padding-block : 2rem;
  }
}

@media(max-width : 499px){

    .stats-section{
        gap : 1rem;
    }

    .stat .number{
        font-size : 1.6rem;
    }
    .stat .label{
        font-size : 1.4rem;
    }
}