* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--primary-font)
}


body {

    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0
    
}


.container {
   flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content */
    max-width: 100%;
    max-width: 1920px;
    padding:0;
    margin:0 auto;


}

.top-bar-left a img{
    width: 150px;
}

.container, section {
   width: 100%;
    margin: 0 auto;
}
/*-----------hero image-------------*/
.hero {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    
    align-items: center;
    justify-content: center;
    padding: 20px;

    height: 700px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 100%), rgba(0, 0, 0, 40%), rgba(0, 0, 0, 0%)), url("../images/Paachal-header.png");

}



/*-----------hero text content-------------*/
.hero-content {
    width: 90%;
    color: white;
    text-align: center;
    font-family: var(--primary-font);
    
    

}

.hero-content h1 {

    font-size: 4rem;
    font-weight: 700;
    text-wrap: nowrap;
    color: white;

}

.hero-content p {
    margin: 10px auto;
    font-size: 24px;
    text-wrap: wrap;
    color: white;
    text-align: center;
    width: 55%;
    line-height: 25px;

}


/*--------stats bar----------------*/
.stats {
width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-primary);

    height: 120px;
    
    /*
    position: relative;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    */



}


.stat-text {
max-height: 90%;
    max-width: 25%;
    text-align: center;
    color: white;
        /*border: 1px solid blue;*/
    margin: auto auto;
    overflow: hidden
}

.stat-text h3 {
    font-family: mulish;
    font-size: 1.4rem;
    font-weight: 700;
}

.stat-text p {
    font-size: 14px;
    text-wrap: wrap;
    color: white;
    text-align: center;
}


/*------------About intro--------------*/

#about-intro {
    width: 100%;
    padding: 20px;
    background: white;
    display: flex;
    margin: 50px 0;
}

.intro-photo img{
    
}






.intro-photo {
       flex-basis: 50%;
    padding: 0 50px 0 0 ;
}
.intro-photo img {
     max-width: 100%;
  height: auto;

}
.text-side {
    flex-basis: 50%;
    padding: 0 0 0 50px;
}

.text-side h3 {
    color: var(--color-primary);
    font-size: 24px;
    text-transform: uppercase;
    line-height: 32px;
}

.text-side p {
    color: var(--color-secondary);
    font-size: 16px;
    line-height: 32px;
}

.text-side .button a {
    text-decoration: none;
    color: white;
    font: 16px;
    font-weight: 600;
     padding: 10px 20px;    
}


.text-side .button {
    text-decoration: none;
    text-align: center;
    
    margin-top: 20px;
    background: var(--color-primary);
    color: white;
    
    width: 100%;
    height: 40px;
    padding: 10px 14px;
    border: 1px solid var(--color-primary);
    transition: 0.3s all ease-in-out;

}

.text-side .button:hover {

    background: var(--color-secondary);

    border: 1px solid var(--color-primary);

}

/*---------- Programs-------------*/

#programs h1 {
    margin: 0 auto;
    font-size: 32px;
    font-weight: 600;
    color: white;
    text-align: center;
}





.sub-prg-1-1-text p{
    text-align: center;
     
    
}


.accordion-t p {
    color: var(--color-secondary);
}

#programs {
width: 100%;
    padding: 50px 0;
    
    background-image:linear-gradient(0deg, rgba(225, 0, 0, 75%), rgba(225, 0, 0, 75%)), url('../Images/PAACHAL- AFRICA.jpg');

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    color: white;
    text-align: left;
    

}






.accordion-t {

    background: rgba(0, 0, 0, 20%);

    padding: 30px;

    max-width: 600px;
    margin: 0 auto;
    border-radius: 10px;
     
}

.option-1,
.option-2,
.option-3,
.option-4 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: white;
   position: relative;
    width: 95%;
   

}

.option-1 p,
.option-2 p,
.option-3 p,
.option-4 p {
    text-align: left;

}

.prg-1,
.prg-2,
.prg-3,
.prg-4 {
    font-weight: 600;
    display: flex;
    justify-content: space-between;

}


.prg1-text,
.prg2-text,
.prg3-text,
.prg4-text {

    opacity: 0;
    background: transparent;
    color: white;

    width: 100%;
    /*        border: 1px dashed purple;*/
    text-align: left;
    flex-basis: 80%;
    overflow-y: hidden;
    transition: 0.5s all ease-in-out;
    max-height: 0;
    position: relative;




}


