@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
}
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-thumb {
  background-color: skyblue;
  border-radius: 10px;
}
*::-webkit-scrollbar-track {
  background-color: gray;
  border-radius: 10px;
}
/* body{
    background: url("./img/bg66.jpg");
  background-size: cover;
} */
body {
  background-image: url(./img/bg66.jpg);
  /* background-image: url(./img/whitebg.svg); */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
/* .first{
    display: block;
    position: absolute;
    background: url("img/backg.png");
    margin: 0;
    padding: 0;
    height:2000px;
} */
/* .first img{
    position:relative;
} */
/* .drop{
    visibility: hidden;
    position: absolute;
} */
/* Dropdown Button */
#menu {
  width: 40px;
  display: none;
  margin-top: 20px;
}
.responsive {
  display: block;
}
#mobile-menu {
  display: none;
}
@media only screen and (max-width: 1300px) {
  .responsive {
    display: none;
  }
  #menu {
    display: flex;
  }
  #mobile-menu {
    padding: 10px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
  }
  #mobile-menu a {
    text-decoration: none;
    color: rgb(255, 255, 255);
  }

  .navbar #mobile-menu ul li {
    display: none;
  }
}
#preloader {
  background: #fffafa url(./img/HSS_Logo.png) no-repeat center center;
  background-size: 15%;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
}
.dropbtn {
  font-family: "Poppins", sans-serif;
  background: none;
  color: rgb(0, 0, 0);
  padding: 16px;
  font-size: 16px;
  border: none;
  font-weight: bold;
  z-index: 5;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  font-family: "Poppins", sans-serif;
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  font-weight: bold;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 5;
  border-radius: 5px;
  opacity: 0;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 10px 16px;
  font-size: 13px;
  text-decoration: none;
  display: block;
  position: relative;
  z-index: 5;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  position: absolute;
  opacity: 1;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background: none;
}

.currentPg {
  color: rgb(150, 149, 149);
}

/* Dropdown Code for Participation : This is a try code */
.dropbtn-participation {
  font-family: "Poppins", sans-serif;
  background-color: #f1f1f1;
  color: rgb(0, 0, 0);
  padding: 16px;
  font-size: 13px;
  border: none;
  font-weight: bold;
  padding-right: 37px;
  padding-left: 37px;
  z-index: 5;
}

