:root {
  --first-color: #5e722d;
  --second-color: #730022;
  --third-color: #db7801;
  --fourth-color: #90125c;
  --first-hover-color: #82a62b;
  --second-hover-color: #ed8608;
  --gradient-color-1: #db7801; /* First color for gradient */
  --gradient-color-2: #eea54c; /* Second color for gradient */
  --font: Poppins, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
li {
  font-family: var(--font);
}
h2 {
  font-size: 48px !important;
}

/*STYLING FOR HOMEPAGE*/
/*NAVIGATION BAR*/
.nav-list li {
  list-style: none;
  display: inline;
}
.navbar {
  padding: 0px 0px !important;
  height: 80px;
}
.navbar-nav {
  background-color: var(--first-color);
}
.primary-button {
  background-color: var(--first-color);
  border-radius: 6px;
  color: white;
  border: var(--first-color);
  font-family: var(--font);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}
.primary-button:hover {
  background-color: var(--first-hover-color);
}
.nav-item a:hover {
  color: var(--second-hover-color);
  text-decoration: underline;
}
.floam-nav {
  font-weight: 900;
}
.floam-slogan-nav {
  font-size: 10px !important;
}
.floam-nav-img {
  height: 70px !important;
  width: 70px !important;
}

/*HERO SECTION*/
.hero {
  background-image: url("../images/hero-images.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1200px;
  position: relative;
}
.hero-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(36, 49, 7, 0.4);
}
.hero-container-slogan h1 {
  font-size: 54px;
}
.hero-container-slogan {
  position: absolute;
  top: 250px;
  left: 200px;
  width: 400px;
}
.hero-icon {
  font-size: 46px;
}
.hero-information {
  font-size: 18px;
}

/*INFORMATION*/
.hero-information {
  position: relative;
  height: 250px;
}
.information {
  position: absolute;
  top: -40px;
}
.info {
  background-color: var(--first-color);
  position: relative;
  transition: all 0.3s ease-in-out;
}
.info:hover {
  transform: scale(1.03);
  margin: 10px;
}
.learn {
  position: absolute;
  bottom: 20px;
  left: 150px;
}
.info h3 {
  font-size: 24px;
}
.more-info {
  background-color: var(--third-color);
}
.learn-more {
  color: var(--third-color);
  text-decoration: none;
}
.learn-more:hover {
  color: var(--second-hover-color);
  text-decoration: underline;
}

/*MORE INFORMATION*/
.donation-heading {
  color: var(--second-color);
}
.paragraph-info {
  font-size: 20px;
}

/*TESTIMONIAL SECTION*/
.testimonial-heading {
  color: var(--second-color);
}
.hero-testimonial {
  padding: 0px 0px;
}
.testimonial {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  background-color: var(--second-color) !important;
  padding: 10px;
  transition: all 0.3s ease-in-out;
}
.testimonial:hover {
  transform: scale(1.08);
}
.testimonial:hover .quotation-mark {
  color: white;
}
/*.testimonial div img {
  border-radius: 50%/20% 20% 20% 20%;
}*/
.student-testimony {
  font-size: 18px;
}
.quotation-mark {
  color: var(--second-color);
}
p .see-more {
  color: var(--third-color);
  text-decoration: none;
}
p .see-more:hover {
  color: var(--second-hover-color);
  text-decoration: underline;
}

/*ACHIEVEMENTS*/
.achievements {
  position: relative;
  background-image: url("../images/schoolkids1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  overflow: hidden;
}
.achievements .overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(115, 0, 34, 0.8);
  z-index: 1;
}

/*FOOTER SECTION*/
.footer {
  background-color: var(--first-color);
}
.secondary-button {
  border-radius: 6px;
  background-color: var(--third-color);
  color: white;
  border: var(--third-color);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  font-family: var(--font);
}
.secondary-button:hover {
  background-color: var(--second-hover-color);
}
.footer-list {
  list-style: none;
  text-decoration: none;
  color: white;
}
.img-nav {
  height: 80px !important;
  width: 150px !important;
}
.floam {
  font-weight: 700;
}
.floam-slogan {
  font-size: 10px !important;
}
li a {
  text-decoration: none;
  color: white;
}
li a:hover {
  text-decoration: underline;
}
li .link {
  color: var(--third-color);
  text-decoration: none;
}
li .link:hover {
  color: var(--second-hover-color);
}
.footer-social-list {
  list-style-type: none;
}
.company-name p {
  font-size: 9px;
}
.follow-us-link {
  color: var(--third-color);
}

.link-radio {
  color: var(--third-color);
}
.registered-name {
  font-size: 12px;
}

@media (max-width: 768px) {
  .logo img {
    width: 30px;
    height: 30px;
  }
  .nav-company-name {
    font-size: 18px;
  }
  /* .navbar {
    height: 50px;
  }*/
  .navbar-toogler {
    margin-left: 10px;
  }
  .navbar-brand {
    margin-right: 0px !important;
  }

  .menu .primary-button {
    padding: 8px 20px !important;
  }
  .logo-image {
    width: 50px;
  }
  .company-name span {
    font-size: 20px !important;
  }
  .hero {
    height: 450px;
    padding: 10px;
  }
  .hero-container-slogan {
    position: absolute;
    top: 160px;
    left: 30px;
    width: 200px;
  }
  .hero-container-slogan h1 {
    font-size: 28px;
    margin-bottom: 10px;
  }
  .hero-icon {
    font-size: 22px !important;
  }
  .hero-information {
    margin: 50px 50px 200px 50px;
    height: 530px;
  }
  .info {
    margin-bottom: 5px;
    padding-left: 60px;
  }
  .info:hover {
    transform: scale(1.02);
  }
  .info h3 {
    font-size: 22px;
  }
  .info p {
    font-size: 16px;
  }

  .learn-more {
    font-size: 9px;
  }
  .paragraph-info {
    text-align: center;
    font-size: 16px;
  }
  .more {
    padding: 0px 20px;
  }
  .more-info-heading {
    font-size: 32px !important;
    margin-top: 20px;
  }
  .row-info {
    margin-top: 0px;
    padding: 20px;
  }
  .col-heading {
    text-align: center;
  }
  .donation-heading {
    font-size: 28px !important;
  }
  .hero-testimonial {
    margin: 0px 30px;
  }

  .testimonial:hover {
    transform: scale(1.02);
  }
  .testimonial-heading {
    font-size: 28px !important;
  }

  .student-testimony {
    font-size: 16px;
  }
  .button-column {
    display: flex;
    justify-content: center;
  }
  .enquire-paragraph {
    font-size: 26px;
  }
  .contact-service {
    padding: 0px 30px 0px 30px !important;
  }
  footer {
    padding: 0px 10px;
  }
  .footer-info {
    margin: 0px auto;
  }
  .footer-list {
    text-align: center;
  }
  .footer-logo {
    display: flex;
    justify-content: center;
  }
  .container .help {
    font-size: 28px !important;
  }
  .registered-name {
    text-align: center;
  }
}

/*STYLING GALLERY*/
.event-gallery-heading {
  color: var(--second-color);
}
.hero-gallery {
  background-image: url("../images/schoolkids1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px;
  overflow: hidden;
}
.hero-gallery {
  position: relative;
}
.gallery-headings {
  position: absolute;
  top: 250px;
  left: 150px;
}
.first-heading {
  font-size: 54px;
}
.second-heading {
  font-size: 44px !important;
}
.hero-gallery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(36, 49, 7, 0.5);
}
.event-gallery {
  padding-left: 0px !important;
}

@media (max-width: 768px) {
  .hero-gallery {
    height: 400px !important;
  }
  .gallery-headings {
    position: absolute;
    top: 160px;
    left: 30px;
  }
  .first-heading {
    font-size: 36px;
  }
  .second-heading {
    font-size: 18px !important;
  }
  .event-gallery-heading {
    font-size: 28px !important;
  }
  .event-gallery h4 {
    font-size: 10px;
  }
  .event-gallery {
    padding-right: 0px !important;
  }
  .container h5 {
    font-size: 18px;
  }
  .gallery-photo {
    padding: 0px 20px;
  }
  .gallery-col img {
    height: 70%;
    margin: 0px auto;
  }
  .gallery-center img {
    height: 50%;
    margin: 0px auto;
  }
  .gallery-center {
    padding: 15px 10px;
  }
  .row-slider {
    padding: 0px 30px;
  }
}

/*Events*/
.carousel-control-prev-icon {
  color: var(--third-color) !important;
}
.slider {
  overflow: hidden;
}
.slider figure {
  position: relative;
}
figure img {
  float: left;
}
.slider-description {
  background-color: var(--second-color);
}
@keyframes slider {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  75% {
    left: -200;
  }
}

/*STYLING ABOUT PAGR*/

.hero-about {
  background-image: url("../images/picture-about1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 800px;
  overflow: hidden;
  position: relative;
}
.hero-about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(36, 49, 7, 0.5);
}
.hero-about-headings {
  position: absolute;
  top: 220px;
  left: 150px;
}
.our-story-heading {
  color: var(--second-color);
}
.hero-about-headings h1 {
  font-size: 54px;
}
.hero-about-headings div {
  width: 180px;
}
.our-story-image img {
  height: 400px;
}
.column {
  background-color: var(--second-color);
}
.vision-heading {
  color: var(--second-color);
}
.mission-heading {
  color: var(--second-color);
}
.our-services-heading {
  color: var(--second-color);
}
.motto {
  color: var(--fourth-color);
}

@media (max-width: 768px) {
  .hero-about {
    height: 450px;
  }
  .motto {
    font-size: 18px;
  }
  .about-paragraph {
    text-align: center;
    margin-top: 20px !important;
  }
  .hero-about-headings {
    position: absolute;
    top: 160px;
    left: 40px;
  }
  .hero-about-headings h1 {
    font-size: 34px;
  }
  .hero-sub-heading {
    font-size: 30px !important;
  }
  .hero-about-headings div {
    width: 140px;
  }
  .our-story-heading {
    font-size: 28px !important;
  }
  .our-story .p-5 {
    padding: 0px !important;
  }
  .vision-heading {
    font-size: 28px !important;
  }
  .mission-heading {
    font-size: 28px !important;
    margin-top: 0px !important;
  }
  .column p {
    padding: 0px !important;
    text-align: center;
  }
  .column ul {
    padding: 0px 10px !important;
    text-align: center;
  }
  .column {
    padding: 20px;
  }
  .vision {
    margin-bottom: 0px !important;
  }
  .our-services-heading {
    font-size: 28px !important;
  }
  div .vision-heading {
    margin-bottom: 40px;
  }
  div .mission-heading {
    margin-bottom: 40px;
    margin-top: 40px;
  }
  .vision-mission,
  .services,
  .our-story {
    padding: 0px 40px !important;
  }
  .row-services {
    margin-bottom: 0px 70px !important;
  }
}
/*CONTACT PAGE*/
.hero-contact {
  background-image: url("../images/contact-hero-image.jpg");
  height: 400px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.hero-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(36, 49, 7, 0.5);
}
.hero-contact {
  position: relative;
}
.contact-headings {
  position: absolute;
  top: 200px;
  left: 50px;
}

.contact-details {
  background-color: var(--second-color);
}
.details ul {
  list-style-type: none;
}
.send-message,
.follow-us {
  color: var(--second-color);
}
textarea {
  border: 1px solid lightgray;
  height: 100px;
}

@media (max-width: 768px) {
  .hero-contact {
    position: relative;
  }
  .contact-headings {
    position: absolute;
    top: 200px;
    left: 25px;
  }
  .send-message {
    font-size: 28px !important;
  }
  .contact-info {
    font-size: 28px !important;
  }
  .send {
    padding: 30px;
  }
  .address,
  .call-us,
  .connect,
  .email {
    text-align: center;
  }
}
/*.send {
  position: relative;
  height: 600px;
}
.contact {
  position: absolute;
  top: -150px;
}*/

/*Donate*/
.donate-contact,
.donate-list {
  list-style: none;
}
.thank-icon {
  color: var(--third-color);
}
.bank-details {
  display: block;
}
.donate-icon {
  color: var(--third-color);
}
.donate-section {
  position: relative;
}
.donate-details {
  position: absolute;
  left: 30%;
  top: -40%;
  background-color: white;
  width: 600px;
}
/*Styling radio*/
.hero-radio {
  background-image: url("../images/radiopicture5.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px;
  overflow: hidden;
  position: relative;
}
.hero-radio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(36, 49, 7, 0.5);
}
.hero-radio-headings {
  position: absolute;
  top: 180px;
  left: 150px;
}
.hero-radio-headings h1 {
  font-size: 54px;
}

.hero-radio-headings div {
  width: 400px;
}
.hero-radio-sub-heading {
  font-size: 42px !important;
}
.third-button {
  border-radius: 6px;
  background-color: var(--third-color);
  color: white;
  border: var(--third-color);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
  font-family: var(--font);
}
.third-button:hover {
  background-color: var(--second-hover-color);
}

.dropdown,
.content {
  list-style: none;
  background-color: var(--second-color);
}
.dropdown .content {
  position: relative;
  display: none;
}
.dropdown:hover .content {
  display: block;
}

/**@media (max-width: 768px) {
  .hero-team {
    position: relative;
  }
  .hero-team-headings {
    position: absolute;
    top: 50px;
    left: 25px;
  }
  .our-team {
    font-size: 28px !important;
  }
  .row-team {
    padding: 0px 30px;
  }
  .team-profession {
    margin-right: 0px !important;
    margin-top: 20px !important;
  }**/
@media (max-width: 768px) {
  .hero-team {
    position: relative;
  }
  .hero-team-headings {
    position: absolute;
    top: 150px !important;
    left: 50px !important;
  }
  .hero-team-headings h1 {
    font-size: 45px !important;
  }
  .hero-team-sub-heading {
    font-size: 18px !important;
  }
  .hero-team-headings div {
    width: 200px !important;
  }
  .hero-team {
    height: 600px !important;
  }
}

/*Team page*/
.hero-team {
  background-image: url("../images/picture-team1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.hero-team::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(36, 49, 7, 0.5);
}
.hero-team-headings {
  position: absolute;
  top: 180px;
  left: 150px;
}
.hero-team-headings h1 {
  font-size: 54px;
}

.hero-team-headings div {
  width: 400px;
}
.hero-team-sub-heading {
  font-size: 42px !important;
}
.profession {
  color: var(--second-color);
}
.team-profession {
  border-radius: 8px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.our-team {
  color: var(--second-color);
}
.employee-info {
  position: relative;
}
.employee-info img {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(115, 0, 34, 0.9);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: 0.5s ease;
}
.employee-info:hover .overlay {
  height: 100%;
}

.overlay p {
  position: absolute;
  font-size: 11px;
}
@media (max-width: 768px) {
  .hero-radio {
    height: 500px;
  }
  .hero-radio-headings h1 {
    font-size: 34px;
  }
  .hero-radio-headings {
    position: absolute;
    top: 160px;
    left: 50px;
  }
  .hero-radio-sub-heading {
    font-size: 30px !important;
  }
  .third-button {
    padding: 50px 100px;
  }
  .hero-radio-headings div {
    width: 300px;
  }
}

.hero-services {
  background-image: url("../images/graduate.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.hero-services::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(36, 49, 7, 0.5);
}
.hero-services-sub-heading {
  position: absolute;
  top: 50px;
  left: 10px;
  width: 500px !important;
}
.row-service-contact {
  border: 2px solid var(--first-color);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.service-heading h3 {
  color: var(--second-color) !important;
}
.service-icon {
  color: var(--third-color);
}
.service-img img {
  /* border: 2px solid var(--second-color);*/
  box-shadow: 0px 0px 5px 0px rgba(115, 0, 34, 0.9);
}
/*.service-img {
  background-color: var(--second-color);
}*/
.rounded-img {
  border: 6px solid var(--second-color);
}
.link-service {
  color: var(--third-color);
}
.service-contacts {
  margin-left: 0px;
  padding-left: 0px;
  list-style: none;
}
.internships li {
  list-style: square;
}