.sub-prg-1-1-text p,
.sub-prg-2-1-text p,
.sub-prg-2-2-text p,
.sub-prg-3-1-text p,
.sub-prg-4-1-text p {
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--color-secondary);
}

.sub-prg-1-1-text,
.sub-prg-2-1-text,
.sub-prg-2-2-text,
.sub-prg-3-1-text,
.sub-prg-4-1-text {
    /* border:10px dashed purple;*/
    opacity: 0;
    background: white;
    color: var(--color-secondary);
    text-align: left;
    width: 100%;
    transform: translatey(-20px);
    transition: 0.5s all ease-in-out;
    max-height: 0;
    overflow-y: hidden;
    box-sizing: border-box;
    padding-right: 30px;
    padding-left: 30px;
  
}



.tab-t1,
.tab-t2,
.tab-t3,
.tab-t4 {

    border-bottom: 1px solid white;
    padding: 20px;
    height: 40px;
    width: 100%;
    text-align: left;
    flex-basis: 20%;
    
}

.tab-t1-1,
.tab-t2-1,
.tab-t2-2,
.tab-t3-1,
.tab-t4-1 {

    border-bottom: 1px solid white;
    background: rgba(108, 122, 137, 60%);
    padding: 20px 20px 35px 20px;
    height: 20px;
    width: 100%;
    text-align: left;
    color: white;
    


}



.prg1-text p,
.prg2-text p,
.prg3-text p,
.prg4-text p {
    width: 100%
}

.prg-1 {
    text-wrap: nowrap;
}

.sub-prg-1-1-text ol {
    list-style: circle;
    margin: -10px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.sub-prg-1-1-text ol li {
    margin-bottom: 10px;
}

.sub-prg-1-1,
.sub-prg-2-1,
.sub-prg-2-2,
.sub-prg-3-1,
.sub-prg-4-1 {

    display: flex;
    
    justify-content: space-between;
    padding-right: 50px;
    
 
}

.icon-arrow {
    transition: transform 0.3s ease;
}






/*-----------------------------check boxes-------------------------*/


/*-----check1------*/
#radio-check1 {
    position: absolute;
    opacity: 0;
    height: 50px;
    width: 100%;
    
}

#radio-check1:checked ~ .tab-t1 {
    color: white;
    background: rgba(0, 0, 0, 40%);

}


#radio-check1:checked ~ .prg1-text {
    opacity: 100%;
    /*    display: block;*/
    background: transparent;
    max-height: 100vh;
    transition: 0.5s all ease-in-out;

}

#radio-check1:checked + .tab-t1 label .icon-arrow {
    transform: rotate(90deg);
}

/*-----check1-1------*/
#sub-check-1-1 {
    position: absolute;
    opacity: 0;
    height:  50px;
    width: 100%;
}

#sub-check-1-1:checked ~ .tab-t1-1 {
    color: white;
    background: rgba(0, 0, 0, 40%);

}

#sub-check-1-1:checked ~ .sub-prg-1-1-text {

    opacity: 100%;
    background: white;
    color: var(--color-secondary);
    transform: translatey(0);
    transition: 0.5s all ease-in-out;
    max-height: 100vh;






}

#sub-check-1-1:checked + .tab-t1-1 label .icon-arrow {
    transform: rotate(90deg);
}

/*-----check2------*/
#radio-check2 {
    position: absolute;
    opacity: 0;
    height:  50px;
    width: 100%;
}

#radio-check2:checked ~ .tab-t2 {
    color: white;
    background: rgba(0, 0, 0, 40%);

}

#radio-check2:checked ~ .prg2-text {
    opacity: 100%;
    transition: 0.5s all ease-in-out;
    max-height: 100vh;
    background: transparent;

}

#radio-check2:checked + .tab-t2 label .icon-arrow {
    transform: rotate(90deg);
}

/*-----check2-1------*/
#sub-check-2-1 {
    position: absolute;
    opacity: 0;
    height:  50px;
    width: 100%;
}

#sub-check-2-1:checked ~ .tab-t2-1 {
    color: white;
    background: rgba(0, 0, 0, 40%);


}

