* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  color: white;
  background: rgb(19, 18, 18);
}
.icons {
  width: 40px;
}

/* Navigation Bar */

nav {
  display: flex;
  height: 120px;
  flex-direction: column;
  justify-content: space-between;
  background: rgb(19, 18, 18);
}

.nav-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  margin-left: 12px;
  margin-top: 5px;
  margin-right: 12px;
}

.nav-icons-img {
  width: 30px;
  height: 30px;
}

.nav-1-ls {
  width: 30%;
}
.nav-1-ls ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  font-weight: bold;
}
.nav-1-ls ul li {
  cursor: pointer;
}
.nav-1-ls ul li:hover {
  color: aqua;
}
.nav-1-rs input {
  border: none;
  outline: navajowhite;
  color: palevioletred;
  border-bottom: 2px solid blue;
  background: none;
  font-weight: bold;
}
.nav-2 {
  display: flex;
  justify-content: space-between;
  margin-left: 12px;
  margin-right: 12px;
  align-items: center;
  height: 80px;
}

.nav-2-ls {
  width: 25%;
}
.nav-2-ls ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
}

.nav-2-ls h2 {
  font-family: cursive;
  font-weight: bold;
  color: aqua;
  font-size: 2em;
}
.nav-2-ls ul li {
  padding: 8px 8px;
  background: #ffffff0f;
  border-radius: 50%;
  box-shadow: 1px 1px 2px 1px rgb(255 255 255 / 44%);
}

.nav-2-ls h2 span {
  color: rgb(255, 255, 255);
}

/* Body Section */

.section-one {
  background: url(images/bg.jpg) center center/cover;
  width: 100%;
  height: 70vh;
  color: #000;
  margin-bottom: 20px;
}

.section-one-content {
  padding-top: 10vh;
  padding-left: 10vh;
  position: relative;
}
.section-one-content h1 {
  font-size: 3.5em;
  font-weight: bold;
  font-family: helvetica;
  margin-bottom: 1vh;
}
.section-one-content h3 {
  color: aqua;
  font-weight: bold;
  font-family: helvetica;
}

.section-two {
  width: 100%;
}

.grid-sec-two {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-auto-rows: minmax(200px, auto);
}
.grid-sec-two > div {
  background: rgb(255, 255, 255);
  color: #000;
  margin: 2px 10px;
}

.grid-sec-two > div:nth-child(1) {
  grid-row: 1/4;
  animation-name: Animite;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  transition: 1s;
}
.grid-sec-two .vertical-box {
  padding: 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.grid-sec-two .vertical-box .image {
  width: 80%;
  height: 80%;
}
.grid-sec-two .vertical-box img {
  width: 100%;
  height: 100%;
}

.grid-sec-two > div:nth-child(2),
.grid-sec-two > div:nth-child(4),
.grid-sec-two > div:nth-child(3) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  animation-name: Animite;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  transition: 1s;
}

.grid-sec-two > div:nth-child(2) h2,
.grid-sec-two > div:nth-child(4) h2,
.grid-sec-two > div:nth-child(3) h2 {
  margin-top: 5%;
}

.grid-sec-two > div:nth-child(2) p,
.grid-sec-two > div:nth-child(4) p,
.grid-sec-two > div:nth-child(3) p {
  background: rgba(165, 162, 162, 0.137);
  height: 60%;
  margin: 0 2%;
  padding: 5%;
  line-height: 20px;
  width: 100%;
  text-align: center;
  font-size: 1.4em;
}

@keyframes Animite {
  0% {
    background: linear-gradient(209deg, rgb(0, 255, 237), rgb(249, 1, 250));
    transform: translateX(-3px);
  }
  10% {
    transform: translateX(-3px);
    background: linear-gradient(29deg, rgb(25, 0, 255), rgb(200, 1, 250));
  }
  20% {
    transform: translateX(2px);
    transform: translateY(-2px);
    background: linear-gradient(45deg, rgb(0, 255, 237), rgb(255, 255, 255));
  }
  40% {
    background: linear-gradient(209deg, rgb(255, 208, 0), rgb(1, 250, 42));
  }
  60% {
    transform: translateX(-3px);
    background: linear-gradient(209deg, rgb(51, 255, 0), rgb(250, 1, 1));
  }
  80% {
    transform: translateX(2px);
    transform: translateY(2px);
    background: linear-gradient(209deg, rgb(255, 0, 0), rgb(35, 116, 48));
  }
  99% {
    transform: translateX(-1px);
    background: linear-gradient(209deg, rgb(0, 255, 237), rgb(249, 1, 250));
  }
  100% {
    transform: translateX(-3px);
    background: linear-gradient(209deg, rgb(0, 255, 237), rgb(249, 1, 250));
  }
}

/* Footer */

footer {
  width: 100%;
  margin: 20px 0;
}
.socialMedia {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}

.socialMedia h2 {
  color: rgb(0, 255, 149);
}
.socialMedia ul {
  display: flex;
  list-style-type: none;
  margin-top: 12px;
  filter: invert(100%);
}
.socialMedia ul li {
  margin: 2px 12px;
  padding: 3px 3px;
}

.footerLinks {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: rgba(27, 26, 26, 0.473);
  margin-bottom: 0;
  padding-bottom: 40px;
  padding-top: 30px;
}
.footerLinks .footerGrid h2 {
  font-weight: bold;
  color: rgb(13, 212, 152);
}

.footerLinks .footerGrid ul {
  list-style-type: none;
}
.footerLinks .footerGrid ul li{
  margin: 5px 0;
  padding: 0;
}
.footerLinks .footerGrid ul a {
  text-decoration: none;
  color: gray;
}

.footerLinks .footerGrid ul li:hover {
  transform: translateX(-4px);
}
.footerLinks .footerGrid ul li:hover a {
  color: aqua;
  font-weight: bold;
}

.footer-social-media-icons{
  width: 25px;
  height: 25px;
}
.footer-social-media-icons:hover{
  filter:invert(100);
}
.copyright{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: gray;
  height: auto;
  margin-top: 10px;
}