/* The container <div> - needed to position the dropdown content */
.dropdown-participation {
  position: relative;
  display: inline-block;
  z-index: 1;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-participation {
  font-family: "Poppins", sans-serif;
  display: none;
  position: relative;
  top: 8px;
  left: 140px;
  background-color: #f1f1f1;
  font-weight: bold;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 5;
  border-radius: 5px;
  opacity: 0;
}

/* Links inside the dropdown */
.dropdown-content-participation a {
  color: black;
  padding: 10px 16px;
  font-size: 13px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content-participation a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown-participation:hover .dropdown-content-participation {
  display: block;
  position: absolute;
  opacity: 1;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
/* .dropdown-participation:hover .dropbtn-participation {background:none;}
.currentPg{
  color: rgb(150, 149, 149);
} */
.nav {
  position: absolute;
  margin: 7px 20px;
  padding: 0;
  height: 60px;
  /* Comemented by abhishek for responsive testing */
  left: 10px;
}

.navbar {
  height: 77px;
  display: block;
  width: 100%;
  margin: 0px 0px;
  background: url("img/bgnav.jpg");
  background-size: cover;
  box-shadow: 0px 30px 40px -20px rgba(6, 5, 5, 0.3);
  /* border: 1px solid black; */
  text-align: center;
  position: sticky;
  z-index: 5;
}

.navbar ul {
  padding-top: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

header {
  height: 650px;
  background: url("img/iitOff2.jpg") no-repeat;
  background-size: cover;
  margin: 0;
}

.intro {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  width: 52%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px) saturate(150%) contrast(80%) brightness(120%);
  border-radius: 20px;
  position: relative;
  top: 18%;
  left: 22%;
  right: 20%;
  display: flex;
}

.intro h1 {
  color: #5c5c5c; /* light gray color */
  text-align: center;
  width: 100%;
  padding: 10px auto;
}

.intro p {
  text-align: justify;
  color: #f2f2f2; /* light gray color */
  padding-top: 10px;
  padding-bottom: 15px;
  font-weight: bold;
}

.photo {
  padding: 20px;
}

.content {
  padding: 10px;
}


.navbar ul li {
  font-family: "Poppins", sans-serif;
  display: inline;
  margin: 5px;
  padding: 6px;
  font-weight: bolder;
  color: black;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: gray;
}

.hss {
  margin: 0px 20px;
  padding: 0;
  position: absolute;
  right: 10px;
  opacity: 100%;
}

.Htitle {
  text-align: center;
  margin: 60px;
  display: block;
  font-family: "Poppins", sans-serif;
  z-index: -1;
  position: relative;
}

:root {
  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --orange: hsl(34, 97%, 64%);
  --blue: hsl(212, 86%, 64%);
  --varyDarkBlue: hsl(234, 12%, 34%);
  --grayishBlue: hsl(229, 6%, 66%);
  --veryLightGray: hsl(0, 0%, 98%);
  --weight1: 200;
  --weight2: 400;
  --weight3: 600;
}

.experi {
  font-size: 15px;
  font-family: "Poppins", sans-serif;
}

@media (max-width: 400px) {
  h1 {
    font-size: 1.5rem;
  }
}

.box p {
  color: var(--grayishBlue);
}

.box {
  border-radius: 5px;
  box-shadow: 0px 30px 40px -20px var(--grayishBlue);
  padding: 30px;
  margin: 30px;
}

.row1-container {
  margin: 0px 20px;
}

.row2-container {
  margin: 0px 20px;
}
.box img {
  float: right;
}
/* 
@media (max-width: 450px) {
    .box {
        height: 200px;
    }
} */

@media (max-width: 950px) and (min-width: 450px) {
  .box {
    text-align: center;
    height: 180px;
  }
}

.cyan {
  border-top: 3px solid var(--cyan);
}

.blue {
  border-top: 3px solid var(--cyan);
}
.orange {
  border-top: 3px solid var(--cyan);
}

.box h2 {
  color: var(--varyDarkBlue);
  font-weight: var(--weight3);
  padding: 15px;
}

@media (min-width: 950px) {
  .row1-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .row2-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box-down {
    top: 150px;
  }
  .box {
    width: 45%;
  }
}
* {
  margin: 0;
  padding: 0;
}

/* Intrest */

* {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
}

.intrest {
  height: 100vh;
  display: block;
  position: relative;
  font-family: "Poppins", sans-serif;
}

.blck {
  display: flex;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  font-family: "Poppins", sans-serif;
  max-width: 90%;
}
@media screen and (max-width: 400px) {
  .blck {
    height: auto;
    width: auto;
    margin: 120px auto;
    display: flex;
    flex-direction: column;
    /* width: 300px;
    height: 150px; */
  }
  .side {
    width: 10%;
    height: 10%;
  }
}

.intrest .container {
  min-width: 700px;
  min-height: 350px;
  border-radius: 20px;
  position: relative;
  -webkit-transition: 1.5s ease-in-out;
  transition: 1.5s ease-in-out;
  transform-style: preserve-3d;
  margin: 15px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.side {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 150px 50px;
  color: rgb(0, 0, 0);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border-radius: 20px;
  box-sizing: border-box;
}
.intrest .content {
  transform: translatez(70px) scale(0.8);
  line-height: 1.5em;
}
.intrest .content h1 {
  position: relative;
}
.intrest .content p {
  margin-top: 65px;
  line-height: 2em;
  text-align: center;
  font-size: 17px;
}
.intrest .content h1:before {
  content: "";
  position: absolute;
  bottom: -30px;
  height: 3px;
  background-color: var(--red);
  width: 70px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.intrest .container .front h1::before {
  content: "";
  position: absolute;
  bottom: 140px;
  height: 3px;
  background-color: var(--red);
  width: 70px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.intrest .front {
  z-index: 2;
  background: url("./img/bgtry2.svg");
  background-position: 10%;

  /* background: url("./img/bg66_light_light.png"); */
  /* background: url("./img/bg66.jpg"); */
  /* background: url("./img/black_board.jpg"); */
  background-size: cover;
  /* box-shadow: 0px 30px 40px -20px var(--grayishBlue); */
  box-shadow: 0px -20px 10px -20px rgba(87, 85, 85, 0.941);
}

.intrest .back {
  background-color: white;
  transform: rotateY(180deg);
  z-index: 0;
  padding-top: 10px;
  /* box-shadow: 0px 30px 40px -20px var(--grayishBlue); */
  box-shadow: 0px -20px 10px -20px rgba(87, 85, 85, 0.941);
}
.intrest .container:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* my button style  */
.white-mode {
  text-decoration: none;
  padding: 7px 10px;
  background-color: #122;
  border-radius: 3px;
  color: #fff;
  transition: 0.35s ease-in-out;
  position: fixed;
  left: 15px;
  bottom: 15px;
  font-family: "Montserrat";
}

.white-mode:hover {
  background-color: #fff;
  color: #122;
}

/* Dropdown */
nav ul li a {
  color: white;
  display: block;
  padding: 0 15px;
  line-height: 70px;
  font-size: 20px;
  background: #063247;
  transition: 0.5s;
}

nav ul ul {
  position: absolute;
  top: 85px;
  border-top: 3px solid #23dbdb;
  opacity: 0;
  visibility: hidden;
}

nav ul li:hover > ul {
  top: 70%;
  opacity: 1;
  visibility: visible;
  transition: 0.3s linear;
}

nav ul ul li {
  width: 150px;
  display: list-item;
  position: relative;
  border: 1px solid #042331;
  border-top: none;
}

nav ul ul li a {
  line-height: 50px;
}

nav ul ul ul {
  border-top: none;
}
nav ul ul ul li {
  position: relative;
  top: -70px;
  left: 150px;
}

nav ul ul li a i {
  margin-left: 15px;
}

.footer-distributed {
  background-color: #2c292f;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: bold 16px sans-serif;
  padding: 20px 20px 20px 20px;
  margin-top: 80px;
}

.footer-distributed h3 {
  color: #ffffff;
  font: normal 36px "Cookie", cursive;
  margin: 0;
}

.footer-distributed .footer-company-name {
  color: #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

.footer-distributed h3 span {
  color: #48adff;
}