#sub-check-2-1:checked ~ .sub-prg-2-1-text {
    opacity: 100%;
    background: white;
    color: var(--color-secondary);
    transform: translatey(0);
    transition: 0.5s all ease-in-out;
    max-height: 100vh;

}

#sub-check-2-1:checked + .tab-t2-1 label .icon-arrow {
    transform: rotate(90deg);
}

/*-----check2-2------*/
#sub-check-2-2 {
    position: absolute;
    opacity: 0;
    height:  50px;
    width: 100%;
}

#sub-check-2-2:checked ~ .tab-t2-2 {
    color: white;
    background: rgba(0, 0, 0, 40%);

}

#sub-check-2-2:checked ~ .sub-prg-2-2-text {
    opacity: 100%;
    background: white;
    color: var(--color-secondary);
    transform: translatey(0);
    transition: 0.5s all ease-in-out;
    max-height: 100vh;
}

#sub-check-2-2:checked + .tab-t2-2 label .icon-arrow {
    transform: rotate(90deg);
}


/*-----check3------*/
#radio-check3 {
    position: absolute;
    opacity: 0;
    height:  50px;
    width: 100%;
}

#radio-check3:checked ~ .tab-t3 {
    color: white;
    background: rgba(0, 0, 0, 40%);
}

#radio-check3:checked ~ .prg3-text {
    opacity: 100%;
    background: transparent;
    transition: 0.5s all ease-in-out;
    max-height: 100vh;

}

#radio-check3:checked + .tab-t3 label .icon-arrow {
    transform: rotate(90deg);
}

/*-----check3-1------*/
#sub-check-3-1 {
    position: absolute;
    opacity: 0;
    height:  50px;
    width: 100%;
}

#sub-check-3-1:checked ~ .tab-t3-1 {
    color: white;
    background: rgba(0, 0, 0, 40%);

}

#sub-check-3-1:checked ~ .sub-prg-3-1-text {
    opacity: 100%;
    background: white;
    color: var(--color-secondary);
    transform: translatey(0);
    transition: 0.5s all ease-in-out;
    max-height: 100vh;
}

#sub-check-3-1:checked + .tab-t3-1 label .icon-arrow {
    transform: rotate(90deg);
}

/*-----check4------*/

#radio-check4 {
    position: absolute;
    opacity: 0;
    height:  50px;
    width: 100%;
}

#radio-check4:checked ~ .tab-t4 {
    color: white;
    background: rgba(0, 0, 0, 40%);

}

#radio-check4:checked ~ .prg4-text {
    opacity: 100%;
    background: transparent;
    transition: 0.5s all ease-in-out;
    max-height: 100vh;


}

#radio-check4:checked + .tab-t4 label .icon-arrow {
    transform: rotate(90deg);
}

/*-----check4-1------*/
#sub-check-4-1 {
    position: absolute;
    opacity: 0;
    height:  50px;
    width: 100%;
}

#sub-check-4-1:checked ~ .tab-t4-1 {
    color: white;
    background: rgba(0, 0, 0, 40%);

}

#sub-check-4-1:checked ~ .sub-prg-4-1-text {
    opacity: 100%;
    background: white;
    color: var(--color-secondary);
    transform: translatey(0);
    transition: 0.5s all ease-in-out;
    max-height: 100vh;
}

#sub-check-4-1:checked + .tab-t4-1 label .icon-arrow {
    transform: rotate(90deg);
}



/*==========================GET INVOLVED=================*/
.get-involved-content {
    margin: 100px auto;
    width: 80%;
}

/*-------------------------Partnership-----------------*/


.partnership-content h1 {
    margin: 0 auto;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-secondary);
    text-align: center;

}

.Partner-head-text {
    width: 50%;
    text-align: center;
    margin: 20px auto;

}

#partner-container {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 20px;
    padding-bottom: 50px;
}

.partners {
    
    max-width: 30%;
    background: linear-gradient(0deg, rgba(225, 0, 0, 10%), rgba(225, 0, 0, 10%));
    
    padding: 20px;
    
}

.partners h2 {
    font-weight: 800;
    line-height: 20px;
    text-align: center;

}

.partners p {
    color: var(--color-secondary);
    line-height: 20px;
    text-align: center;
    font-size: 16px;

}

.partnership-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}


/*-------------------------DONATE-----------------*/


#donate {
    width: 100%;
    background: var(--color-primary);
    padding: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
}





