:root {
--pmain: #a25f2d;
--psurface: #fbfbfb;
--pborder: #ecdfd5;
--phover: #874f26;
--ppressed: #36200f;
--pfocus: #b17a50;

--smain: #36200f;
--ssurface: #d7d2cf;
--sborder: #bcb5af;
--shover: #24150a;
--spressed: #201309;
--sfocus: #d7d2cf;
}

html, body {
font-family: Poppins, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
scroll-behavior: smooth;
/* color: #ffd700; */
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
transition: all 0.2s ease-in;
scroll-behavior: smooth;
}

body {
overflow-x: visible;
}

header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #ffffffcc;
backdrop-filter: blur(5px);
padding-left: 40px;
padding-right: 30px;
justify-content: space-between;
width: 100%;
height: 95px;
z-index: 300;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
will-change: transform;
}

.logo-container, .button-container {
padding-top: 0.9rem;
padding-bottom: 0.9rem;
}

.logo {
height: 75px;
width: 149px;
aspect-ratio: 6 / 9;
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
}

.links {
display: flex;
flex-direction: row;
gap: 28px;
font-size: 15px;
height: 100%;
align-items: center;
}

.links a:not(.active) {
cursor: pointer;
letter-spacing: 0.8px;
color: black;
}

.links a {
text-align: center;
}

.links a:hover {
color: #a25f2d;
}

.active {
color: #a25f2d;
text-decoration: #a25f2d underline;
text-underline-offset: 4px;
font-weight: bold;
}

.button {
background-color: #a25f2d;
color: white;
border: 1px solid transparent;
padding: 14px 35px;
border-radius: 28px;
font-size: 16px;
cursor: pointer;
z-index: 2;
animation-delay: 1.6s;
}

.button:hover {
background-color: transparent;
border: 1px solid #fdfdfd;
}

.button2 {
background-color: transparent;
border: 1px solid #fdfdfd;
padding: 14px 35px;
border-radius: 28px;
font-size: 16px;
color: white;
cursor: pointer;
z-index: 2;
}

.button2:hover {
background-color: #a25f2d;
color: white;
border: 1px solid transparent;
}

.cta:hover, .popup .button:hover, form .button:hover, .btns .button:hover {
background-color: transparent;
border: 1px solid #000000;
color: #000000;
}

.menu-bar {
display: none;
}

.menu-bar div {
height: 3px;
width: 32px;
background-color: #a25f2d;
transition: .45;
position: relative;
right: -1px;
border-radius: 52px;
cursor: pointer;
}

.menu-bar div:not(:last-child) {
margin-bottom: 5px;
}

