* {
  margin: 0;
  padding: 0;
}
html {
  box-shadow: inset 0rem 0rem 2rem black;
}
body {
  width: 100%;
  font-family: "Poppins", sans-serif;
  /*
background: #1488CC;
background: -webkit-linear-gradient(to right, #2B32B2, #1488CC);
background: linear-gradient(to right, #2B32B2, #1488CC);





background: #536976;
background: -webkit-linear-gradient(to right, #292E49, #536976);
background: linear-gradient(to right, #292E49, #536976);  */

  background-color: rgba(16, 16, 20, 255);
  overflow-x: hidden;

  /* background: linear-gradient(to left, rgba(16, 16, 20, 255), #002749); */
}

nav {
  background-color: rgb(16, 16, 20);
  background-color: rgb(10, 10, 12);
  min-height: 4.5rem;
  z-index: 10;
  /* box-shadow: inset 1rem 1rem 1rem black; */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.navbar-brand {
  margin: 2rem;
}
.nav-item button {
  color: white;
  font-weight: 300;
  font-size: 85%;
}

.nav-item button:hover {
  color: white;
}

.nav-link {
  color: grey;
}
.nav-item {
  padding: 0 0.5rem;
  margin: 0.5rem;
}
.nav-item a {
  font-size: 0.8rem;
  color: blanchedalmond;
}
.nav-item a:visited {
  color: blanchedalmond;
}
.nav-item a:link {
  /* default color of link  */
  color: blanchedalmond;
}
.nav-item a:hover {
  color: white;
}
.nav-item:hover {
  background-color: rgb(255, 255, 255, 0.1);
  border-radius: 0.6rem;
}

.nav-second {
  margin-left: auto;
}

.nav-second .nav-item {
  margin: auto 0.5rem;
}
.navbar-toggler {
  margin: 2rem;
  margin-top: 3.5rem;
}

#download {
  background-color: rgb(37, 171, 224);
  background-color: #00539c;
  box-shadow: 0 0 15px rgb(12, 107, 145, 1);

  border-radius: 0.5rem;
  font-weight: 300;
  padding: 1rem;
  margin: 2rem;
  margin-left: 1rem;
  transition: box-shadow 0.5s, opacity 1s, transform 1s, background-color 0.5s;
}

#download a {
  color: bisque;
  transition: color 0.5s;
}
#download:hover a {
  color: black;
}
#download:hover {
  background-color: rgb(67, 181, 226);
  box-shadow: 0 0 15px rgb(12, 107, 145, 0.5);
}
/* earlier media tag */
.homebig {
  padding-left: 5rem;
  overflow-x: hidden;
  padding-right: 5rem;
}

/* home first  */

.home-first {
  height: fit-content !important;
  padding-top: 2rem;
  color: white;
  margin-bottom: 5rem;
  overflow: hidden;
}

.home-first-content {
  margin-top: 2rem;
  z-index: 5;
  min-height: fit-content !important;
}
.home-first h1 span {
  text-shadow: 2px 2px dodgerblue;
}
#ieeename {
  font-size: 3.7rem;
  font-family: "Poppins", sans-serif;
  text-shadow: 2px 2px dodgerblue;
}
.home-first h1 {
  font-weight: 700;
  font-size: 3rem;
  text-shadow: 2px 2px indianred;
}
.home-first p {
  text-align: justify;
  width: 28%;
  line-height: 1.7rem;
  min-height: 14rem;
  color: rgba(178, 190, 255, 0.755);
  letter-spacing: 0.1rem;
  font-weight: 200;
}

.home-first-content button {
  margin-right: 1rem;
  display: none;
}

.home-first-content button a {
  text-decoration: none;
  color: white;
}

#firstvideo {
  width: 65%;
  z-index: -10;
  opacity: 1;
  border-radius: 0.8rem;
  position: absolute;
  margin-left: 26rem;
  margin-top: 1rem;
  transition: margin-left 1.5s !important ;
  box-shadow: black 1rem 0.5rem 2rem;
}

