/*

---01 TYPOGRAPHY SYSTEM

- Font size system (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weight
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line height
Default: 1
Small: 1.05
Medium: 1.2
Paragraph Default: 1.6
Large: 1.8

- Letter spacing
-.5px
.75px


---02 COLORS

-Primary colors: #112a46;
-Background primary: rgb(255, 246, 224);

-Tints: 
#c20000;

-Shades: 
 rgb(39, 40, 41);
rgb(97, 103, 122);
 

-Accents:
-Greys: 

#888
#767676 (lightest gray allowed on white)
#6f6f6f (lightest gray allowed on #fdf2e9)
#555
 #333;


---05 SHADOWS

box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

---06 BORDER RADIUS


Default: 9px
Medium: 11px

---07 WHITE SPACE

-Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/

/*************************/
/*HEADER*/
/*************************/
/* .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  
  height: 9.6rem;
  padding: 2.4rem 4.8rem;
} */

/*************************/
/*NEW NAVIGATION AND DROPDOWN*/
/*************************/

.nav-container {
  max-width: 120rem;
  margin-inline: 1.5rem;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 16px rgba(246, 246, 246, 0.3);
  z-index: 100;
  height: 10rem;
  padding-top: 2rem;
}

.nav-header {
  height: 3.5rem;
}

.nav__logo,
.nav__burger,
.nav__close {
  color: #285c54;
}

.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  column-gap: 0.25rem;
}

.nav__logo i {
  font-size: 1.25rem;
  font-weight: 600;
}

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}

.nav__burger,
.nav__close {
  position: absolute;
  width: max-content;
  height: max-content;
  inset: 0;
  margin: auto;
  font-size: 3rem;
  cursor: pointer;
  transition: opacity 0.1s, transform 0.4s;
  z-index: 1500;
}

.nav__close {
  opacity: 0;
}

.nav__link {
  color: #285c54;
  background-color: white;
  text-transform: uppercase;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s;
  font-size: 1.2rem;
}

.nav-logo {
  height: 9rem;
}

.show-menu {
  opacity: 1 !important;
  top: 0rem !important;
  pointer-events: initial !important;
}

.show-icon .nav__burger {
  opacity: 0;
  transform: rotate(90deg);
}
.show-icon .nav__close {
  opacity: 1;
  transform: rotate(90deg);
}

.dropdown__item {
  cursor: pointer;
}

.dropdown__arrow {
  font-size: 2rem;

  transition: transform 0.4s;
}