.donate-header h1 {
    font-weight: 800;
    font-size: 32px;
    padding: 30px 30px 0 30px;
    color: yellow;

}

.donate-header p {
    color: white;
    font-size: 16px;
    padding: 0 30px 0 30px;
}


.donate-box {
    border-radius: 20px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%));
    
    display: flex;
   
  
}
.donate-photo-side {
     flex-basis: 50%;
   display: grid;
  grid-template-rows: 400px 1fr;
   
}
.donate-photo-side-img {
     background-image: url("../images/Paachal-donate.png");
   background-position: center;
    background-size: stretch;
    transform: scale(0.9,0.9);
    background-repeat: no-repeat;
    overflow: hidden;
     max-width: 100%;
  height: auto;
    
    
}

.donate-img img{
     max-width: 100%;
    height: auto;
}

.donate-photo-side-parag {
   color: white;
    padding:0 30px 30px 30px;

}

.donate-photo-side-parag  p, .donate-header p{
    line-height: 1.8rem;
}


.donate-container {
    flex-basis: 50%;
     display: flex;
    flex-direction: column;

    background: linear-gradient(0deg, rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%));
    border-radius: 0 20px 20px 0;
    margin: 0 auto;
  
}
.donate-header {
    /*    background: rgba(0, 0, 0, 20%);*/
    width: 100%;

}
.payment-method {
    padding: 20px 30px 20px 30px;
    color: white;
    

}



.payment-method h2 {
    color: yellow;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
}

.don-type1 {
    padding: 20px 30px 5px 0;
}

.T-A {
    color: white;
    padding: 10px 30px 20px 30px;
    background: rgba(255, 250, 250, 20%);
    margin-top: 20px;

}

.T-A p {
    font-size: 12px;
}

.donation-type {
    padding: 20px 30px 20px 30px;
    background: rgba(0, 0, 0, 20%);
}

.donation-type-1 {
    padding-top: 30px;
}



.donate-btn-con a {
    text-decoration: none;
    color: white;
}

.donate-box-btn-1 a {
    margin-top: 30px;
    text-align: center;
    align-content: center;
    color: white;
    font-weight: 800;
    font-size: 18px;
    background: var(--color-primary);
    width: 1fr;
    padding: 15px;
    cursor: pointer;
    display: none;
}

.donate-box-btn-2 a {
    margin-top: 30px;
    text-align: center;
    align-content: center;
    color: white;
    font-weight: 800;
    font-size: 18px;
    background: var(--color-primary);
    width: 1fr;
    padding: 15px;
    cursor: pointer;
    display: none;
}

.donate-box-btn-3 a {
    margin-top: 30px;
    text-align: center;
    align-content: center;
    color: white;
    font-weight: 800;
    font-size: 18px;
    background: var(--color-primary);
    width: 1fr;
    padding: 15px;
    cursor: pointer;
    display: none;
}

#pay-type1:checked ~ .donate-btn-con .donate-box-btn-1 a {
    display: block;

}

#pay-type2:checked ~ .donate-btn-con .donate-box-btn-2 a {
    display: block;

}

#pay-type3:checked ~ .donate-btn-con .donate-box-btn-3 a {
    display: block;

}



/*---hover donate-----*/

.donate-box-btn-1 a:hover {

    background: white;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);


}

.donate-box-btn-2 a:hover {

    background: white;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);


}

.donate-box-btn-3 a:hover {

    background: white;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);


}





#volunteer {
    width: 100%;
    padding-bottom: 50px;
    background: rgba(10, 5, 3, 10%);
   display: flex;
    
}

.volunteer-container {
    margin: 100px auto;
    width: 80%;
    display: flex;
    justify-content: space-around;
    padding: 0 50px 50px 50px ;
    /*    border: 1px solid red;*/
}


.volunteer-text-side {
    
    flex-basis: 50%;
    padding:  60px 30px 30px 30px;

}

.volunteer-text-side h3 {
    color: var(--color-primary);
    font-size: 24px;
    text-transform: uppercase;
    line-height: 32px;
}

.volunteer-text-side p {
    color: var(--color-secondary);
    font-size: 16px;
    line-height: 32px;
}

.volunteer-text-side ol {
    color: var(--color-secondary);
    font-size: 16px;
    line-height: 32px;
    list-style: circle;
    padding-left: 20px;
}