.home-first #vid-back {
  width: 65%;

  opacity: 1;
  border-radius: 0.8rem;
  position: absolute;
  margin-left: 26rem;
  margin-top: 1rem;

  filter: blur(5rem);

  z-index: -100 !important;
}
.pop-out {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1.5s, transform 1.5s;
}

.pop-out.pop-out-active {
  opacity: 1;
  transform: translateY(0);
}
.first-image {
  height: 8rem !important;
  width: 20rem;

  object-fit: cover;
  margin-bottom: 3rem;
  /* border: #00539c thick; */
  /* border-style: outset; */
  /* border-radius: 2.3rem; */
  border-radius: 1.7rem;
  box-shadow: inset 200px 200px 200px white;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.686);
}
.ieee-btn {
  background-color: #00539c;
  color: bisque;
}

.learn-more {
  border: 2px dashed grey;
}
/* home second */

.home-second {
  padding-top: 2rem;
  margin-bottom: 7rem;
}
.title-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-line h3 {
  font-weight: 700;
  color: white;
}
.cards {
  display: flex;
  overflow-x: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.cards::-webkit-scrollbar {
  display: none;
}
.card {
  background-color: rgba(16, 16, 20, 255);
  width: 40rem;
  height: 20rem;
  border: 2px #00539c dashed !important;
  color: white;
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 1rem;
  border: solid 1px rgba(16, 16, 20, 255);

}
.card:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border: solid 1px rgba(16, 16, 20, 255);
}
.card p {
  font-size: 0.8rem;
  color: rgb(255, 255, 255, 0.5);
  font-weight: 400;
  letter-spacing: 0.05rem;
}
.card li {
  width: fit-content;

  text-align: center;
  border-radius: 0.6rem;
  margin-left: 0;
  background-color: rgb(255, 255, 255, 0.1);
}
.card .row {
  height: 100% !important;
}
.card img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.home-second .cards {
  .card {
    min-width: 40rem;
  }
}
.home-second .card-body {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
}

.card:hover img {
  transform: scale(1.05); /* Zoom in the image on hover */
}
.home-third {
  color: white;
  margin-bottom: 10rem;
  padding: 2rem;
}
.home-third h1 {
  font-weight: 700;
  font-size: 3rem;
}

.home-third p {
  font-size: 1.3rem;
  width: 85%;
  font-weight: 300;
  color: rgb(255, 255, 255, 0.4);
}

.home-third img {
  width: 60%;
  padding: 2rem;
  border-radius: 3rem !important;
}
#img-div-msg {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
/* stats banner */
.stats-banner-big {
  width: 100%;
}
.stats-banner {
  display: flex;
  width: 100%;
  flex-wrap: nowrap !important;
  justify-content: center;
}
.stats-banner-title {
  text-align: center;
  color: white !important;
  font-weight: 600;
}
.stats-banner-title {
  margin-bottom: 5rem;
}
.banner-div {
  color: white;
  width: 25rem;
  height: 18rem;
  margin: 2rem;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  border-radius: 2rem;
  transition: transform 0.3s ease-in-out, opacity 1.5s;
}
.banner-div .overlay {
  position: absolute;
  top: 0;
  border-radius: inherit;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
}

.banner-div h3 {
  text-align: center;
  z-index: 2;
}
/* .banner-div img {
  width: 100%;
  border-radius: 1rem;
  opacity: 0.8;
  z-index: 0;
  object-fit: cover;
  position: absolute;
  z-index: -2;
  transition: transform 0.3s ease;
} */
.banner-div:hover {
  transform: scale(1.05);
}

/* home fourth */
.home-fourth {
  padding-bottom: 6rem;
}
.home-fourth .card {
  width: 30rem;
  border-radius: 2rem;
  height: 40rem;
  margin: 2rem;
}
.home-fourth img {
  object-fit: cover;
  max-height: 15rem;
}
.home-fourth h1 {
  color: white;
  font-size: 3rem;
  font-weight: 700;
}