.dropdown__link,
.dropdown__sublink {
  padding: 2rem;
  color: white;
  background-color: #112724;
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  width: 22rem;
  transition: background-color 0.3s;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.dropdown__link i,
.dropdown__sublink i {
  font-size: 1.25rem;
  font-weight: initial;
}

.dropdown__link:hover,
.dropdown__sublink:hover {
  color: #74a8a1;
}

.dropdown__menu,
.dropdown__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.dropdown__item:hover .dropdown__menu,
.dropdown__subitem:hover > .dropdown__submenu {
  max-height: 100rem;
  transition: max-height 0.4s ease-in;
}

.dropdown__item:hover .dropdown__arrow {
  transform: rotate(180deg);
}

.dropdown__add {
  margin-left: auto;
}

.dropdown__sublink {
  background-color: #aaa;
}

/*************************/
/*HERO SECTION*/
/*************************/
.section-hero {
  background: url(/img/hero.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% -48%;
  /* height: 100vh; */
  width: 100%;
  padding: 1.8rem 0 9.6rem 0;
}

.hero {
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 3.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9.6rem;
  align-items: center;
}

.hero-text-box {
  color: #fff;
  padding-top: 13.2rem;
}

.hero-img {
  width: 100%;
}

.hero-description {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 4.8rem;
}

/*************************/
/*SERVICES SECTION*/
/*************************/

.section-services {
  padding: 4.8rem 0 4.8rem 0;
  background-color: #fff;
}

.container-services {
  background-color: #224f48;
  padding: 3.2rem;
}

.section-services .heading-secondary {
  margin: 2.8rem 0 6.6rem 0;
}

.service-icon {
  /* color: rgb(16, 181, 236); */
  height: 4.2rem;
  width: 4.2rem;
  padding: 1rem;
  flex-shrink: 0;
}

.service-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.service-text {
  font-size: 1.8rem;
  line-height: 1.6;
}

.service-comb {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.service-com {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.span-icon {
  vertical-align: top;
}

.service-links:link,
.service-links:visited {
  text-decoration: none;
  color: #ccc;
  display: inline-block;
  transition: all 0.3s;
}

.service-links:active,
.service-links:hover {
  color: #fff;
  cursor: pointer;
}

/*************************/
/*SPECIALITY SECTION*/
/*************************/

.section-speciality {
  padding: 4.8rem 0 6.8rem 0;
  background-color: #ebf3f2;
}

.section-speciality .container {
  max-width: 140rem;
}
.speciality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #fff;
  border-radius: 11px;
  overflow: hidden;
}

.img-s {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.speciality-text-box {
  color: #173430;
  padding: 4.8rem 6.4rem 6.4rem 6.4rem;
}

.speciality .heading-secondary {
  margin-bottom: 3.2rem;
}

.speciality-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 4.8rem;
}

/*************************/
/*BENEFITS SECTION*/
/*************************/

.section-benefits {
  padding: 2.4rem;

  background-color: #224f48;
}
.section-benefits-2 {
  padding: 2.4rem;

  background-color: #fff;
  color: #285c54;
}

.section-benefits-2 .benefits-text,
.section-benefits-2 .strength-text,
.section-benefits-2 .list-item-2 {
  color: #285c54;
}

.section-benefits .grid--4--cols {
  grid-template-columns: 1fr 2fr 1fr 2fr;
}
.section-benefits-2 .grid--4--cols {
  grid-template-columns: 1fr 2fr 1fr 2fr;
}

.benefits-text,
.strength-text {
  font-size: 2.6rem;
  color: white;
}

.test {
  display: flex;
  align-items: center;
}

/************************/
/*TESTIMONIALS SECTION*/
/************************/

.section-testimonials {
  background-color: aqua;
  padding: 4.8rem 0 9.6rem 0;
}

.testimonials-containter {
  padding: 4.8rem 0 0 0;
}

.testimonials.grid {
  row-gap: 4.8rem;
  column-gap: 6rem;
}

.testimonial-box {
  background-color: antiquewhite;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  padding: 1.8rem;
}

.testimonial-text {
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 1.6rem;
}

.testimonial-name {
  font-size: 1.2rem;
  color: rgb(95, 95, 95);
}

/************************/
/*FOOTER*/
/************************/

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  /* height: 9.6rem; */
  padding: 2rem 3rem;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin: 1rem 0;
}
.footer-copyright {
  flex: 100%;
}

.logo {
  height: 8.2rem;
  margin: 1rem;
}

.footer-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.btn-footer,
.btn-footer:link,
.btn-footer:visited {
  display: inline-block;
  font-size: 1.3rem;
  /* font-weight: 600; */
  text-decoration: none;
  padding: 1.2rem 2.4rem;
  border-radius: 5px;

  /*Only applied to btn*/
  border: none;
  cursor: pointer;
  /* transition: background-color 0.3s; */
  transition: all 0.3s;
  box-shadow: inset 0 0 0 2px #bbb;
}
.btn-footer-outline:link,
.btn-footer-outline:visited {
  background-color: #224f48;
  color: #fff;
}
.btn-footer-outline:hover,
.btn-footer-outline:active {
  background-color: #33766c;
  color: #333;
  /* border: 3px solid #fff; 
    cant use this above because of the 3px it moves the content above the buttons*/

  /*Trick to add border inside...inset makes sure the "border" is inside of the button*/
  box-shadow: inset 0 0 0 2px #fff;
}

.grid--footer {
  grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
}

.logo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-logo {
  display: block;
  margin-bottom: 3.2rem;
}

.logo-footer {
  height: 13rem;
}

.social-links {
  list-style: none;
  display: flex;
  gap: 2.4rem;
}

.social-icon {
  height: 2.4rem;
  width: 2.4rem;
}

.copyright {
  font-size: 1.3rem;
  line-height: 1;
  margin: 0 0 0 0;
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 4rem;
}

.contacts {
  font-style: normal;
  font-size: 1.3rem;
  line-height: 1.2;
}

.address {
  /* margin-bottom: 2.4rem; */
  margin: 0 0;
  color: #112724;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.3rem;
  color: #767676;
  transition: all 0.3s;
}

.footer-link:hover,
.footer-link:active {
  color: #555;
}

/************************/
/*OUR PROJECTS SITE*/
/************************/

.section-projects-banner {
  background: url(/img/ourproject/our-projects.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 43%;
  height: 70%;
  width: 100%;
  padding: 21rem 0;
  margin: 12rem 0 0 0;
  /* overflow: hidden;
  background-position: 100% 50%;
  background-size: cover;
  background-repeat: no-repeat; */
}

.section-projects .grid {
  column-gap: 2.4rem;
}

.section-projects .container {
  max-width: 140rem;
}

.section-projects {
  background-color: #224f48;
}

.projects {
  margin: 0 auto;
  padding: 3rem 0;

  background-color: #224f48;
}

.projects-links {
  padding: 2rem 0;
}

.projects-heading {
  margin: 7rem auto;
  padding: 0 3.2rem;
  text-align: center;
}

.flip-main {
  /* min-height: 100vh; */
  /* background-color: rgba(33, 105, 173, 0.407); */
  /* padding: 2rem 0; */
  height: 100%;
  /* background-color: white; */
  border-radius: 10px;
  position: relative;
}
.flip-card-front h2 {
  color: #285c54;
}

.front-all {
  background-color: white;
  height: 36rem;
  border-radius: 10px;
}

.flip-main .flip-card {
  flex: 0 0 calc(33.33% - 3rem);
  /* margin: 0 1.5rem 3rem; */
  perspective: 1000px;
  /* remove this if you dont want the 3d effect */
}
.flip-main .flip-card-inner {
  /* box-shadow: 0 0 10px #a9b3d6; */
  position: relative;
  transform-style: preserve-3d;
  transition: all 1s ease;
}

.flip-main .flip-card-front img {
  width: 100%;
  height: 100%;
}
.flip-card-front {
  /* background-color: #fff; */
  overflow: hidden;
}

.flip-main .flip-card-front,
.flip-main .flip-card-back {
  backface-visibility: hidden;
  border-radius: 10px;
  /* padding-bottom: 2rem; */
}

/* .flip-main .flip-card-front {
  height: 50rem;
} */
.flip-main .flip-card-back {
  /* background-color: #6e0ec5; */
  background-color: #398378;

  position: absolute;
  left: 0;
  top: 0;
  padding: 1.5rem;
  width: 100%;
  height: 100%;
  /* display: flex;
  align-items: center;
  justify-content: center; */
  /* text-align: center; */
  transform: rotateY(180deg);
  overflow-y: auto;
}
.flip-main .flip-card-back h1 {
  font-size: 2.4rem;
  color: #ffffff;
  margin: 1rem 0;
}
.flip-main .flip-card-back p {
  font-size: 1.4rem;
  color: #e9e9e9;
  margin: 0;
  line-height: 1.5;
}
.flip-main .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.card-img {
  max-width: 100%;

  vertical-align: middle;
}
.flip-container {
  margin: auto;
}

.row {
  display: flex;
  flex-direction: column;
}

.flip-card-front hr {
  /* margin: 1.5rem auto 1rem auto; */
  height: 2px;
}
.flip-card-front h2 {
  margin: 1rem 0;
  padding: 1rem 1rem;
  text-align: center;
}

.flip-card-front p {
  font-size: 1.2rem;
  color: #000;
  padding: 1rem;
  margin: 0 auto;
  line-height: 1.2;
  text-align: center;
}

/*************************/
/*OUR CONCEPT SITE*/
/*************************/

.section-concept-banner {
  background: url(/img/about-us/about-us.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 16%;
  /* height: 70%; */
  width: 100%;
  padding: 20rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;

  /* overflow: hidden;
  background-position: 100% 50%;
  background-size: cover;
  background-repeat: no-repeat; */
}
.con-img {
  height: 100%;
  width: 100%;
}

.section-concept-intro {
  margin-bottom: 3.2rem;
}
.section-concept-z {
  background-color: #ebf3f2;
  padding: 3.2rem 0;
}
.section-concept-z .heading-tertiary,
.section-concept-z .primary-text {
  color: #285c54;
}

.section-concept {
  background-color: #173430;
  padding: 3.2rem 6rem;
}

.container-concept {
  max-width: 150rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.box-info-text {
  padding: 2.5rem 2.5rem;
  font-size: 1.4rem;
  line-height: 2rem;
}
.box-info-text .heading-tertiary,
.box-info-text .primary-text {
  color: #fff;
}

.box-info {
  margin: 2rem 2rem;
  padding: 2.5rem 4.5rem;
  border-radius: 5px;
  background-color: #d7e6e4;
  color: #285c54;
  font-size: 1.4rem;
  line-height: 2rem;
}

.heading-box-info {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.concept-text-box-flex {
  padding: 6rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-wrap: wrap;
}

.flip-color {
  background-color: #fff;
}

.img-box-z {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* animation: box-load-left 0.7s ease-in; */
}

.img-box-z-2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* animation: box-load-right 0.7s ease-in; */
}

.img-z {
  width: 100%;
  height: 100%;
}

/*************************/
/*JOIN US*/
/*************************/

.section-joinus-banner {
  background: url(/img/about-us/join-us.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 96%;
  /* height: 70%; */
  width: 100%;
  padding: 17rem 0;
  margin: 12rem 0 5rem 0;
  overflow: hidden;
}

.pimg2 {
  position: relative;
  opacity: 0.9;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.pimg2 {
  background-image: url(/img/about-us/join-team.webp);
  min-height: 70rem;
}

.ptext {
  color: #ddd;
}

.pheader {
  padding: 4rem;
  display: flex;
  /* align-items: center; */
  overflow: hidden;
  flex-wrap: wrap;
}

.pimg-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 2rem 0 0;
}
.img-para {
  height: 100%;
  width: 100%;
  opacity: 0.7;
}

.section-eufunding-projects {
  padding: 3rem 1rem;
  background-color: #224f48;
}

/*************************/
/*CONTACT US*/
/*************************/

.section-contactus-banner {
  background: url(/img/contact-us.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 15%;
  /* height: 70%; */
  width: 100%;
  padding: 15rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;
}

.pimg3 {
  position: relative;
  opacity: 0.9;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.pimg3 {
  background-image: url(/img/contact-us-background.webp);
  min-height: 70rem;
}

.ptext {
  color: #ddd;
}

.pheader {
  padding: 4rem;
  display: flex;
  /* align-items: center; */
  overflow: hidden;
  flex-wrap: wrap;
}

.pimg-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 2rem 0 0;
}
.img-para {
  height: 100%;
  width: 100%;
  opacity: 0.7;
}

/************************/
/*JOIN-US AND CONTACT-US SECTION*/
/************************/

.section-cta {
  padding: 4.8rem 0 12.8rem 0;
}
.cta-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 6.2rem 3.2rem;
}

.cta {
  /*2/3=66.6% 1/3=33.3%
  grid-template-column ratio*/
  /* display: grid;
  grid-template-columns: 2fr 1fr; */
  /* background-color: rgba(196, 218, 215, 0.7); */
  background-color: rgba(116, 168, 161, 0.7);
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15);
  border-radius: 11px;
  background-image: linear-gradient(
    to right bottom,
    rgba(235, 152, 78, 0.1),
    rgba(230, 125, 34, 0)
  );
  overflow: hidden;
  /*temp*/
}

.cta-text-box {
  padding: 4.8rem 6.4rem 6.4rem 6.4rem;

  color: #45260a;
}

.cta .heading-secondary {
  /* color: #45260a; */
  color: inherit;
  /*inherits the color of the parent element*/
  margin-bottom: 3.2rem;
}

.cta-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 4.8rem;
}

.cta-img-box {
  background-image: linear-gradient(
      to right bottom,
      rgba(235, 151, 78, 0.35),
      rgba(230, 125, 34, 0.35)
    ),
    url(../img/eating.jpg);
  background-size: cover;
  background-position: center;
}

.cta-form {
  /* display: grid;
  grid-template-columns: repeat(2, 1fr); */
  column-gap: 3.2rem;
  row-gap: 2.4rem;
}

.cta-form label {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.cta-form input,
.cta-form select {
  width: 100%;
  padding: 1.2rem;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  font-family: inherit;
  color: inherit;
  border: none;
  background-color: #fdf2e9;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cta-form input::placeholder {
  color: #aaa;
}

.cta *:focus {
  outline: none;
  /* outline: 4px dotted #000;
  outline-offset: 8px; */
  box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5);
}

.btn-form {
  background-color: #285c54;
  color: #fdf2e9;
  align-self: end;
  padding: 1.2rem;
  width: 100%;
}
.text-area {
  resize: none;
  background-color: #fdf2e9;
  height: 8rem;
  width: 100%;
  margin: 1.5rem 0;
  font-family: sans-serif;
  font-size: 1.6rem;
}

.btn-form:hover {
  background-color: #fff;
  color: #555;
}

/*************************/
/*SERVICES-INTRO*/
/*************************/

.section-services-banner {
  background: url(/img/services/services.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 50%;
  /* height: 70%; */
  width: 100%;
  padding: 15rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;
}

.section-services-intro {
  margin: 3rem auto;
  background-color: #fff;
}

.section-services-boxes {
  background-color: #224f48;
  padding: 4rem 1rem;
}

.section-services-boxes .container {
  max-width: 150rem;
}

.section-services-boxes .grid {
  align-items: center;
}

.main-box {
  background-color: #ebf3f2;
  border-radius: 10px;
  overflow: hidden;
}

.main-box-flip-color {
  background-color: #ebf3f2;
}

.box-header {
  padding: 3rem 2rem 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.box-img {
  margin-bottom: 2rem;
  border-radius: 50%;
}

.box-img {
  width: 33%;
}

.box-content-services {
  background-color: white;
  padding: 2rem 0 2rem 0;
  color: #285c54;
}
.section-services-outro {
  background-color: #ebf3f2;
}

.section-services-outro .container {
  max-width: 150rem;
  padding: 0rem 1rem;
  overflow: hidden;
}

.outro-text {
  /* padding: 13rem 1rem 5rem 1rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.img-outro {
  width: 100%;
  height: 100%;
}

/*************************/
/*GRANTS*/
/*************************/

.section-grant-boxes {
  background-color: #224f48;
  padding: 4rem;
}

.box-container {
  background-color: #d7e6e4;
  padding: 3rem 5.5rem 2.5rem;
  border-radius: 5px;
  overflow: hidden;
  /* display: flex;
  align-items: center; */
}

.box-content {
  border-radius: 5px;
  /* flex-basis: 100%; */

  background-color: white;
  color: #285c54;
  padding: 4rem;
  height: 100%;
}
.box-container-2 {
  background-color: #d7e6e4;
  padding: 3rem 22rem 2.5rem 22rem;
  border-radius: 5px;

  overflow: hidden;
}

.box-content .primary-text {
  line-height: 2rem;
  font-size: 1.4rem;
  color: #285c54;
}

.section-grant-boxes .grid {
  column-gap: 2.4rem;
  justify-content: center;
  align-items: center;
}

.section-grant-benefits {
  padding: 4rem 2rem;
  background-color: #ebf3f2;
}

.container-advantages {
  margin: 0 auto;
  padding: 0 3.2rem;
}

.advantage-text {
  display: inline-block;
  padding: 2rem 1rem;
}

.advantage-text .list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.advantage-text .list-item {
  font-size: 1.8rem;
  line-height: 2;
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}

.advantage-text .primary-text {
  line-height: 2.5rem;
}

.section-grant-boxes .grid--2--cols {
  grid-template-columns: repeat(2, fit-content(35%));
}

/*************************/
/*PROJECT-WRITING*/
/*************************/

.section-eu-project-management-banner {
  background: url(/img/services/eu-project-management.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 87%;
  /* height: 70%; */
  width: 100%;
  padding: 15rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;
}

.section-project-outro {
  padding: 4rem 12rem;
  background-color: #a2efec;
}

/*************************/
/*FUNDRAISING*/
/*************************/

.section-fundraising-banner {
  background: url(/img/services/fundraising.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 19%;
  /* height: 70%; */
  width: 100%;
  padding: 15rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;
}

.advantage-text-financial {
  padding: 2rem 0 0 0;
}

.advantage-text-financial .primary-text {
  line-height: 3rem;
}

.advantage-text-financial .list {
  justify-content: center;
  align-items: center;
}

/*************************/
/*MARKETING*/
/*************************/

.section-marketing-banner {
  background: url(/img/services/marketing.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 84%;
  /* height: 70%; */
  width: 100%;
  padding: 15rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;
}

/*************************/
/*TECH*/
/*************************/

.section-tech-banner {
  background: url(/img/services/tech-development-services.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 50%;
  /* height: 70%; */
  width: 100%;
  padding: 15rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;
}

/*************************/
/*ONLINE SERVICES*/
/*************************/

.section-online-banner {
  background: url(/img/services/online-courses.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 75%;
  /* height: 70%; */
  width: 100%;
  padding: 15rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;
}

/*************************/
/*EU FUNDING*/
/*************************/

.section-eufunding-banner {
  background: url(/img/services/EU-Funding.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 50%;
  /* height: 70%; */
  width: 100%;
  padding: 15rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;
}

.pimg1 {
  position: relative;
  opacity: 0.9;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.pimg1 {
  background-image: url(/img/paralax/EU-Funding-Paralax.webp);
  min-height: 70rem;
}

.ptext {
  color: #ddd;
}
.h-flip-color {
  color: white;
}

.pheader {
  padding: 4rem;
  display: flex;
  /* align-items: center; */
  overflow: hidden;
  flex-wrap: wrap;
}

.pimg-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 2rem 0 0;
}
.img-para {
  height: 100%;
  width: 100%;
  opacity: 0.7;
}

.accordian {
  width: 70rem;
  margin: 10rem auto;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.accordion {
  width: 70rem;
  /* width: 100%; */
  margin: 10rem auto;
}

.accordion-header {
  border: 1px solid #000;
}

.accordion-item {
  margin-bottom: 2rem;
}

.accordion-body {
  font-size: 2.4rem;
  font-weight: 500;
}

.accordion-button {
  font-size: 2rem;
  font-weight: 500;
  padding: 2rem 1rem;
  color: #4d8f86;
}

.accordion-body .advantage-text {
  padding: 0rem 1rem;
}

.accordion-body .advantage-text .primary-text {
  margin-bottom: 0;
  line-height: 3.5rem;
  font-size: 1.5rem;
}

.accordion-service-links:link,
.accordion-service-links:visited {
  text-decoration: none;

  color: #285c54;
  transition: all 0.3s;
}
.advantage-text .list-item .primary-text {
  text-decoration: none;
  color: #285c54;
}
.advantage-text .list-item .primary-text:hover {
  color: #38b6ff;
}

.accordion-service-links:active,
.accordion-service-links:hover,
.fa-solid:active,
.fa-solid:hover {
  color: #38b6ff;
  cursor: pointer;
}

.accordian-item {
  background-color: #eee;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
  padding: 2.4rem;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2.4rem;
  row-gap: 3.2rem;
  align-items: center;
}
.accordian-text {
  font-size: 2.4rem;
  font-weight: 500;
  /* color: #087f5b; */
}
.accordian-icon {
  width: 2.4rem;
  height: 2.4rem;
  stroke: #285c54;
}

.hidden-box {
  display: none;
}

.btn-accordian {
  border: none;
  cursor: pointer;
}

.accordian-open {
  border-top: 4px solid #087f5b;
}

.accordian-open .hidden-box {
  display: block;
}

.accordian-open .accordian-text {
  color: #087f5b;
}

.hidden-box .advantage-text {
  padding: 0;
}

.hidden-box .primary-text {
  font-size: 1.4rem;
}

.hidden-box p {
  line-height: 1.6;
  margin-bottom: 2.4rem;
}

/*************************/
/*EU FUNDING*/
/*************************/
.section-international-funding-banner {
  background: url(/img/services/international-funding.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 50%;
  /* height: 70%; */
  width: 100%;
  padding: 15rem 0;
  margin: 12rem 0 8rem 0;
  overflow: hidden;
}