body {
    width: 100dvw;
    background: linear-gradient(90deg, #f3fbf4, #E8F5E9);
;
}

h4 {
    height: max-content;
}

section {
    display: grid;
    width: 100vw;
    justify-self: center;
    box-shadow: none;
    /* align-content: center; */
}

.hero {
    /* background: linear-gradient(90deg, var(--brandGreen),rgb(165, 243, 160)); */
    /* height: 95dvh; */
    padding: 30px;
    grid-template-rows: max-content max-content 1fr ;
    /* grid-column: 1fr !important; */
}
p{
    text-align: left;

}
.hero > h1 {
    /* font-family: 'Inter', serif; */
    font-weight: 300;
    align-self: center;
    grid-row: 1;
    padding-top: 60px;
    padding-bottom: 0px ;

}

.typing-text, .hero > p {
    padding: 30px;
    height: max-content;
    margin: 0px;
    /* color: #fff; */

}
.hero > p:first-of-type{
    grid-row: 2;
}
.typing-text {
    grid-row: 2;
}

.hero > .cta-btn {
    grid-row: 3;
    margin: 0px;
    padding: 0px;
}


.about-us{
    justify-content: center;
    align-self: center;
    text-align: center;
    background-color: #f9fdf9;
}

h2 {
    /* color: #fff; */
    padding: 30px;
}

.subjects-offered{
    padding: 30px;
    background-color: #f3fbf4;
    justify-content: center;
    align-self: center;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3,1fr );
    grid-template-rows: repeat(4,1fr);
    gap: 20px;
    column-gap: 40px ;
    height: max-content;

}

.subjects-offered > h2 {
    grid-row: 1;
    grid-column: 1 / span 3;
}

.subjects-offered > subject:nth-of-type(3n) {
  animation: pulse1 8s ease-in-out infinite;
}

.subjects-offered > subject:nth-of-type(3n + 1) {
  animation: pulse2 10s ease-in-out infinite;
}

.subjects-offered > subject:nth-of-type(3n + 2) {
  animation: pulse3 12s ease-in-out infinite;
}

subject, point{
    width: 350px;
    /* border: silver 2px solid; */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    justify-self: center;
    background-color: #fff;
    padding: 10px 10px;
    height: max-content;
    text-align: left;
    border-left: solid 4px var(--brandGreen);
    justify-self: center;
    
}

subject:nth-of-type(3n+1) {
    grid-column: 1;
}

subject:nth-of-type(3n+2) {
    grid-column: 2;
}

subject:nth-of-type(3n) {
    grid-column: 3;
}

subject > h3 {
    color: var(--brandGreen);
    font-weight: 500;
    text-align: left;
}

subject > p {
    text-align: left;
    justify-self: left;
    margin: 5px 0;
}

subject > p > strong {
    /* font-weight: 400; */
    color: var(--textColour);
}

/* @keyframes pulse1 {
  0%, 100% { height: 100px; width: 300px;}
  50%      { height: 130px; width: 330px;}
} */

@keyframes pulse2 {
  0%, 100% { font-size: 1.4rem; }
  50%      { font-size: 1.8rem; }
}

@keyframes pulse3 {
  0%, 100% { font-size: 1.5rem; }
  50%      { font-size: 1.9rem; }
}


.tuitive-advantage{
    justify-content: center;
    align-self: center;
    text-align: center;
    width: 100vw;
    justify-self: center;
    padding: 40px 0;

}

.tuitive-advantage > p {
    margin: 0;
    max-width: 85%;
    padding: 50px 0px;

}

points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-self: center;
    margin-bottom: 60px;
    width: 100vw;
    justify-self: center;
}

point {
    font-size: 18px;
    text-align: left;
    border-left: solid 4px var(--brandGreen);
    padding: 20px;
    justify-self: center;
}

point > strong {
    font-size: 21px;
}

.advantage {
    /* width: 100%; */
    /* position: sticky */
}

.text-content > p {
    padding: 0px;
}

.quote {
    padding: 40px;
    margin-top: 60px;
}

.cta-intro {
    margin-bottom: 40px;
    justify-self: center;
}
@media (max-width:1024px) {

     h4 {
        width: 85%;
        max-width: 38ch;
        justify-self: center;
    }

    .about-us > p {
        text-align: justify;
        padding: 50px 0px;
    }

    p {
        text-align: justify;
        justify-self: center;
    }

    .quote {
        margin: 30px 0px;
    }

    .subjects-offered, points {
        grid-template-columns: 1fr 1fr ;
        
    }

    subject:nth-of-type(2n+1), points:nth-of-type(2n+1) {
        grid-column: 1;
    }
    subject:nth-of-type(2n), point:nth-of-type(2n) {
        grid-column: 2;
    }



    
}

@media (max-width:768px) {
        .subjects-offered, points{
        grid-template-columns: 1fr  ;
        gap: 0px;
        row-gap: 30px;
    }

        subject:nth-of-type(2n), point:nth-of-type(2n) {
        grid-column: 1;
        justify-self: center;
    }

    points {
        column-gap: 0px;
        justify-self: center;
    }

    point {
        padding: 15px 7px;
    }
}