.home-fourth p {
  font-size: 1.1rem;
  width: 85%;
  font-weight: 300;
  color: rgb(255, 255, 255, 0.4);
}

.home-fourth .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-fourth .card-body .card-title {
  font-size: 1.6rem;
  color: bisque;
  /* text-shadow: 1px 1px dodgerblue; */
  padding: 0.5rem;
  border-bottom: 3px solid moccasin;
}

.home-fourth .card-body .card-text {
  text-align: center;
  color: bisque;
  text-shadow: 2px 1px brown;

  font-weight: 500;
  width: 100%;

  padding: 1rem;
}
.home-fourth .card {
  border: solid #7f9f80 0px !important;
  box-shadow: 0px 0px 2rem #000;
}
.fourth-cards {
  display: flex;
  flex-wrap: wrap;
}
.fourth-cards .card {
  width: 18rem;
  margin: 0;
  margin-right: 2rem;
  margin-bottom: 3rem;
}
.img-top-text {
  /* position: absolute; */
  /* bottom: 10%;
  left: 10%; */
  z-index: 1;
  font-size: 1.5rem;
  transition: margin-bottom 0.2s;
}

.card:hover .img-top-text {
  margin-bottom: 1rem;
}

/* home fifth */

.home-fifth {
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.home-fifth .title-line h3 {
  font-size: 3rem;
}
.home-fifth .title-line button {
  height: 3rem;
}

.how-to-cards {
  display: flex;
}

.how-to-cards .card {
  padding: 2rem;
  padding-bottom: 3rem;
}

.how-to-cards .card button {
  width: 60%;
}
.fifth-banner {
  border: 1px gray solid;
  border-radius: 1rem;
  padding: 2rem;
}

.fifth-banner p {
  margin: 0;
  color: rgb(255, 255, 255, 0.4);
}

/* team page */

/*  */

.big-div-team {
  background-color: seashell;
}
.team-banner {
  background-color: #00539c;
  min-height: 50vh;

  color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.team-banner h1 {
  font-size: 3.5rem;

  font-weight: 800;
  text-shadow: dodgerblue 2px 2px;
  text-align: center;
}

.team-banner h2 {
  font-weight: 300;
  text-align: center;
}
.team-a {
  background-color: powderblue;
  padding-bottom: 5rem;
}
.team-b {
  padding-bottom: 5rem;
  background-color: seashell;
}
.team-a h1,
.team-b h1 {
  background-color: blanchedalmond;

  padding: 1rem;
}
.team-cards {
  height: fit-content;
  display: flex;

  padding-top: 1rem;
  /* padding-bottom: 6rem; */
  justify-content: center;
}
.team-title {
  font-size: 2rem;
  color: #00539c;
  text-shadow: dodgerblue 1px 1px;
  font-weight: 800;
  text-align: center;
}

.person img {
  width: 15rem;
  height: 15rem;
  object-fit: cover;
  border-radius: 30%;
  border: blanchedalmond thick solid;
}
.person {
  width: 50rem;
  border: black 0px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* connect us page  */

/*  */
.contactus {
  background-color: #242424;
  height: fit-content;

  padding: 0rem;
  padding-bottom: 5rem;
  color: white;
}

.contactus h1 {
  text-align: center;
  padding-top: 5rem;
}

.map-div {
  display: flex;
  padding-top: 2rem;
  justify-content: center;
  align-items: center;
}

iframe {
  border-radius: 2rem;
  width: 80%;
  height: 30rem;
  margin-bottom: 3rem;
}

/* */
.footer {
  height: 108vh;
  background-color: #00539c;
  padding: 2rem 5rem;
}
.footer h1 {
  color: wheat;
  font-size: 2.1rem;
  /* text-shadow: lightcoral 2px 1px; */
}

.foot-links a {
  font-family: monospace;
  text-decoration: none;
  color: white;
}

.socials-div {
  background-color: rgba(16, 16, 20, 255);
  padding: 1rem;
  border-radius: 1rem;
  margin-top: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
}
.socials {
  display: flex;
  justify-content: center;
  align-items: center;
}
.socials a {
  margin: 0.5rem;
  font-size: 2rem;
}

/* cursor animation  */
.circle {
  display: none;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999999; /* so that it stays on top of all other elements */
}

/* the glowing blob */

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  50% {
    scale: 1 1.5;
  }

  to {
    rotate: 360deg;
  }
}
#blob {
  background-color: white;
  height: 34vmax;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: dodgerblue;
  background: linear-gradient(to right, #525ceb, blue);
  animation: rotate 10s infinite;
  opacity: 0.6;
  /* filter: blur(0rem); */
  z-index: -100 !important;
}

#blur {
  /* z-index: -50; */
  backdrop-filter: blur(12vmax);
}

/* events */
.events-big h1 {
  color: white;
  text-align: center;
  padding: 5rem;
  padding: 2rem;
}
.events-cont {
  padding: 5rem;
  /* background-color: rgb(220, 214, 255); */
  padding-bottom: 10rem;
  flex-direction: column;
  .card {
    width: 100%;
    .col-md-4 {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .card:hover {
    background-color: #000000d3;
  }
}

.about-big {
  color: midnightblue;
  background-color: powderblue;
  padding: 5rem;
  line-height: 2rem;
}
.about-big h1,
.about-big h2,
.about-big p {
  text-align: center;
}

.about-big h1,
.about-big h2 {
  color: #00539c;
  text-shadow: 2px 1px dodgerblue;
}

.about-big h2 {
  padding: 1rem;
  border-bottom: solid 2px #00539c;
}
.about-big p {
  margin: 3rem auto;
  color: black;
}

.eventSpecificBig {
  padding: 5rem;
  color: white;
  h1 {
    text-align: center;
    margin: 3rem;
    text-decoration: underline grey dotted;
  }
  h2 {
    font-size: 1.5rem;
    margin: 2rem;
    text-align: center;
  }
  h3 {
    margin: 2rem;
  }
  p,
  li {
    margin: 4rem;
  }
  .imagesDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    img {
      width: 20rem;
      height: 20rem;
      object-fit: cover;
      object-position: center;
      border-radius: 0.7rem;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.327);
      transition: all 0.5s;
    }
    img:hover {
      width: min(30rem, 100%);
    }
  }
}

@media screen and (max-width: 1310px) {
  #firstvideo {
    width: 60% !important;
    margin-top: 5rem;
  }
  #blob {
    display: none !important;
  }
  .home-second .cards {
    .card {
      width: 100%;
    }
  }
}
@media screen and (max-width: 1100px) {
  #blob {
    display: none !important;
  }
  #svgline {
    display: none;
  }
  .home-second .cards {
    flex-wrap: wrap;
  }
  .navbar-brand-cont {
    padding-top: 2rem;
  }

  .home-third h1 {
    font-size: 2rem !important;
  }

  .home-third p {
    font-size: 1rem !important;
  }

  .home-fourth .cards {
    flex-wrap: wrap;
  }

  .home-fourth .cards .card {
    transform: scale(0.8);
  }

  .first-video {
    position: static;
    display: none;
  }
  .first-video video {
    width: 40rem !important;
    top: 50% !important;
  }

  .home-first {
    min-height: fit-content;
  }

  .home-first-content {
    min-height: 100% !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      width: 100%;
      text-align: center;
    }
  }
  .for-mob-video {
    display: block !important;
    width: 100%;
    margin-bottom: 2rem;
  }
  .for-mob-video video {
    display: block !important;
    width: 100%;
    border-radius: 2rem;
    border-radius: 1rem;
  }
  .home-second .card-body {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .home-second .card-title {
    font-size: 2rem;
    text-align: center;
    margin: 1rem;
  }

  .stats-banner {
    .banner-div {
      border-radius: 0rem;
    }
  }

  .home-fourth {
    .cards {
      align-items: center;
      justify-content: center;
      .card {
        margin: 0;
      }
    }
  }
  .contact-cont .team-cards {
    flex-wrap: wrap;
  }
  .contact-cont .team-cards .person {
    margin: 2rem;
  }
  .contact-cont .team-cards .person p {
    text-align: center;
  }
  .footer {
    height: fit-content;
  }
  .eventSpecificBig {
    padding: 0;
    p,
    li {
      margin: 2rem;
    }
    .imagesDiv {
      margin-bottom: 5rem;
    }
  }
}