.menuAccordion {
height: 100%;
width: 90%;
position: fixed;
top: 0;
bottom: 0;
background-color: white;
z-index: 10000;
right: -700px;
overflow-y: auto;
scroll-behavior: smooth;
transition: 0.5s;
display: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

body.activeSlide .menuAccordion {
right: 0;
}

.menuHeader {
padding: 0.9rem;
padding-left: 14px;
padding-right: 21px;
height: 75px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-weight: bold;
border-bottom: 1px solid #000000;
overflow: hidden;
}

.menuHeader p {
font-size: 22px;
color: #36200f;
}

.menu-cross div {
height: 4px;
width: 26px;
background-color: #874f26;
transition: .45;
position: relative;
border-radius: 68px;
cursor: pointer;
}

summary {
display: block;
}

.menuDropdown:hover {
text-decoration: none;
/* background-color: red; */
}

.menulinks {
display: flex;
flex-direction: column;
padding-top: 8px;
gap: 3px;
padding-left: 10px;
}

.menulinks a, .sturborn a {
font-weight: normal;
color: #000000;
}

.one {
transform: rotate(132deg);
position: relative;
background-color: white;
top: 4px;
}

.twO {
transform: rotate(-134deg);
position: relative;
}

.goto {
display: flex;
flex-direction: column;
gap: 24px;
padding-left: 24px;
padding-top: 36px;
padding-bottom: 32px;
}

.goto a {
font-size: 18px;
font-weight: bold;
color: #874f26;
text-underline-offset: 4px;
}

.goto a:hover {
text-decoration: 3px solid #874f26 underline;
}

.btns {
padding-inline: 24px;
display: flex;
flex-wrap: wrap;
gap: 32px;
}

.btns .button {
width: 100%;
text-align: center;
}

.accord {
text-align: center;
align-items: center;
justify-content: center;
width: 100%;
}

h1, h2, h3, h4 {
font-family: "Inter", sans-serif;
z-index: 2;
}

p {
text-wrap: pretty;
}

a {
color: white;
user-select: none;
}

button, img {
user-select: none;
}

.hero {
background-image: url("Whiteafrika.webp");
background-color: white;
scroll-behavior: auto;
color: white;
object-fit: cover;
background-size: cover;
object-position: center;
background-repeat: none;
height: 100svh;
margin-top: 95px;
padding-top: 130px;
padding-inline: 5px;
position: relative;
z-index: 1;
}

.dropdown, .dropdown2, .dropdown3 {
position: relative;
display: flex;
align-items: center;
padding-top: auto;
padding-bottom: auto;
float: left;
height: 100%;
}

.dropdown:hover .about-link, .dropdown2:hover .program-link, .dropdown3:hover .media-link {
color: #a25f2d;
text-align: left;
}

.open {
padding: 20px;
flex-direction: column;
background-color: #fff;
width: 208px;
height: auto;
position: absolute;
top: 94px;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
border-radius: 5px;
display: none;
transition: .3s;
}

.open a:not(:last-of-type) {
padding-bottom: 8px;
}

.open a:hover {
padding-left: 10px;
}

.dropdown:hover .about-content, .dropdown2:hover .program-content, .dropdown3:hover .media-content {
display: block;
}

.about-link a, .program-link a, .media-link a {
display: block;
color: #000000;
}

.open a {
display: block;
text-align: left;
color: #000000;
}

.about-content {
transform: translateX(-6%);
}

.program-content {
transform: translateX(-6%);
}

.media-content {
transform: translateX(-6%);
}

h1 {
font-size: 64px;
text-align: center;
letter-spacing: 2px;
/* font-size: clamp(34px, 6svw, 64px); */
line-height: 84px;
z-index: 2;
animation: fader ease 2.8s;
animation-iteration-count: 1;
animation-fill-mode: both;
animation-delay: 0.7s;
}
@keyframes fader {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.overlay {
border-image:
linear-gradient(#00000098, #00000098) fill 1;
}

.hero p, .hero1 p {
text-align: center;
letter-spacing: 0.6px;
padding-top: 40px;
padding-inline: 200px;
font-size: 17px;
line-height: 25px;
animation-delay: 1.4s;
}

.hero .button, .hero .button2 {
transform: translateY(50px);
filter: blur(24px);
opacity: 0;
animation: revealText 0.7s 1s linear 1 forwards;
/* animation: revealText 0.5s 1s linear 1 forwards; */
animation-delay: 1.3s;
}
@keyframes revealText {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

.hero div {
padding-top: 40px;
text-align: center;
display: flex;
gap: 12px;
justify-content: center;
}

.hero span {
color: white;
z-index: 2;
animation: colorFading 0.5s 1s linear 1 forwards;
animation-delay: 1.2s;
}
@keyframes colorFading {
    to {
        color: #a25f2d;
    }
}

.numbers {
padding-top: 70px;
padding-bottom: 70px;
padding-inline: 120px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
text-align: center;
background-color: white;
}

.numbers div {
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: space-between; */
justify-content: center;
gap: 15px;
padding-inline: auto;
color: #36200f;
/* border: 1px solid red; */
/* will-change: contents; */
/* width: 300px; */
/* background-color: red; */
}

/* .changingNumbers,  */
/* .numbers span {
font-size: 20px;
font-weight: bold;
} */

.numbers div span {
font-size: 18px;
font-weight: 500;
}

.changingNumbers {
font-size: 30px!important;
/* color: red; */
font-weight: bold!important;
}

.numbers img {
background-size: cover;
object-fit: cover;
height: 30px;
}

.about {
padding-top: 80px;
padding-bottom: 80px;
padding-inline: 105px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 36px;
background-color: #ecdfd5;
font-size: 16px;
}

.about img {
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
height: 432px;
width: 424px;
border-radius: 5px;
}

.about p:not(:first-of-type), .donate p:not(:first-of-type), .vision-mission p:not(:first-of-type), .applications p:not(:first-of-type) {
max-width: 65ch;
}

.h2intro, .do .h2intro {
font-weight: bold;
font-size: 21px;
padding-bottom: 5px;
color: #a25f2d;
}

h2 {
font-size: 50px;
padding-bottom: 14px;
color: #36200f;
}

section p:not(:first-of-type) {
padding-bottom: 12px;
font-size: 17px;
line-height: 26px;
letter-spacing: 0.5px;
word-spacing: 5px;
}

.customizedlink {
font-size: 17px;
color: #a25f2d;
text-decoration: underline;
letter-spacing: 0.5px;
text-underline-offset: 0.6px;
}

.customizedlink a {
margin-top: 20px;
}

.customizedlink:hover {
color: #874f26;
}

.donate {
padding-top: 70px;
padding-bottom: 70px;
padding-inline: 100px;
display: flex;
justify-content: space-between;
/* background-color: white; */
gap: 28px;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: white;
overflow: hidden;
background-image: url("weed.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
object-fit: cover;
}

.donate img {
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
height: 380px;
width: auto;
border-radius: 5px;
padding-top: auto;
padding-bottom: auto;
transition: 0.7s;
}

.donateImage {
display: flex;
align-items: center;
justify-content: center;
}

.donate p, .donate h2 {
color: white;
}

.donateDiv {
scale: .8;
opacity: 0;
animation: fade linear forwards;
animation-timeline: view(y);
animation-range: 250px 400px;
}
@keyframes fade {
    to {scale: 1;
        opacity: 1;
    }
}

.vision-mission {
padding-top: 70px;
padding-bottom: 70px;
padding-inline: 110px;
display: none;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 36px;
background-image: url("smile.jpg");
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
background-attachment: fixed;
height: fit-content;
color: white;
}

.vision-mission h2 {
color: white;
}

.whatwedo {
padding-top: 70px;
padding-bottom: 70px;
padding-inline: 105px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
background-color: white;
}

.do {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.do p {
max-width: 55ch;
}

.whatwedo p {
font-size: 16px;
}

.valuesdiv {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
justify-content: space-between;
/* background-color: red; */
align-content: center;
scroll-behavior: smooth;
/* grid-column-end: auto; */
grid-template-columns: auto auto auto;
column-gap: 32px;
row-gap: 24px;
width: 100%;
margin-top: 32px;
}

.values, .blogcontainer {
display: flex;
flex-direction: column;
}

.values h3, .blogcontainer {
margin-bottom: 8px;
}

.valuesimg, .blogcontainerimg {
height: 260px;
width: 320px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
/* border-radius: 20px; */
}

.valuestalk {
color: white;
width: 320px;
background-color: #874f26;
padding: 16px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/* height: 240px; */
}

.valuestalk p {
/* max-width: 45ch; */
font-size: 15.4px;
}

.whatwedo-link, .whatwedo-link a, .bloglink {
text-align: center;
padding-top: 24px;
}

.applications {
background-color: #ecdfd5;
padding-top: 80px;
padding-bottom: 80px;
padding-inline: 96px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 52px;
}

.applicationsdiv {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 36px;
}

.applications h3 {
font-size: 44px;
padding-bottom: 16px;
/* color: #36200f; */
}

.applications p:not(:first-of-type) {
margin-bottom: 28px;
}

.applications img {
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
height: 424px;
width: auto;
border-radius: 5px;
}

.testimonials {
padding-top: 80px;
padding-bottom: 80px;
padding-inline: 70px;
/* background-color: red; */
}

.testimonialsh2-p {
padding-inline: 70px;
margin-bottom: 30px;
}

.container-wrapper {
overflow: hidden;
max-width: 1100px;
margin: 0 60px 35px;
padding: 20px 10px;
}

.video {
display: flex;
flex-direction: column;
gap: 0;
user-select: none;
transition: 0.2 ease;
}

.testimonialsContainer .container-wrapper .video:active {
cursor: grabbing;
}

iframe, .video img {
aspect-ratio: 16 / 9;
width: 100%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
margin-bottom: 0;
}

.videotalk {
color: white;
width: 100%;
background-color: #874f26;
padding: 16px;
margin-top: -8px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}

.videotalk p {
font-size: 16px;
}

.videotalk p:nth-child(2) {
font-weight: bold;
margin-top: 2px;
}

.swiper, .swiper-wrapper {
width: 100%;
}

.container-wrapper .arrow-nav {
color: #874f26;
font-size: 18px;
margin-top: -35px;
}

.container-wrapper .swiper-pagination-bullet {
height: 10px;
width: 10px;
opacity: 0.5;
background-color: #874f26;
}

.container-wrapper .swiper-pagination-bullet-active {
opacity: 1;
}

.blog {
padding-top: 80px;
padding-bottom: 80px;
padding-inline: 100px;
background-color: #ecdfd5;
}

.blogvalue {
transform: translateY(100px);
transition: cubic-bezier(0.34, 1.56, 0.64, 1);
scale: 0.5;
opacity: 0;
animation: jump 1.5s 0.2s linear 1 forwards;
/* animation: jump linear forwards; */
animation-timeline: view(y);
animation-range: 250px 400px;
}
@keyframes jump {
    to {
        opacity: 1;
        transform: translateY(0);
        scale: 1;
    }
}

/* .bv1 {
animation-delay: 1.2s;
} */

.bv2 {
animation-delay: 3s;
}

.bv3 {
animation-delay: 5.5s;
}

.blog-teaser {
color: white;
width: 320px;
background-color: white;
padding: 18px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
height: 248px;
}

.blog-teaser h4 {
color: #36200f;
margin-bottom: 12px;
}

.blog-teaser h4:hover {
color: #a25f2d;
}

.blog-teaser p, .blog-teaser span {
color: black;
}

#bloggerName {
font-size: 14px;
color: #36200f;
}

.blog-teaser p {
margin-top: 6px;
margin-bottom: 11px;
line-height: 24px;
font-size: 16px;
}

.blog-teaser link {
text-align: center;
padding-inline: auto;
}

.imgContainer {
height: 260px;
width: 320px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
max-width: 100%;
overflow: hidden;
position: relative;
transition: transform .7s ease;
}

.blog img:hover, .blog-teaser:hover ~ .blog img {
transform: scale(1.16);
transition: transform .7s ease;
}

footer {
padding-top: 80px;
padding-bottom: 60px;
padding-inline: 65px;
gap: 20px;
display: flex;
flex-direction: row;
row-gap: 32px;
justify-content: space-between;
}

.footerabout {
display: flex;
flex-direction: column;
max-width: 40ch;
gap: 24px;
}

footer a {
color: black;
}

footer p {
font-size: 17px;
padding-bottom: 12px;
line-height: 26px;
letter-spacing: 0.5px;
word-spacing: 5px;
}

.social {
display: flex;
flex-direction: row;
gap: 20px;
}

.social a {
border-radius: 50%;
background-color: #a25f2d;
padding: 16px;
height: 44px;
width: 44px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: white;
}

.footerlinks{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 35px;
}

.lastlink p {
padding-bottom: 5px;
}
.lastlink a {
/* color: #a25f2d; */
/* text-decoration: underline; */
cursor: pointer;
}
.lastlink a:hover {
color: #874f26;
}

.linkedin-integration {
width: 380px;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.foothead1, .foothead2 {
font-weight: bold;
color: #36200f;
}

.foothead2 a:hover {
text-decoration: underline #874f26;
}

.rights {
position: relative;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 18px 1px;
background-color: white;
color: #000000;
font-size: 17px;
}

.displaytoggler, .displayApplications {
display: none;
opacity: 1;
height: 100%;
width: 100%;
}

.popupdiv {
margin: auto;
background-color: #00000096;
height: 100%;
width: 100%;
z-index: 700;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: auto;
display: flex;
align-items: center;
justify-content: center;
}

.applicationpopup {
background-color: transparent;
z-index: 600;
}

.popup {
width: 600px;
height: auto;
background-color: #ffffff;
position: relative;
padding: 1.2rem;
text-align: center;
border-radius: 16px;
padding-bottom: 2rem;
}

.applydiv {
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.popup img {
height: 200px;
margin-inline: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 20px;
}

.popup p {
max-width: 65ch;
font-size: 16px;
line-height: 19px;
color: #000000;
text-wrap: pretty;
margin-bottom: 10px;
}

.popup a {
margin-top: 20px;
}

.popup h2 {
font-size: 37px;
padding-top: 24px;
}

.x {
/* background-color: tomato; */
position: absolute;
top: 1.1rem;
right: 1.1rem;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
/* font-weight: bold; */
color: #000000;
font-size: 24px;
cursor: pointer;
}

.x:hover {
background-color: tomato;
color: white;
}

.displayApplications h2 {
font-size: 28px;
}

.buttonpopup {
display: flex;
flex-direction: column;
gap: 5px;
}

.buttonpopup a {
color: black;
border: 1px solid black;
padding: 12px 32px;
border-radius: 20px;
}

.buttonpopup a:hover {
background-color: #874f26;
color: white;
border: 1px solid transparent;
}

@media screen and (max-width: 475px){
    body {
    overflow-x: hidden;
    }

    header {
    height: 75px;
    padding-left: 20px;
    padding-right: 10px;
    }

    .links {
    display: none;
    }

    .menuAccordion {
    display: block;
    }

    .menu-bar {
    display: block;
    }

    .cta {
    display: none;
    }

    .changingNumbers {
    font-size: 22px!important;
    }

    .numbers div span {
    font-size: 17px;
    }

    .hero {
    background-size: cover;
    margin-top: 75px;
    background-position: calc(29%);
    padding-top: 115px;
    padding-bottom: 56px;
    height: auto;
    }

    .hero p, .hero1 p {
    font-size: 16px;
    line-height: 22px;
    padding-top: 28px;
    padding-inline: 20px;
    }

    .hero div {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
    }

    h1 {
    font-size: 34px;
    line-height: 35px;
    }

    .numbers {
    flex-direction: column;
    gap: 28px;
    padding-top: 20px;
    padding-bottom: 20px;
    }

    .numbers div {
    gap: 5px;
    }

    .changingNumbers, .numbers span {
    font-size: 19px;
    }

    .button, .button2 {
    padding: 11px 31px;
    }

    h2 {
    font-size: 32px;
    }

    .about div {
    width: 100%;
    }

    .about img {
    width: 100%;
    }

    .about, .numbers, .applications, .blog, .whatwedo, .vision, .testimonials, .testimonialsh2-p, footer, .history {
    padding-inline: 12px;
    }

    .blog, footer, .about {
    padding-top: 36px;
    padding-bottom: 36px;
    }

    .blogdiv {
    padding-inline: none;
    /* background-color: red; */
    padding-top: 20px;
    }

    .applications h3 {
    font-size: 28px;
    padding-bottom: 12px;
    }

    .whatwedo {
    padding-top: 40px;
    padding-bottom: 30px;
    }

    .whatwedo-link, .whatwedo-link a, .bloglink {
    padding-top: 14px;
    }

    .applications {
    padding-top: 40px;
    padding-bottom: 40px;
    }

    .donate, .valuesdiv, .applicationsdiv, footer, .history {
    flex-direction: column;
    /* align-items: unset; */
    }

    .about, .do, .newhero {
    flex-direction: column;
    }

    .valuesdiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    }

    .valuesimg {
    height: 260px;
    width: 320px;
    }

    .valuesimg, .valuestalk, .blog-teaser, .imgContainer {
    width: 100%;
    }

    .blogvalue {
    width: auto;
    }

    .applicationsdiv img {
    height: 380px;
    width: auto;
    margin-inline: 12px;
    }

    .testimonials {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-inline: 5px;
    }

    .testimonialsh2-p {
    /* padding-inline: 0; */
    margin-bottom: 18px;
    padding-top: 28px;
    padding-bottom: 18px;
    /* background-color: red; */
    }

    .testimonialsh2-p h2 {
    margin-inline: -5px;
    }

    .container-wrapper .arrow-nav {
    display: none;
    }

    .container-wrapper {
    margin: 0 2px 0px 2px;
    padding: 4px 4px;
    }

    .popup {
    width: 95%;
    }

    .popup h2 {
    font-size: 30px;
    }

    /* .testimonialsContainer {
    margin-bottom: -28px;
    } */

    footer p {
    font-size: 15px;
    letter-spacing: 0.4px;
    word-spacing: 2px;
    }

    .linkedin-integration {
    height: 500px;
    width: auto;
    }

    .rights {
    font-size: 16px;
    padding-inline: 10px 1px;
    }
}

@media screen and (min-width: 475px) and (max-width: 640px) {
    body {
    overflow-x: hidden;
    }

    header {
    height: 70px;
    padding-left: 20px;
    padding-right: 20px;
    }

    .links {
    display: none;
    }

    .menuAccordion {
    display: block;
    width: 65%;
    }

    .menuHeader {
    height: 70px;
    }

    .menu-bar {
    display: block;
    }

    .cta {
    display: none;
    }

    .changingNumbers {
    font-size: 22px!important;
    }

    .numbers div span {
    font-size: 17px;
    }

    .hero {
    margin-top: 70px;
    padding-top: 94px;
    padding-bottom: 48px;
    height: auto;
    }

    h1 {
    font-size: 42px;
    line-height: 48px;
    }

    .hero p {
    padding-inline: 10px;
    letter-spacing: 0.5px;
    }

    .numbers {
    padding-inline: 12px;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    }

    .about, .applications, .blog, .testimonials, .testimonialsh2-p, footer {
    padding-inline: 20px;
    }

    .whatwedo {
    padding-inline: 32px;
    }

    .testimonialsh2-p h2 {
    margin-inline: -5px;
    }

    .about, .do {
    flex-direction: column;
    }

    .valuesdiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

    .valuesimg, .valuestalk, .blog-teaser, .imgContainer {
    width: 100%;
    }

    h2 {
    font-size: 36px;
    }

    .popup h2 {
    font-size: 32px;
    }

    .applications h3 {
    font-size: 32px;
    }

    .numbers div {
    gap: 5px;
    /* background-color: blue; */
    /* text-align: center; */
    }

    .blogvalue, .values {
    width: auto;
    }

    .about {
    padding-top: 40px;
    }

    .about img {
    width: 100%;
    height: 450px;
    }

    .container-wrapper .arrow-nav {
    display: none;
    }

    .container-wrapper {
    margin: 0 2px 0px 2px;
    padding: 4px 4px;
    }

    .donate, .valuesdiv, .applicationsdiv, footer {
    flex-direction: column;
    align-items: unset;
    }

    .blog, .testimonials, .applications, .whatwedo {
    padding-bottom: 36px;
    padding-top: 36px;
    }

    .valuesdiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

    footer {
    padding-top: 36px;
    }

    .linkedin-integration {
    width: auto;
    height: 420px;
    }

}

@media screen and (min-width: 640px) and (max-width: 768px){
    body {
    overflow-x: hidden;
    }

    header {
    height: 94px;
    padding-left: 24px;
    padding-right: 24px;
    }

    .links {
    display: none;
    }

    .menuAccordion {
    display: block;
    width: 60%;
    }

    .menuHeader {
    height: 94px;
    }

    .menu-bar {
    display: block;
    }

    .cta {
    display: none;
    }

    .hero {
    margin-top: 94px;
    height: auto;
    padding-bottom: 60px;
    }

    h1 {
    font-size: 48px;
    text-align: center;
    line-height: 54px;
    max-width: 100%;
    }

    h2 {
    font-size: 40px;
    }

    .applications h3 {
    font-size: 36px;
    }

    .hero p {
    text-align: center;
    letter-spacing: 0.6px;
    padding-top: 40px;
    padding-inline: 10px;
    font-size: 17px;
    line-height: 25px;
    }

    /* .about {
    padding-inline: 24px;
    } */
    .about p:not(:first-of-type) {
    max-width: 95%;
    }

    .about div {
    width: 100%;
    }

    .about img {
    width: 100%;
    }

    .container-wrapper {
    margin: 0 10px 5px;
    padding: 20px 24px;
    }

    .donate, .valuesdiv, .applicationsdiv, footer {
    flex-direction: column;
    align-items: unset;
    }

    .vision-mission, .numbers{
    padding-inline: 12px;
    }

    .about, .applications, .testimonials, .testimonialsh2-p {
    padding-inline: 24px;
    }

    .blog {
    padding-inline: 10px;
    }

    .whatwedo {
    padding-inline: 10px;
    padding-top: 40px;
    padding-bottom: 40px;
    }

    .about, .do {
    flex-direction: column;
    }

    .valuesdiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

    .valuesimg {
    height: 260px;
    width: 320px;
    }

    .valuesimg, .valuestalk, .blog-teaser, .imgContainer {
    width: 100%;
    }

    .blogvalue {
    margin-inline: 10px;
    }

    .blog-teaser {
    height: auto;
    width: 100%;
    }

    .blog, .about, .testimonials {
    padding-top: 45px;
    padding-bottom: 45px;
    }

    footer {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    }

    .linkedin-integration {
    height: 350px;
    }

    footer p {
    font-size: 15px;
    letter-spacing: 0.4px;
    word-spacing: 2px;
    }

    footer {
    padding-top: 40px;
    padding-inline: 15px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body {
    overflow-x: hidden;
    }

    header {
    padding-left: 10px;
    padding-right: 10px;
    }

    .logo {
    height: 72px;
    width: 145px;
    }
    
    .button, .button2 {
    padding: 12px 32px;
    }

    .links {
    gap: 22px;
    }

    .changingNumbers {
    font-size: 25px!important;
    }

    .numbers div span {
    font-size: 19px;
    }

    .hero {
    padding-top: 110px;
    }

    h1 {
    font-size: 52px;
    line-height: 60px;
    }

    .hero p, .hero1 p {
    padding-inline: 120px;
    }

    .about, .applications, .blog, .testimonials, .testimonialsh2-p, footer {
    padding-inline: 20px;
    }

    .applications h3 {
    font-size: 36px;
    }

    .whatwedo {
    padding-inline: auto;
    }

    .valuesdiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 18px;
    }

    .linkedin-integration {
    width: 340px;
    /* float: right; */
    /* margin-right: -36px; */
    }

    footer p {
    font-size: 15px;
    word-spacing: 2px;
    letter-spacing: 0.35px;
    }
    
    .rights {
    width: 100%;
    }

}

@media screen and (min-width: 1536px) and (max-width: 1866px) {
    header {
    padding-left: 165px;
    padding-right: 132px;
    height: 112px;
    }

    h1 {
    font-size: 72px;
    }        

    .hero {
    padding-inline: 200px;
    padding-top: 200px;
    margin-top: 112px;
    }

    .about, .numbers, .applications, .blog, .whatwedo, .vision, .testimonials, .testimonialsh2-p, footer, .history {
    padding-inline: 200px;
    }

    .container-wrapper {
    margin-inline: auto;
    max-width: 95%;
    }

    .about p:not(:first-of-type), .donate p:not(:first-of-type), .vision-mission p:not(:first-of-type), .applications p:not(:first-of-type) {
    max-width: 70ch;
    }

    .footerlinks{
    gap: 120px;
    }

}