* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --secondary: rgb(27, 26, 26);
  --text-secondary: #fff;
  /* --box-1: rgba(168, 9, 207, 0.7); */
  --box-1: rgba(27, 26, 26, 0.9);
  --box-2: rgba(167, 6, 6, 0.7);
  --society-1: rgb(78, 6, 136);
}
body {
  font-family: 'Lato', sans-serif;
  line-height: 1.5rem;
  font-weight: 700;
}
.box {
  border-radius: 20px;
}
a {
  text-decoration: none;
}

.background {
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('jss-img2.jpg') no-repeat center center/cover;
  height: 80vh;
  opacity: 1;
  /* top: -50px; */
  transition: all 4s ease;
  animation: display 3s forwards ease;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
}
@keyframes display {
  to {
    /* opacity: 0.5; */
    /* top: 0; */
    height: 90vh;
  }
}

nav {
  /* background: var(--secondary);
  color: var(--text-secondary); */
  background: rgba(26, 25, 25, 1);
  color: var(--text-secondary);
}

.top {
  margin: 0 30px;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.link-list {
  display: flex;
  justify-content: center;
  align-items: center;
}
#link-bar {
  position: absolute;
  z-index: 2;
  /* top: 160px; */
  /* left: 380px; */
}
ul {
  align-self: center;
  /* border: solid white 3px; */
  background: rgba(190, 183, 168, 0.8);
  /* border-radius: 20px; */
  padding: 10px 20px;
  width: 100%;
}

ul li {
  list-style: none;
  /* margin-bottom: 20px;*/
}
.link-list li a {
  padding: 10px 30px;
  margin: 0 10px;

  font-size: 1.2rem;
  color: #000;
}
/* #link-bar ul li select #acad option a {
  border: none;
  padding: 20px;
} */
section {
  margin: 20px 0;
}
.row-1,
.row-2 {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 40px 0;
}
.row-1 div {
  width: calc(100% / 3 - 40px);
}
.row-2 div {
  width: calc(100% / 2 - 40px);
}
.row-2 {
  background: lightgoldenrodyellow;
}
.nba {
  display: flex;
}
.row-1 .box {
  padding: 30px 30px;
}
.box-1 {
  background: var(--box-1);
  color: var(--text-secondary);
}
.box-2 {
  background: var(--box-2);
  color: var(--text-secondary);
}
.obe,
.principal {
  display: flex;
  flex-direction: column;
}
.pr {
  height: 200px;
}
.principal {
  border-left: 2px solid var(--box-1);
  padding-left: 30px;
}
.obe h1 {
  color: var(--box-2);
}
.principal h1 {
  color: var(--box-1);
}
#allBlocks h1 {
  margin: 20px 10px;
}

.principal-inside {
  display: flex;
}
#allBlocks img {
  margin-right: 20px;
}
footer {
  display: flex;
  width: 100%;
  padding: 30px 50px;
  padding-bottom: 10px;
  background: var(--secondary);
  color: var(--text-secondary);
}
.footer-1,
.footer-2 {
  width: calc(100% / 2-20px);
  flex: 0.5;
}
.footer-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
footer i {
  margin: 20px;
}
.society-page {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--society-1);
  position: relative;
}
.sidebar {
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  margin-right: 100px;
  display: flex;
  flex-direction: column;
  flex: 0.1;
  justify-content: flex-start;
  align-items: flex-start;
  background: rgba(37, 23, 23, 0.2);
}
.side-margin {
  margin: 50px;
}
.side-margin i {
  cursor: pointer;
}
#icon,
.arrow {
  color: white;
}

.sidebar ul {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  /* animation: animate 2s forwards ease;
  opacity: 0.2; */
}
.sidebar ul li {
  padding: 20px 20px;
  margin: 30px 0;
}
.sidebar ul li a {
  color: white;
}

.society-box {
  display: flex;
  /* flex-direction: column; */

  margin: auto 0;
}
.joint {
  display: flex;
  flex-direction: column;
  flex: 0.9;
}
.sb {
  flex: 0.9;
  display: flex;
  height: 100vh;
  align-items: center;
}
.sb > div {
  padding: 40px;
}
.society-box img {
  height: 300px;

  border-radius: 20px;
  box-shadow: 5px 5px 25px rgb(23, 2, 48);
}
.para {
  margin: 30px 0;
  max-width: 650px;
}
.society-box {
  color: white;
}
.society-box a {
  color: white;
  background: #333;
  padding: 10px 20px;
}
.arrow {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: 10px;
  margin-left: 0px;
}
.arrow a {
  background: none;
}
.arrow a:hover {
  color: rgb(4, 105, 4);
}
.sb {
  transform: translateY(-180px);
  animation: animate 2s forwards ease;
  opacity: 0.5;
}
@keyframes animate {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#contact {
  width: 100%;
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
}
.contact-one {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url('jss-academy-1024x570.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contact-two {
  display: flex;
  width: 100%;
  /* flex: 0.5; */
  margin: 20px 0;
}
.left,
.right {
  flex: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
form {
  /* position: relative; */
  margin: 20px 0;
  /* left: -1000px; */
  transform: translateX(-1100px);
  animation: anim 2s ease forwards;
}
@keyframes anim {
  to {
    transform: translateX(0);
  }
}
form h3 {
  margin-bottom: 30px;
  font-size: 1rem;
}
form div input {
  margin: 10px;
  margin-left: 0;
  padding: 10px 20px;
  padding-right: 100px;
}
.btn-1 {
  padding: 8px 30px;
  margin: 20px 0;
  border: none;
  font-size: 17px;
  cursor: pointer;
}
.btn-1:hover {
  opacity: 0.8;
}
.right {
  transform: translateX(1000px);
  animation: to-left 2s ease forwards;
}
@keyframes to-left {
  to {
    transform: translateX(0);
  }
}
.bg {
  background: linear-gradient(to right, cyan, rgb(84, 235, 84));
}
.right > div {
  max-width: 500px;
}
.right h2 {
  width: fit-content;
  padding: 10px;
  border-radius: 10px;
}
.right p {
  margin: 20px 0;
}
.right p i {
  margin-right: 30px;
}
.contact-three {
  height: 100px;
}
#contact h2 {
  margin-top: 30px;
}

#contact-list li a {
  color: white;
}
.society-box h1 {
  line-height: 2rem;
}
#options {
  background: none;
}
#message {
  height: 100px;
}