@media screen and (max-width: 768px) {
  .home-fourth h1 {
    font-size: 2rem !important;
  }
}

@media screen and (max-width: 670px) {
  .circle {
    display: none;
  }
  .navbar {
    box-shadow: initial;
  }
  .navbar-brand-cont {
    padding: 0;
  }
  #blob {
    display: none !important;
  }
  .navbar-brand {
    margin: 0;
    padding: 0;
  }
  .navbar-brand img {
    margin: 0 !important;
  }
  .navbar-toggler {
    margin: 0;
  }
  .homebig {
    padding: 0 !important;
  }

  .home-first-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .home-first p {
    width: 100% !important;
    padding: 1rem;
  }

  .home-first h1 {
    margin: 2rem;
    text-align: center;
  }

  .home-second .cards {
    width: 100%;
    .card {
      min-width: 5rem;
      height: fit-content;
    }
  }
  .home-second .card-title {
    font-size: 1.5rem !important;
  }
  .home-second .card-text {
    text-align: center;
  }

  .events-cont {
    justify-content: center;
    align-items: center;
    .card {
      width: 90%;
      height: fit-content;
    }
  }
  .for-mob-video {
    padding: 2rem;
  }
  .title-line h3 {
    margin: 0;
    padding-left: 1rem;
  }
  .whynfsubtn {
    width: 91%;
  }

  .map-div {
    padding: 2rem;
  }
  .map-div iframe {
    width: 200%;
  }

  .person img {
    width: 10rem !important;
    height: 10rem !important;
  }
  .person h2 {
    font-size: 1rem !important;
  }
  .person p {
    font-size: 0.8rem !important;
    text-align: center !important;
    padding: 0.7rem;
  }
  .person h3 {
    text-align: center !important;
    font-size: 1rem !important;
  }
  /* .team-cards {
    padding-bottom: 0 !important;
  } */
  .home-first {
    min-height: 170vh !important;
  }
  .home-third {
    margin-bottom: 0rem;
  }
  .home-third p {
    font-size: 0.7rem !important;
  }
  .home-fourth .card {
    margin: 0 !important;
  }
  .home-fourth .card p {
    padding: 1rem !important;
  }
  #team-banner-h2 {
    font-size: 1rem;
  }
  .contactus h1 {
    opacity: 1;
    transform: translateY(0);
  }
  .pop-out {
    transform: translateY(0) !important;
  }
  .stats-banner-big {
    display: flex;
    padding: 0 !important;
    flex-direction: column;
  }
  .stats-banner {
    display: flex;
    flex-direction: column;
  }
  .stats-banner-title {
    margin-bottom: 4rem;
  }
  .banner-div {
    margin: 0;
    margin-bottom: 3rem;
    border-radius: 0;
    /* margin-top: -4rem !important; */
  }
  .events-cont {
    flex-wrap: wrap;
    padding: 0 !important;
    padding-bottom: 5rem !important;
  }
  .footer {
    padding: 2rem !important;
  }
  .map-div {
    margin-top: 4rem !important;
  }
  .about-big {
    padding: 2rem;
  }
  .person .socials {
    margin-top: auto;
    padding-top: 1rem;
  }
  .person .socials a {
    font-size: 1.5rem;
    margin: 0;
  }

  .eventSpecificBig {
    padding: 0;
    p,
    li {
      margin: 2rem;
    }
    .imagesDiv {
      margin-bottom: 5rem;
    }
  }
}