@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap");
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

body {
  font-family: "Quicksand", sans-serif;
  overflow-x: hidden;
}
/* events section */
#events-section {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

/* blogs section */
#blogs-section {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

#blogs {
  margin-top: 50px;
}

#toggle-events {
  width: 40%;
  display: flex;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  gap: 10px;
  /*border: 2px solid green;*/
  justify-content: center;
  align-items: center;
  text-align: center;
}

#upcoming-h3,
#past-h3 {
  font-size: 15px;
  padding: 7px;
  border-radius: 7px;
  cursor: pointer;
  letter-spacing: 1px;
  word-spacing: 1px;
}

#upcoming-h3 {
  background-color: #ff029b;
  color: white;
  border: none;
}

#past-h3 {
  background-color: #384791;
  color: white;
  border: none;
}

#past-h3:hover {
  background-color: #ff029b;
}

#events {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  gap: 30px;
  padding-top: 20px;
}

#upcoming-events {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  gap: 30px;
  padding-top: 20px;
}

#past-events {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  gap: 30px;
  padding-top: 20px;
}

.event {
  width: 29%;
  border-radius: 7px;
  background-color: rgb(251, 248, 248);
}

.event-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 7px;
  z-index: -9999;
  position: inherit;
  margin-top: -19.2px;
}

#e-time {
  border: 1px solid #ff029b;
  background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.7));
  padding: 6px;
  position: relative;
  right: -10px;
  z-index: 9999;
  top: 0px;
  color: white;
  letter-spacing: 0.5px;
  word-spacing: 0.7px;
  border-radius: 6px;
}

.e-words {
  padding-top: 5px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  line-height: 25px;
  letter-spacing: 0.5px;
  word-spacing: 0.7px;
}

.e-title {
  font-size: 15px;
  color: #384791;
}

.e-para {
  font-size: 15px;
  color: #384791;
}

.e-list {
  list-style: none;
  color: #ff029b;
}

.con-reading{
 text-decoration: none;
color: #384791;
padding-top: 10px;
}

.con-reading:visited {
  color: #384791;
}

.con-reading:hover{
  color:#ff029b;
}

.e-icon {
  color: #e7ab29;
}

@keyframes move {
  from {
    margin-right: 5px;
  }
  to {
    margin-right: 15px;
  }
}

#view-all-events {
  text-align: center;
  font-size: 18px;
  color: #384791;
  margin-top: 30px;
  animation: move 1s infinite;
}

.all-anc {
  color: #384791;
  text-decoration: none;
}

.all-anc:visited {
  color: #384791;
}

.all-anc:hover {
  font-size: 16px;
}

.all-icon {
  color: #ff029b;
}

/*surgical missions events*/
.mySlides {
  display: none;
}

img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(255, 2, 155, 0.8);
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: black;
}

/* Caption text */
.text {
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  width: 48%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  margin: 0 auto;
}

/* Number text (1/3 etc) */
.numbertext {
  color: white;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  background-color: rgba(255, 2, 155, 0.8);
  padding: 10px;
  width: 50px;
  border-bottom-right-radius: 50px;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: black;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

.mySlides img{
    object-fit:cover;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px;
  }
}

/*surgical missions events 2*/
.mySlides2 {
  display: none;
}

img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container2 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev2,
.next2 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(255, 2, 155, 0.8);
}

/* Position the "next button" to the right */
.next2 {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev2:hover,
.next2:hover {
  background-color: black;
}

/* Caption text */
.text2 {
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  width: 48%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  margin: 0 auto;
}

/* Number text (1/3 etc) */
.numbertext2 {
  color: white;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  background-color: rgba(255, 2, 155, 0.8);
  padding: 10px;
  width: 50px;
  border-bottom-right-radius: 50px;
}

/* The dots/bullets/indicators */
.dot2 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active2,
.dot2:hover {
  background-color: black;
}

/* Fading animation */
.fade2 {
  animation-name: fade;
  animation-duration: 1.5s;
}

.mySlides2 img{
    object-fit:cover;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev2,
  .next2,
  .text2 {
    font-size: 11px;
  }
}

#vol-success {
  background-color: green;
  color: white;
  padding: 15px;
  position: fixed;
  top: 5px;
  border-radius: 7px;
  left: 5px;
  z-index: 9999;
}

#vol-error {
  background-color: red;
  color: white;
  padding: 15px;
  position: fixed;
  top: 5px;
  border-radius: 7px;
  left: 5px;
  z-index: 9999;
}