.volunteer-text-side ol li {

    padding: 5px 0;
}


.volunteer-text-side .button-v a {
    text-decoration: none;
    color: white;
    font: 16px;
    font-weight: 600;
     padding: 10px 20px;    
}


.volunteer-text-side .button-v {
    text-decoration: none;
    text-align: center;
    width: 100%;
    
    margin-top: 20px;
    background: var(--color-primary);
    color: white;
    
   
    /*height: 70px;*/
    padding: 10px 14px;
    border: 1px solid var(--color-primary);
    transition: 0.3s all ease-in-out;

}

.volunteer-text-side .button-v:hover {

    background: var(--color-secondary);

    border: 1px solid var(--color-primary);

}

strong {
    font-weight: 600;

}


.volunteer-photo {

    
    flex-basis: 50%;
    padding:  60px 0 0 0;

   
}
.volunteer-photo img{
 max-width: 100%;
    height: auto;}



/*--------------footer-----------------*/
.footer-container {
    width: 100%;
    padding: 20px;
    background: var(--color-secondary);
    color: white;

    display: flex;
     font-family: var(--primary-font);
    justify-content: space-around;


}

.socials {
    flex-basis: 30%;
    font-size: 14px;

}

.socials a i {
    padding-top: 10px;
    padding-right: 15px;
    font-size: 30px;
    color: white;
    transition: 0.3s all ease;

}

.socials a i:hover {

    color: white;
    font-size: 35px;
    transition: 0.3s all ease;

}

.footer-about-us ol li a,
.footer-Programs ol li a,
.donate-volunteer ol li a {
    list-style: none;
    text-decoration: none;
    color: white;
    font-size: 14px;
    transition: 0.3s all ease;
}

.footer-about-us ol li a:hover,
.footer-Programs ol li a:hover,
.donate-volunteer ol li a:hover {

    color: yellow;
    transition: 0.3s all ease;
    font-size: 16px;
}


.footer-about-us ol li,
.footer-Programs ol li,
.donate-volunteer ol li {
    Padding-top: 20px;
}


.footer-about-us h1,
.footer-Programs h1,
.donate-volunteer h1 {
    font-weight: 800;
    color: red;
}

.footer-about-us {
 
    flex-basis: 20%;

}

.footer-Programs {
    flex-basis: 20%;
    list-style: none;
    text-decoration: none;
}

.donate-volunteer {
    flex-basis: 20%;
}

.copy-right {
    width: 100%;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 15px;
    border-top: 1px solid white;
    background: var(--color-secondary);
    color: white;
     font-family: var(--primary-font);
    
   
}

/*--------------About Prof Awoyemi-----------------*/

.prof-intro-photo {
 
    flex-basis: 50%;
   
}
prof-intro-photo img{
    max-width: 100%;
    height: auto;
}
.prof-intro-photo img{
    max-width: 100%;
  height: auto;
}

.prof-text-side {
    flex-basis: 50%;
    padding: 0 0 0 30px;
    display: flex;
    flex-direction: column;
}

.prof-about-container {
    margin: 0 auto 10px auto ;
    width: 100%;
/*    padding: 0 20px;*/
    background: white;
    display: flex;
   
    
    padding: 50px ;
}

.prof-about-intro {

    width: 100%;
    padding: 0 20px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    align-items: center;
}



.prof-text-side h2 {
    color: var(--color-primary);
    font-size: 24px;
    text-transform: uppercase;
    line-height: 32px;
}


.prof-text-side p {
    color: var(--color-secondary);
    font-size: 16px;
    line-height: 32px;
}


.prof-text-side button:hover {

    background: var(--color-secondary);

    border: 1px solid var(--color-primary);

}

.prof-hero-content {
    width: 90%;
    color: white;
    position: absolute;
    top: 22.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: var(--primary-font);
}

.prof-hero {
    position: static;
    height: auto;
    max-width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 100%), rgba(0, 0, 0, 40%), rgba(0, 0, 0, 0%)), url("https://media.istockphoto.com/id/156731127/photo/african-child-getting-a-vaccine.jpg?s=1024x1024&w=is&k=20&c=h3OH6ULy_Veb7qxSr0vRBenvaHexKdhLkvJWWI6l3fc=");

}

.prof-hero-content h1 {

    font-size: 4rem;
    font-weight: 700;
    text-wrap: nowrap;
    color: white;

}

