.main{
    width: 100%;
    max-width: 100%; 
    margin-inline: auto;
    padding-inline: var(--space-0-5);
}

/* css container class is located in base.css */



.card-section-container{
    align-items: flex-end;
}

.p-1{
    padding-top: 2rem;
}
.p-preview{
    font-family: var(--font-roboto);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark-green);
    margin:1rem 0 0 0;
}

.grid-programs-container{
    padding-top: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;

}


@media (width > 767px) and (width < 1024px) {

    .main{
    width: 100%;
    max-width: 100%; 
    margin-inline: auto;
    padding-inline: var(--space-0-5);
}

/* css container class is located in base.css */

.inner-main-1{
    /* background-color: red; */
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    margin-inline: auto;
}
.section-container{
    padding-top: 2rem ;
    padding-bottom: 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.section-header{
    display: flex;
    font-family: var(--font-roboto);
    font-weight: var(--font-weight-bold);
    font-size: 2rem;
    text-transform: capitalize;
}
.line { 
    width: 3rem;      
    height: 0.3rem;
    background-color:var(--color-first);
    margin-top: -.5rem;   
}

.section-text{
    font-family: var(--font-roboto);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-lg);
    text-align: justify;
    text-justify: inter-word; 
    hyphens: auto;
    overflow-wrap: break-word;

 }
 .p-preview{

    margin:1.5rem 0 0 0;
}

 .grid-programs-container{
    gap: 2.5rem;
}
}

@media (width >= 1024px){

.main{
    width: 100%;
    max-width: 100%; 
    margin-inline: auto;
    padding-inline: var(--space-0-5);
}

/* css container class is located in base.css */


.section-container{
    padding-top: 2rem ;
    padding-bottom: 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.section-header{
    display: flex;
    font-family: var(--font-roboto);
    font-weight: var(--font-weight-bold);
    font-size: 2rem;
    text-transform: capitalize;
}
.line { 
    width: 3rem;      
    height: 0.3rem;
    background-color:var(--color-first);
    margin-top: -.5rem;   
}

.section-text{
    font-family: var(--font-roboto);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-lg);
    text-align: justify;
    text-justify: inter-word; 
    hyphens: auto;
    overflow-wrap: break-word;
    padding-top: 0rem;
}
.p-1{
    margin-top: 2rem;
}
.grid-programs-container{
    justify-content: space-evenly;
    gap: 2rem;

}
.p-preview{
    margin:2rem 0 0 0;
}
}