#h-ani {
  width: 100%;
}

#ani-img {
  width: 100%;
  height: 800px;
  object-fit: cover;
}

#ani-bg {
  width: 100%;
  height: 800px;
  position: absolute;
  top: 0px;
  background: linear-gradient(
    to right,
    rgb(255, 255, 255, 0.5),
    rgba(56, 71, 145, 0.5),
    rgb(255, 2, 155, 0.5)
  );
}

#ani-words {
  margin-top: 370px;
  margin-left: 70px;
  color: white !important;
  line-height: 45px;
  background-color: rgba(56, 71, 145, 0.9);
  width: 90%;
  padding-left: 10px;
  border-radius: 7px;
}

#ani-header {
  letter-spacing: 1.5px;
  word-spacing: 1px;
  font-size: 32px;
}

#ani-para {
  letter-spacing: 1.5px;
  word-spacing: 1px;
  font-size: 22px;
}

header {
  display: flex;
  justify-content: space-evenly;
  background-color: transparent;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9999;
}

/* .header2 {
  background-color: rgba(0, 0, 0, 0.7);
} */

.header3{
  /* background-color: rgba(0, 0, 0, 0.8); */
  background-color: rgba(248, 244, 244, 0.9);
  transition: 2s;
  color: white;
}

#logo-holder {
  width: 10%;
  border-radius: 8px;
}

#logo {
  width: 100%;
  height: 90px;
  object-fit: contain;
}

#nav1 {
  width: 55%;
}

#nav2 {
  width: 25%;
}

#nav1 ul {
  display: flex;
  justify-content: space-evenly;
  position: relative;
  top: 38px;
  list-style: none;
}

#nav2 ul {
  display: flex;
  justify-content: space-evenly;
  position: relative;
  top: 38px;
  list-style: none;
}

.nav-anchor {
  text-decoration: none;
  color: white;
  letter-spacing: 1px;
  word-spacing: 1px;
  font-size: 14.5px;
}

.nav-anchor-change{
  color: #384791;
}

.header-icon {
  color: white;
}

.header-icon-change {
  color: #384791;
}

.nav-anchor:hover {
  color: #ff029b;
}

.b {
  background-color: #384791;
  padding: 10px;
  color: white;
  border-radius: 7px;
}

.b:hover {
  background-color: #ff029b;
  color: white;
  cursor: pointer;
}

.fa-bars {
  display: none;
}

.fa-close {
  display: none;
}

#bar-nav {
  display: none;
}
/* welcome adddress */
.founder-card {
  width: 40%;
  margin: 300px 0 50px 80px;
  padding: 20px;
  background-color: rgba(56, 71, 145, 0.9);
  /* Transparent background */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: left;
  border: 1.5px solid white;
  /* Align to the left */
}

#founder-img {
  width: 90px;
  height: 90px;
  /* Adjust the image size */
  object-fit: cover;
  border-radius: 50%;
  margin-right: 10px;
}

.founder-details {
  display: inline-block;
    position: relative;
  top: -20px;
}

.founder-details h2 {
  margin: 5px 0;
  color: white;
}

.founder-details p {
  margin: 0;
  color: white;
}

.welcome-message {
  margin-top: 20px;
  color: white;
  line-height: 1.6;
}

/* INTRODUCTION */
#intro {
  padding: 50px 0;
}

.intro-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.intro-image {
  flex: 1;
  margin-right: 20px;
}

.intro-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.intro-words {
  flex: 2;
}

#intro-header {
  color: #384791;
  font-size: 23px;
  text-align: center;
  margin-bottom: 20px;
}

.money-header{
  margin-top: 50px;
}

.intro-para {
  color: #555;
  line-height: 30px;
  margin-bottom: 20px;
}

#abt-more {
  color: #ff029b;
  text-decoration: none;
}

/* CORE AREAS */

#particle-container {
  position: relative;
  width: 100%;
}

.particle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.7);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: moveParticle linear infinite;
  z-index: -1;
  margin-top: 780px;
}

@keyframes moveParticle {
  0% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(100vh) translateX(100vw);
  }

  100% {
    transform: translateY(0) translateX(0);
}
}

#core-areas {
  margin-top: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
}

.intro-header {
  color: #384791;
  font-size: 36px;
  text-align: center;
  z-index: 9999;
}

.focus-para {
  text-align: left;
  color: #555;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 20px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  z-index: 9999;
}

