.problem-and-solution,
.benefits,
.social-proof,
.previous-work,
.cta,
.events {
    padding: 15% 0;



}

.problem-and-solution {
    padding-bottom: 0%;
    padding-top: 5%;
}

.home-hero {

    background-image: linear-gradient(var(--hero-background-overlay-color), var(--hero-background-overlay-color)), url("/beta/images/compressed/background.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: blue;
    color: var(--text-color-one);

    display: flex;
    align-items: center;
    border-bottom: 4px solid var(--border-color);
    padding-bottom: 10%;


    padding: 10% 0 14% 0;

}




.home-hero__text {
    height: fit-content;

}

.home-hero__left-side {
    padding-top: 5rem;
    margin-left: 15rem;
    margin-right: 15rem;

}


.home-hero__main-header {
    font-weight: 400;
    font-size: var(--h1-size);
    max-width: 25ch;
    margin-left: auto;

}

.home-hero__sub-header {
    font-size: var(--h2-size);
    max-width: 25ch;
    margin-top: 5rem;
    text-wrap: balance;


}

.home-hero__cta-button-parent {

    margin-top: 2rem;
    width: fit-content;


}

.home-hero__cta-button {
    padding: 4rem 10rem;

    font-size: var(--paragraph-size);

}

@media (max-width:1200px) {
    .home-hero__left-side {
        margin-left: auto;
        margin-right: auto;
    }

    .home-hero__main-header,
    .home-hero__sub-header {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .home-hero__cta-button-parent {
        margin-left: auto;
        margin-right: auto;

    }

}

section {
    margin: 0 0rem;
}

br {
    margin: 0.75rem 0;
}

.problem-and-solution {


    background-color: var(--background-color-one);
    color: var(--text-color-one);

    justify-content: space-evenly;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    gap: 2rem;
    align-items: center
}

@media (max-width:1300px) {
    .problem-and-solution {
        flex-wrap: wrap-reverse;
    }
}

.problem-and-solution__image img {
    width: 100%;

}

.problem_and_solution__text-panel {


    padding: 0rem 5rem;
    padding-bottom: 5rem;
    width: fit-content;
}

.problem_and_solution__text--problem h3,
.problem_and_solution__text--solution h3 {

    font-size: var(--h3-size);
    margin-bottom: 2rem;
    margin-top: 2rem;
    font-weight: bold;
}

.problem_and_solution__text--problem p,
.problem_and_solution__text--solution p {
    font-size: var(--paragraph-size);
    max-width: 75ch;
}


.benefits {
    color: var(--text-color-one);
    background-color: var(--background-color-one);
    padding-top: 0%;
    padding-bottom: 5%;
}

.benefits h3 {
    font-size: var(--h3-size);
    text-align: center;
    font-weight: bold;
}

.benefits__columns {
    margin: 0 auto;
    width: 70%;
    gap: 5rem;
    justify-content: space-evenly;

}

.benefits__column {
    width: fit-content;
   
    margin: 5rem auto;
}

.benefits__column-heading {
    position: relative;
}

.benefits__column-text {

    transition: 0.5;

}

.benefits__column {
    position: relative;

}

.benefits__column-heading {
    position: relative;
  
    cursor: pointer;
}

.benefits__column-heading::before {
    content: '+';
    color: white;
    position: absolute;
    top: 50%;
    right: -5px;
    font-size: 30px;
    transform: translateY(-50%);
}


.head.active::before{
content:'-';
}
.benefits__column-heading {
    font-size: var(--h4-size);
    font-weight: bold;
}

.benefits__column-text {
    font-size: var(--paragraph-size);
    max-width: 65ch;
    position:relative;
    height: 0px;
    overflow:hidden;
    transition: 0.5s;
}
  .benefits__column-text.toggle.active{
    height:150px;
}

.social-proof {
    background-color: var(--background-color-two);
    color: var(--text-color-two);
    padding-top: 5%;
}

.social-proof__clients-this-year {


    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    margin-bottom: 5rem;
}

.social-proof__heading {
    font-size: var(--h2-size);
    margin-bottom: 5rem;
    text-align: center;
}

.social-proof__client-number {
    font-size: var(--super-large);

    width: fit-content;

}

.social-proof__number-description {
    font-size: var(--paragraph-size);
    margin-top: 3rem;
    vertical-align: middle;
}

.social-proof__client-header {
    font-size: var(--h3-size);
    text-align: center;
}

.social-proof__icon {
    background-color: blue;
    width: 10rem;
    height: 10rem;
    border-radius: 60%;
}

.social-proof__company-icons {


    width: 50rem;
    margin: 5rem auto 0 auto;
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}


.events {

    flex-wrap: wrap;
    gap: 4rem;
    background-color: var(--background-color-two);
    color: var(--text-color-two);
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    padding: 0 5rem;

}

.events__heading-parent {
    flex: 1;
    font-size: var(--super-large);

    text-align: right;


}

@media(max-width:1300px) {
    .events__heading-parent {
        text-align: center;
    }
}

.events__heading-parent h3 {
    font-weight: 100;
    text-align: center;
}

.events__calendar-parent {
    position: relative;
    height: 0;
    width: 75%;
    margin: 0 auto;
    padding-bottom: 56.25%;
    margin-top: 5rem;


}

.events__calendar-parent iframe {
    width: fit-content;
    margin: 0 auto;
}

@media (max-width: 1000px) {
    .events__calendar-parent {
        width: 90%;
        padding-bottom: 56.5%;
    }

    .events {
        padding-left: 2rem;
        padding-right: 2rem;
        ;
    }
}

@media(min-width:1500px) {
    .events__calendar-parent {
        width: 50%;
    }
}

.events__calendar-parent iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.cta {

    background-color: var(--background-color-two);
    color: var(--text-color-two);


    padding-left: 2rem;
    padding-right: 2rem;


}

.cta__cta-parent {
    width: fit-content;
    margin: 0 auto;
}

.cta__left {

    font-size: var(--h3-size);
    max-width: 50ch;
    text-align: center;
}

.cta__button-parent {
    margin: 0 auto;
    width: fit-content;
}

.cta__button {
    padding: 4rem 8rem;
    font-size: var(--h2-size);
}

.cta__button:focus {
    outline: 0.8rem solid black;
}

.cta__button:active {
    outline: none;

}