.prof-hero-content p {
    margin: 0 auto;
    font-size: 16px;
    text-wrap: wrap;
    color: white;
    text-align: center;
    width: 55%;

}

.prof-intro-para {
    border-bottom: 1px solid rgba(0, 0, 0, 10%);
    padding-bottom: 10px;
}

.prof-subsection {
    display: flex;
    position: relative;

}

.prof-education {

    height: 100%;
    opacity: 0;
    max-width: 520px;
    position: absolute;
    overflow: hidden;
    text-wrap: no-wrap;
    transition: 0.3s all ease-in-out;
    
    

}

.prof-early-career
    {
margin-left: -104px;
    height: 0%;
    opacity: 0;
    max-width: 520px;
    position: absolute;
    overflow: hidden;
    text-wrap: no-wrap;
    transition: 0.3s all ease-in-out;

}

.prof-achievement {
margin-left: -183px;
    height: 0%;
    opacity: 0;
    max-width: 520px;
    position: absolute;
    overflow: hidden;
    text-wrap: no-wrap;
    transition: 0.3s all ease-in-out;

}

.prof-education-label,
.prof-career-label,
.prof-achievement-label {
    background: transparent;
    padding: 15px;
    border-radius: 25px;
    color: var(--color-secondary);

}
.prof-education-label:hover,
.prof-career-label:hover,
.prof-achievement-label:hover {
    background:  rgba(0,0,0,10%);
    
    color: var(--color-secondary);

}

#prof-education1,
#prof-career1,
#prof-achievement1 {
    position: absolute;
    opacity: 0;
    height: 30px;
    width: 100px;
    z-index: 10;
}


.prof-option1,
.prof-option2,
.prof-option3 {
    margin: 20px 0 150px 0;
    padding-top: 15px;
/*    position: relative;*/
    
}


/*====================checks=====================*/

/*------------------option1-----------------*/
#prof-education1:checked + .prof-education-label {
    background: var(--color-primary);
    padding: 15px;
    border-radius: 25px;
    color: white;

}

#prof-education1:checked ~ .prof-achievement + .prof-early-career {
    display: none;
}

#prof-education1:checked ~ .prof-education {

    padding-top: 20px;
    
    opacity: 100%;
    text-wrap: no-wrap;
    max-width: 520px;
    transition: 0.3s all ease-in-out;
    height: 250%;
/*    background: blue;*/
}

/*------------------option2-----------------*/
#prof-career1:checked + .prof-career-label {
    background: var(--color-primary);
    padding: 15px;
    border-radius: 25px;
    color: white;

}

#prof-career1:checked ~ .prof-education + .prof-achievement {
    display: none;
}

#prof-career1:checked ~ .prof-early-career {
    margin-left: -104px;
    padding-top: 20px;
    height: 200%;
    
    opacity: 100%;
    text-wrap: no-wrap;
    max-width: 520px;
    transition: 0.3s all ease-in-out;
}

/*------------------option3-----------------*/
#prof-achievement1:checked + .prof-achievement-label {
    background: var(--color-primary);
    padding: 15px;
    border-radius: 25px;
    color: white;

}

#prof-achievement1:checked ~ .prof-education + .prof-early-career {
    display: none;
}

#prof-achievement1:checked ~ .prof-achievement {
    margin-left: -183px;

    padding-top: 20px;
    height: 200%;
    
    opacity: 100%;
    text-wrap: no-wrap;
    max-width: 520px;
    transition: 0.3s all ease-in-out;
}
/*===================other text=====================*/
.prof-other-text {
      margin: 250px auto 0 auto;
    width: 100%;
    padding: 50px 50px 0 50px;
}

.prof-continuation {
    padding: 0 30px;
    color: var(--color-secondary);
/*    text-align: justify;*/
}.prof-continuation h3{
    
    color: var(--color-primary);
    font-size: 24px;
    text-transform: uppercase;
    line-height: 32px;
    text-align: center


    
}.prof-continuation p{
      color: var(--color-secondary);
    font-size: 16px;
    line-height: 32px;
}



.program-subheader {
    margin: 10px auto;
    text-align: center;
    width: 50%
}







#Get-involved {
    margin: 50px 0;
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: white;
}

.partnership-heading {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    
}

.donate-img {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-basis: 50%;
}