#areas {
  width: 80%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.area {
  flex: 0 1 calc(33.33% - 20px);
  margin-bottom: 30px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

.core-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
  border: 2px solid white;
}

.core-words {
  text-align: center;
  font-size: 18px;
  padding: 15px;
  background-color: #384791;
  margin: 0;
  border-radius: 0 0 15px 15px;
}

/* Moving core values */
#core-images {
  width: 80%;
  margin-top: 500px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-around;
}

.core-round-img {
  object-fit: cover;
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: 1px 5px 2px #384791;
}

#overlay1 {
  display: none;
}

.core-bg {
  position: relative;
  transform-origin: 50% 50%;
  animation: rotateAndScale 6s linear infinite;
  cursor: pointer;
}

#core-bg2 {
  bottom: 400px;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  display: none;
  cursor: pointer;
}

.overlay-text {
  font-size: 15px;
  margin-top: 140px;
}

@keyframes rotateAndScale {
  0%,
  100% {
    transform: scale(1);
  }

  25%,
  75% {
    transform: scale(1.5);
  }

  50% {
    transform: scale(1);
  }
}

/* ACHIEVEMENTS SO FAR */
#achievement {
  /* background: linear-gradient(to right, rgb(255, 2, 155, 0.6), 
    rgb(255, 2, 155, 0.6)), url("img/achievement.jpg"); */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white !important;
  padding-top: 50px;
  padding-bottom: 70px;
  margin-top: 90px;
}

.ach-header {
  color: #384791 !important;
  text-align: center;
}

#achieve {
  width: 90%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
}

.achieve {
  width: 30%;
}

.ach-img {
  width: 100%;
  height: 270px;
  border: 2px solid white;
  padding: 5px;
  border-radius: 50% 20% / 10% 40%;
  object-fit: cover;
}

.a-w {
  font-size: 15px;
}

#volunteer {
  text-align: center;
  margin-top: 70px;
  margin-bottom: 60px;
  padding: 10px;
  background-image: linear-gradient(to right, #384791, #ff029b);
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  animation: jump-shaking 3s infinite;
  -webkit-animation: jump-shaking 3s infinite;
  border-radius: 7px;
}

@keyframes jump-shaking {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateY(-9px);
  }
  35% {
    transform: translateY(-9px) rotate(17deg);
  }
  55% {
    transform: translateY(-9px) rotate(-17deg);
  }
  65% {
    transform: translateY(-9px) rotate(17deg);
  }
  75% {
    transform: translateY(-9px) rotate(-17deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

#volunteer:hover {
  cursor: pointer;
  background-image: linear-gradient(to left, #384791, #ff029b);
}

#v-anchor {
  color: white;
  text-decoration: none;
}

#v-anchor:hover {
  color: white;
}

/* testimonials */
.testimonials-container {
  display: flex;
  overflow: hidden;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  margin-bottom: 70px;
  position: relative;
  background-color: #384791;
  /* Dark background color */
  border-radius: 10px;
  /* Rounded corners */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  /* Box shadow for a subtle effect */
}

.testimonial-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  display: none;
}

.test-img {
  width: 200px;
  max-height: 200px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}

h3 {
  margin: 10px 0;
  color: white;
}

p {
  margin: 5px 0;
  color: white;
}

.testimonial-text {
  font-style: italic;
}

.controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  border-radius: 10px;
}

#prev {
  background-color: #ff029b;
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

#next {
  background-color: #ff029b;
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: rgba(255, 2, 155, 0.8);
}

/* partnering companies */
.partners-section {
  text-align: center;
  padding: 50px 0;
  /* background-color: #d7d2d2; */
  background-color: rgb(251, 248, 248);
}

.cop-header {
  text-align: center;
  color: white;
}

.partners-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow-x: auto;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar */
}

.partner-item {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 15px;
  text-align: center;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(225, 223, 223, 0.5);
  background-color: white;
}

.partner-img {
  max-width: 100%;
  max-height: 150px;
  margin: 0 auto;
}

.announcement-title {
  text-align: center;
  color: #384791;
  font-weight: 700;
  margin-bottom: 15px;
  margin-top: 70px;

  /* Responsive font size */
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.announcement-text {
  text-align: center;
  color: #384791;
  max-width: 700px;
  margin: 0 auto 25px auto;
  line-height: 1.6;

  /* Responsive font size */
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  padding: 0 15px;
}

.announcement-image-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0 20px;
}

.announcement-image-wrapper img {
  width: 48%;
  max-width: 500px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

/* Mobile view */
@media (max-width: 768px) {
  .announcement-image-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .announcement-image-wrapper img {
    width: 90%;
  }

  .announcement-title {
    margin-top: 50px;
  }
}


#money-donation{
  width: 60%;
  padding-top: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
  background-color: #f3f0f0;
  border-radius: 8px;
  padding-bottom: 30px;
}

/* FOOTER */
#footer {
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8)
    ),
    url("img/footer.jpg");
  padding-bottom: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
}

#footer-container {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

.footer {
  width: 24%;
  color: #384791;
  margin-top: 40px;
}

#footer-logo {
  width: 100px;
  height: 80px;
  object-fit: contain;
}

.footer-header {
  letter-spacing: 1px;
  letter-spacing: 1px;
  font-size: 18px;
}

.footer-para {
  letter-spacing: 1px;
  word-spacing: 1px;
  line-height: 25px;
  padding: 5px;
  color: #384791;
  font-size: 15.5px;
}

#f-ul {
  line-height: 30px;
  padding: 5px;
}

.f-ul {
  list-style: none;
}

.f-para {
  color: #384791;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 1px;
  word-spacing: 1px;
  font-size: 15px;
}

.f-anchor {
  color: #384791;
  text-decoration: none;
  font-size: 15.5px;
}

.f-anchor:hover {
  color: #ff029b;
}

#f-para {
  margin-top: 100px;
}

/* subscription form */

#sub-container {
  margin-left: -130px;
}

#sub-form {
  width: 100%;
  margin-top: 19px;
}

.sub-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1.5px solid #384791;
  background-color: inherit;
  font-family: inherit;
  font-size: 15px;
  outline: 0px;
  border-radius: 5px;
  color: #384791;
}
.sub-btn {
  border: 0px;
  cursor: pointer;
  color: #ff029b;
  font-size: 15px;
  letter-spacing: 0.7px;
  border-radius: 7px;
  margin-top: 7px;
  font-family: inherit;
  background-color: inherit;
  animation: moveSubmitBtn 1s linear 1s infinite alternate;
  -webkit-animation: moveSubmitBtn 1s linear 1s infinite alternate;
}

@keyframes moveSubmitBtn {
  from {
    margin-left: 11px;
  }

  to {
    margin-right: 11px;
  }
}
.sub-input::placeholder {
  color: #384791;
}
/* .em {
  text-decoration: none;
  color: black;
}

.em:visited {
  color: black;
} */

.social {
  display: flex;
  align-items: start;
}

.s-icon {
  color: #ff029b;
  padding: 10px;
  font-size: 20px;
}

.b-cloud {
  border-bottom: 1px solid #ff029b;
  font-size: 13px;
}

.cloud {
  margin-top: 30px;
}

/* ABOUT US PAGE */

#abt-ani {
  height: 400px;
  background: linear-gradient(
      to right,
      rgb(255, 255, 255, 0.5),
      rgba(56, 71, 145, 0.5),
      rgb(255, 2, 155, 0.5)
    ),
    url("img/footer.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white !important;
  height: 450px;
  /* padding-top: 50px;
    padding-bottom: 70px; */
}

#abt-ani-header {
  font-size: 30px;
  text-align: center;
  padding-top: 250px;
}
#intro-words {
  width: 80%;
  margin: auto;
}

#by-founder{
  color:#384791;
}
#mv-holder{
  padding-top: 20px;
    padding-bottom: 30px;
    background: linear-gradient(to right,
        rgba(56, 71, 145, 0.8),
        rgb(255, 2, 155, 0.8)),
      url("img/footer.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    margin-top: -50px;
}

#m-v {
  width: 90%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
  align-items: center;
}

.msn-w{
  color: white;
}

.m-v {
  width: 45%;
}

.msn-icon{
  color:#ff029b;
  font-size: 20px;
}

#vision{
  top: -190px;
  position: relative;
}

#core-values {
  margin-top: 60px;
}

#values {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-flow: row wrap;
  width: 70%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.values {
  width: 16%;
  margin-left: 20px;
    margin-right: 20px;
      margin-bottom: 100px;
}

.v-img {
  width: 150px;
  margin: 0 auto;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border: 2px solid #ff029b;
  padding: 5px;
}

.v {
  background: linear-gradient(to right, #384791, #ff029b);
  border-radius: 7px;
  padding: 5px;
}

.v:hover {
  background: linear-gradient(to left, #384791, #ff029b);
  cursor: pointer;
}

#board {
  margin-top: 90px;
}

#member {
  width: 80%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.member:nth-child(odd) {
  background-color: rgb(248, 244, 244);
}

.member {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
  overflow: hidden;
  margin-bottom: 80px;
  padding-top: 20px;
  border: 0.2px solid #ff029b;
  box-shadow: 2px 2px 2px 1px #ff029b;
  padding-bottom: 20px;
}

.b-img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
}

.b-words {
  width: 60%;
}
details {
  margin-top: -16px;
  margin-bottom: 20px;
}

summary {
  color: #384791;
}

summary:hover {
  cursor: pointer;
}
.b-para {
  margin-bottom: 20px;
}

#team-section {
  margin-top: 90px;
  padding-top: 30px;
  padding-bottom: 30px;
  background: linear-gradient(
      to right,
      rgba(56, 71, 145, 0.5),
      rgb(255, 2, 155, 0.5)
    ),
    url("img/footer.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.team-header {
  color: white !important;
  text-align: center;
}

#team {
  width: 80%;
  margin-top: 50px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
}

.team {
  width: 35%;
  padding: 5px;
  margin-bottom: 20px;
}

.team-img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
margin-left: 50px; 
}

.team-words {
  border-radius: 7px;
  border: 2px solid white;
  padding: 10px;
  line-height: 25px;
}

.team-title {
  text-align: center;
  color: white;
  letter-spacing: 1px;
  word-spacing: 1px;
  font-size: 15px;
}

.team-name {
  text-align: center;
  color: white;
}

/* CONTACT US PAGE */
.contact-ani {
  background: linear-gradient(
      to right,
      rgba(56, 71, 145, 0.5),
      rgb(255, 2, 155, 0.5)
    ),
    url("img/footer.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact {
  padding-top: 90px;
}

#contact-container {
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
  width: 100%;
}

.contact {
  width: 45%;
  padding-top: 40px;
  margin-bottom: 200px;
  background-color: #f3f0f0;
  border-radius: 7px;
}

.address {
  height: 350px;
  padding-left: 20px;
}

.add-li {
  margin-bottom: 25px;
  margin-left: 5px;
  margin-right: 5px;
  list-style: none;
}

.con-icon {
  color: #ff029b;
}

.em {
  color: #384791;
  text-decoration: none;
  cursor: pointer;
}

.em:hover {
  color: #ff029b;
}

#contact-form {
  width: 100%;
  margin-top: 10px;
  padding-bottom: 20px;
  padding-top: 10px;
}

.c-para {
  width: 90%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
  letter-spacing: 1px;
  word-spacing: 1px;
  color:#384791;
}

.c-input {
  width: 100%;
  padding: 20px;
  outline: none;
  margin-top: 10px;
  font-family: inherit;
  letter-spacing: 1px;
  word-spacing: 1px;
  font-size: 15px;
  border-radius: 5px;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  color: #384791;
}

.c-input::placeholder {
  color: #384791;
}

textarea {
  height: 120px;
}

.submit-input {
  margin-top: 20px;
  margin-left: 50px;
  padding: 10px;
  background: linear-gradient(to right, #384791, #ff029b);
  color: white;
  text-align: center;
  font-size: 15px;
  border: none;
  border-radius: 10px;
  letter-spacing: 1px;
  word-spacing: 1px;
  border-radius: 7px;
}

.submit-input:hover {
  background: linear-gradient(to left, #384791, #ff029b);
  color: white;
  cursor: pointer;
  border: 2px solid white;
}

/* VOLUNTEERS' REGISTRATION */

.material-header {
  margin-top: 100px;
}

#vol-logo-holder {
  width: 70px;
  margin-top: 5px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5px;
}

#vol-logo {
  width: 100%;
}

#vol {
  width: 60%;
  margin-top: 100px;
  margin-bottom: 120px;
  margin-left: auto;
  margin-right: auto;
  background-color: #f3f0f0;
  padding-top: 10px;
  border-radius: 8px;
}

#vol2 {
  width: 60%;
  margin-top: 10px;
  margin-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  padding-top: 10px;
}

.vol-header {
  color: #384791;
  text-align: center;
  font-size: 15px;
  letter-spacing: 1px;
  word-spacing: 1px;
}

#vol-form {
  padding-top: 10px;
  padding-bottom: 10px;
}

#money-form {
  padding-top: 10px;
  padding-bottom: 10px;
}

.vol-para {
  width: 80%;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  font-size: 16px;
  letter-spacing: 1px;
  word-spacing: 1px;
  color: #384791;
}

.vol-input {
  width: 100%;
  border: none;
  padding: 12px;
  border-radius: 10px;
  margin-top: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  background-color: white;
  color:#384791;
}

.textarea {
  height: 90px;
}

.vol-submit-input {
  width: 140px;
  margin-left: 65px;
  margin-top: 20px;
  text-align: center;
  padding: 10px;
  background-color: black;
  color: white;
  letter-spacing: 1px;
  word-spacing: 1px;
  font-size: 15px;
  border-radius: 7px;
}

.vol-submit-input:hover {
  background-color: #ff029b;
  color: white;
  cursor: pointer;
}



.m-input {
  margin-left: 5px;
  margin-top: 5px;
}

#already {
  text-align: center;
  letter-spacing: 1px;
  word-spacing: 1px;
  font-size: 15px;
  margin-top: 20px;
  color: #384791;
}

/* RESPONSIVE DESIGN */

@media (max-width: 1000px) {
  #nav2 {
    width: 31%;
  }

  #nav1 ul {
    top: 30px;
  }

  #nav2 ul {
    top: 30px;
  }

  .founder-card {
    width: 50%;
    margin: 200px 0 50px 20px;
  }

  .founder-details {
    position: relative;
    bottom: 18px;
    /* Align image and details in the same line */
  }

  .b {
    padding: 5px;
    font-size: 15px;
  }

  #team {
    width: 100%;
  }

  .team {
    width: 30%;
  }

  #sub-container {
    margin-left: -100px;
  }

  .sub-btn {
    padding: 8px;
    font-size: 14px;
  }

  #intro {
    padding: 50px 0;
  }

  .intro-container {
    width: 92%;
  }

    /* Moving core values */
    #core-images {
      margin-top: 410px;
    }
  
    .core-round-img {
      width: 250px;
      height: 250px;
    }

  
    #core-bg2 {
      bottom: 350px;
    }
  
    .overlay {
      width: 250px;
      height: 250px;
    }
  
    .overlay-text {
      margin-top: 100px;
    }
  
        .particle {
          margin-top: 810px;
        }
}

@media (max-width: 900px) {
  #logo-holder{
    margin-left: 5px;
  }

  #nav1{
    width: 52%;
    margin-left: -10px;
  }

  #nav2 {
      width: 38%;
    }

        /* Moving core values */    
        .core-round-img {
          width: 230px;
          height: 230px;
        }
    
        #core-bg2 {
          bottom: 320px;
        }
    
        .overlay {
          width: 230px;
          height: 230px;
        }
    
        .overlay-text {
          margin-top: 100px;
        }

        .sub-btn{
          padding: 5px;
        }
}

@media(max-width: 800px){
  /* Moving core values */
    .core-round-img {
      width: 210px;
      height: 210px;
    }
  
    #core-bg2 {
      bottom: 300px;
    }
  
    .overlay {
      width: 210px;
      height: 210px;
    }
  
    .overlay-text {
      margin-top: 80px;
    }
}

@media (max-width: 750px) {
  
  #logo-holder {
    width: 90px;
    position: absolute;
    left: 15px;
    height: 60px;
  }

  #logo{
    height: 70px;
  }


  #header {
    width: 100%;
    position: fixed;
    top: 0px;
    padding-bottom: 80px;
    padding-top: 5px;
    background-color: inherit;
  }

  #nav1 {
    display: none;
  }

  #nav2 {
    display: none;
  }

  .fa-bars {
    color: #384791;
    position: absolute;
    right: 20px;
    top: 25px;
    font-size: 35px;
    z-index: 9999;
    display: block;
  }

  .fa-close {
    color: #384791;
    position: absolute;
    right: 30px;
    top: 25px;
    font-size: 35px;
    z-index: 9999;
    display: none;
  }

  .fa-bars:hover {
    cursor: pointer;
  }

  #bar-nav {
    position: absolute;
    top: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding-left: 30px;
    padding-top: 35px;
    padding-bottom: 50px;
    display: none;
    height: 500px;
  }

  #nav3 {
    margin-bottom: 20px;
  }

  #nav3 ul li {
    line-height: 35px;
    list-style: none;
  }

  .nav-anchor3 {
    text-decoration: none;
    color: white;
    letter-spacing: 1px;
    word-spacing: 1px;
    font-size: 16px;
  }

  .nav-anchor3:hover {
    color: #ff029b;
    border-bottom: 2px solid white !important;
  }

  .b-li {
    line-height: 55px;
    list-style: none;
  }
  .b3 {
    background-color: #ff029b;
    padding: 10px;
    color: white;
    margin-bottom: 25px;
  }

  .b3:hover {
    background-color: white;
    color: #ff029b;
    cursor: pointer;
  }

    .founder-card {
      width: 90%;
      margin: 300px 0 50px 20px;
    }
  

  /* INTRODUCTION */

    .intro-container {
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
    }
  
    .intro-image {
      margin-right: 0px;
      width: 100%;
    }
  
    .intro-image img {
      height: 300px;
      object-fit: cover;
    }
  
    .intro-words {
      flex: 2;
    }
    

  #intro-header {
    font-size: 17px;
    line-height: 34px;
  }

  .intro-para {
    font-size: 16px;
  }

  #abt-more:hover {
    font-size: 14.5px;
  }

  /* CORE AREAS */
  #core-areas {
    margin-top: 10px;
  }

  #areas {
    margin-top: 45px;
    flex-flow: column wrap;
    width: 70%;
  }

  .area {
    width: 100%;
  }
  .core-img {
    height: 380px;
  }

    /* Moving core values */
    #core-images {
      width: 75%;
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: space-around;
      flex-flow: column nowrap
    }
  
    .core-round-img {
      object-fit: cover;
      position: relative;
      width: 250px;
      height: 250px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 50px;
      border-radius: 50%;
      box-shadow: 1px 5px 2px #384791;
    }
  
    .core-bg {
   margin-left: auto;
   margin-right: auto;
   margin-top: 50px; 
  }
  
    #core-bg2 {
      bottom: 0px;
    }
  
        .overlay {
          width: 250px;
          height: 250px;
          margin-top: 23px;
        }

    .overlay-text {
      font-size: 15px;
      margin-top: 100px;
    }
  
        .particle{
          margin-top: 1280px;
          
        }
    
  /* ACHIEVEMENTS SO FAR */

  #achieve {
    width: 70%;
    flex-flow: column wrap;
  }

  .achieve {
    width: 100%;
  }

  .ach-img {
    width: 100%;
    height: 380px;
    border-radius: 50% 20% / 10% 40%;
  }

  .a-w {
    margin-bottom: 40px;
    margin-top: 10px;
  }

  #volunteer {
    font-size: 15px;
    line-height: 28px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    border-radius: 7px;
  }

  /*events and blogs*/

  #toggle-events {
    width: 90%;
  }

  #upcoming-h3,
  #past-h3 {
    font-size: 14px;
    padding: 6px;
    letter-spacing: 0.7px;
    word-spacing: 0.5px;
  }

  #events {
    width: 80%;
    margin: auto;
    flex-flow: column nowrap;
  }

  #upcoming-events,
  #past-events {
    width: 80%;
    margin: auto;
    flex-flow: column nowrap;
  }

  .event {
    width: 100%;
  }

  .event-img {
    height: 310px;
  }

  #e-time {
    padding: 5px;
    font-size: 14px;
  }

  .e-words {
    line-height: 23px;
  }

  .e-title {
    font-size: 14px;
  }

  .e-para {
    font-size: 14px;
  }

  .e-list {
    font-size: 14px;
  }

  .e-icon {
    font-size: 14px;
  }

  #view-all-events {
    font-size: 14px;
  }

  .all-anc {
    font-size: 14px;
  }

  .all-icon {
    font-size: 14px;
  }

  /* FOOTER */

  #footer-container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    flex-flow: column nowrap;
  }

  .footer {
    width: 100%;
  }

  .footer-para,
  .f-ul {
    font-size: 14px;
  }

  .s-icon {
    font-size: 25px;
  }

  .b-cloud {
    font-size: 13px;
  }

    #sub-container{
      margin-left: -30px;
    }

  /* ABOUT US PAGE */

  #abt-ani-header {
    font-size: 25px;
  }

  #m-v {
    width: 80%;
    flex-flow: column nowrap;
    margin-top: -10px;
  }

  .m-v {
    width: 100%;
    margin-bottom: 40px;
  }

    #vision {
      top: 0px;
    }

  #ms {
    font-size: 16.5px;
  }

  #values {
    margin-top: 40px;
    width: 60%;
    flex-wrap: column wrap;
  }

  .values {
    width: 100%;
  }

  .v-img {
    height: 200px;
    width: 200px;
    margin-left: 105px;

  }

  .v{
    width: 40%;
    margin: auto;
  }

  #board {
    margin-top: 70px;
  }

  #member {
    width: 90%;
    margin-top: 60px;
  }

  .member {
    width: 100%;
    flex-flow: column wrap;
  }

  .b-img {
    width: 250px;
    height: 250px;
    padding: 5px;
    object-fit: contain;
    border-radius: 50%;
    margin: auto;
}

.b-name{
  text-align: center;
}

  .b-words {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

  .b-para {
    font-size: 15px !important;
  }

  #team {
    width: 80%;
    flex-flow: column;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .team {
    width: 100%;
    margin-bottom: 40px;
  }

  .team-img{
    margin-left: 175px;
  }

  .team-words {
    width: 60%;
    margin: 0 auto;
  }

  #contact-container {
    flex-flow: column wrap;
    width: 90%;
  }

  .contact {
    width: 100%;
  }

  /* VOLUNTEERS' REGISTRATION */

  #vol {
    width: 81%;
    margin-top: 70px;
    padding-bottom: 10px;
  }

  #vol2 {
    width: 81%;
    margin-top: 70px;
    padding-bottom: 10px;
  }

  .vol-header {
    font-size: 16px;
  }

  /* DONATIONS */

  #donation {
    width: 83%;
  }

  .don-header {
    font-size: 18px;
  }

  #don-container {
    width: 90%;
    flex-flow: column wrap;
  }

  .donation {
    width: 100%;
  }

  #money-donation {
    width: 80%;
    margin-top: 100px;
  }

  #already {
    font-size: 14px;
  }
}

@media (max-width: 650px) {
  #ani-words {
    margin-right: auto;
    margin-left: auto;
    width: 95%;
    padding-bottom: 10px;
  }

  #ani-header {
    padding-top: 10px;
    font-size: 17px;
  }

  #ani-para {
    font-size: 16px;
  }

  #values {
    width: 60%;
  }

  .values {
    width: 100%;
  }

  .v-img {
    height: 200px;
  }
}

@media (max-width: 550px) {
  #ani-header {
    margin-top: 500px;
  }

  #logo-holder {
    width: 100px;
  }

  .f-para {
    font-size: 13px;
    line-height: 35px;
  }

  .b-cloud {
    font-size: 13px;
  }

  #values {
    width: 60%;
  }

  .values {
    width: 100%;
  }
}

@media (max-width: 450px) {
  header {
    width: 90%;
  }

  #vol2,
  #vol {
    width: 95%;
  }

  #money-donation {
    width: 95%;
  }

  #areas,
  #achieve {
    width: 90%;
  }
  #values {
    width: 60%;
  }

  .values {
    width: 100%;
  }

  .v-img {
    height: 200px;
  }
}

@media (max-width: 350px) {
  #values {
    width: 60%;
  }

  .values {
    margin-bottom: 50px;
    width: 100%;
  }

  .v-img {
    height: 200px;
  }
}

@media (max-width: 300px) {
  #values {
    width: 60%;
  }

  .values {
    margin-bottom: 50px;
    width: 100%;
  }

  .v-img {
    height: 200px;
  }
}

.media-section {
  text-align: center;
 
 
  margin-top: 40px;
 
}

.media-section h1 {
  color: #384791;
  font-size: 28px;
  margin-bottom: 20px;
}
.media-div{
 /* border: 2px solid #ff029b; */
  width: 80%;
  margin: 40px auto;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}
.news-card {
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  min-width: 300px;
  max-width: 300px;
  transition: transform 0.3s;
  -webkit-transition: transform 0.3s;
  -moz-transition: transform 0.3s;
  -ms-transition: transform 0.3s;
  -o-transition: transform 0.3s;
}

.news-card:hover {
  transform: translateY(-5px);
}

.banner {
  position: relative;
  height: 180px;
  background: linear-gradient(to bottom, rgba(56, 71, 145, 0.8), rgba(56, 71, 145, 0.6));
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: top;
  opacity: 0.5;
}

.news-logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 120px;
  background: #ff029b;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.news-content {
  padding: 15px;
  text-align: left;
}

.media-section h2 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.read-more {
  display: inline-block;
  color: #384791;
  text-decoration: none;
  font-weight: bold;
  margin-top: 10px;
  transition: color 0.3s;
}

.read-more:hover {
  color: #28337a;
}