/* Declaration of CSS variables for light/dark theme */

:root {
  --primary-color: #00b7ff;
  --secondary-color: #ff8c00;
  --tertiary-color: #ff2e63;
  --quaternary-color: #ff8c00;
  --quinary-color: #ff2e63;
  --senary-color: #00b7ff;
  --septenary-color: #ff2e63;
  --octonary-color: #00b7ff;
  --nonary-color: #ff8c00;
  --denary-color: #ff2e63;
  --light-color: #f4f4f4;
  --dark-color: #222;
  --button-color: #00668f;
  --body-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --heading-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --border-radius: 0.5rem;
  --transition: all 0.3s ease;
  --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --inset-shadow: inset gray 1rem 0rem 1rem -0.8rem;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: var(--inset-shadow);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--button-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
  cursor: pointer;
}

li {
  list-style-type: none;
}

h1 {
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 3rem;
}

#header {
  width: 100%;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
  background-color: var(--dark-color);
  position: relative;
  z-index: 2;
}

#header img {
  width: 85px;
  border-radius: 50%;
}

#header .griet-logo {
  /* margin-left: 5rem; */
}

#header .fsw-logo {
  /* margin-right: 5rem; */
}

/* #header .logo{
    margin-left: 40px;
    font-size: 30px;
    cursor: none;
} */

#header ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  /* margin-right: 30px; */
}

#header ul li {
  margin-left: 20px;
}

#header ul li.headRegister {
  cursor: none;
}

#header a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  padding: 8px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header ul li a:hover,
#header ul li a.active {
  background-color: rgb(0, 183, 255);
}

section {
  z-index: 10;
  background-color: #027b9a;
}

section #main {
  color: white;
  /* font-size: 10vh; */
  text-align: center;
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

section #main .main-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  font-size: 2rem;
  letter-spacing: 2px;
  font-weight: bolder;
  color: var(--light-color);
  margin-top: -100px;
}

section #main .main-title .title {
  margin-top: -20px;
}

section #main .main-title h2 {
  font-size: 8rem;
  letter-spacing: 4px;
  font-weight: bolder;
  color: var(--light-color);
}

section #main .main-title .tagline {
  margin-top: -20px;
  margin-bottom: 20px;
}

/* ============= Parallax Effect =================== */

/* section #main{
    background-attachment: scroll;
} */

#highlights {
  padding-top: 60px;
  padding-bottom: 20px;
  background-color: white;
}

#highlights h1 {
  text-align: center;
  color: black;
  margin: 0px 0px 20px 0px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* transform: skewY(4deg); */
}

#highlights ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0px 10px 0px 10px;
  /* transform: skewY(4deg); */
}

#highlights ul li {
  margin: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 240px;
  text-align: center;
}

#highlights ul li img {
  width: 200px;
  margin-bottom: 5px;
  /* background-color: black; */
}

#highlights .highlights-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: right;
}

#highlights .highlights-button a {
  background-color: var(--primary-color);
  color: white;
  font-weight: bold;
  text-decoration: none;
  margin-right: 30px;
  margin-bottom: 40px;
  padding: 10px 20px;
}

hr {
  margin-block-start: 0;
  margin-block-end: 0;
  height: 3px;
  background-color: gold;
  border: none;
}

#problem-statements {
  background-color: #027b9a;
  margin-top: 50px;
}

#problem-statements h1 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  color: white;
}

#sponsors {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  background-color: white;
  border-radius: 6rem;
  margin: 50px auto;
  padding: 60px 0px;
  padding-bottom: 0px;
  /* background-color: rgb(255, 107, 107); */
  /* transform: skewY(-2deg); */

  /* background-color: aqua;*/
}

#sponsors h2 {
  text-align: center;
}

#sponsors .title-sponsor,
.energy-sponsors,
.collaboration,
.associate-sponsors {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30px;
  /* transform: skewY(2deg); */
}

#sponsors .title-sponsor img {
  margin-bottom: 30px;
}

#sponsors img {
  width: 18rem;
  height: 10rem;
  margin: 1rem;
  border-radius: 1.5rem;
  margin: 20px;
}

#sponsors .other-sponsors {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  /* transform: skewY(2deg); */
}

/* #sponsors .other-sponsors .energy-sponsors{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0px 120px;
    /* width: 30%; 
}

#sponsors .other-sponsors .associate-sponsors{
    /* width: 70%; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0px 120px;
} */

#sponsors .other-sponsors .associate-sponsors ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0px;
  width: 100%;
}

#sponsors .other-sponsors .associate-sponsors ul img {
  width: 10rem;
  height: 6rem;
}

#sponsors .other-sponsors .associate-sponsors ul img.reliance {
  border-radius: 0;
  width: 15rem;
}

#sponsors .other-sponsors .associate-sponsors ul img.suntek {
  width: 16rem;
}

#sponsors .other-sponsors .associate-sponsors ul img.smart {
  width: 8.5rem;
  height: 7.3rem;
}

/* #sponsors .other-sponsors .associate-sponsors ul li{
    display: flex;
    align-items: center;
} */

/* #sponsors{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
} */

#sponsors h1 {
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 3rem;
}

#sponsors ul {
  width: 80%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

/* #sponsors ul li{
    background-color: whitesmoke;
    margin: 30px;
    border-radius: 40px;
} */

#sponsors ul li img {
  width: 15rem;
  height: 10rem;
  margin: 1rem;
  border-radius: 1.5rem;
}

/* #faqs{
    display: flex;
    flex-direction: column;
    color: #fff;
    /* background-color: #027b9a; 
    /* background: rgb(19 25 51); 
    width: 100%;
    
  }

  #faqs h1{
    text-align: center;
  }

  #faqs .faqs-block{
    margin: 5rem;

  }

  #faqs .faqs-block details{
    margin: 2rem;
  }

  #faqs p{
    margin: 1rem;
    padding: 0.5rem;
    font-size: larger;
    /* border-style: outset; 
    /* border-color: rgb(140, 255, 140); 
    border-radius: 2rem;
    padding: 20px;
    /* transition: all ease-in-out 2ms; 
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
  } */

/* .container {
  width: 100vw;
  margin: auto;
  padding-bottom: 50px;
} */
.container h1 {
  text-align: center;
  margin-bottom: 50px;
  color: white;
}

.photo-wrapper {
  margin: auto;
  display: flex;
  gap: 2rem;
  padding: 2rem;
  overflow: hidden;
  /* width: 100%; */
  width: 90vw;
}

.photo {
  border-radius: 16px;
  overflow: hidden;
  width: 300px;
  height: 200px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.25s ease;

  & img {
      width: inherit;
      height: inherit;
      object-fit: cover;
  }

  &::after {
      content: "";
      position: absolute;
      top: -1rem;
      bottom: -1rem;
      left: -16rem;
      background: linear-gradient(90deg, transparent, white, transparent);
      width: 16rem;
      opacity: 0;
      transform: rotate(6deg);
  }

  &:hover::after {
      left: 100%;
      opacity: 0.15;
      transition: inset 1s;
  }

  &:hover {
      transform: scale(1.1) !important;
  }

  &.even {
      transform: rotate(2deg);
  }

  &:not(.even) {
      transform: rotate(-2deg);
  }
}



@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.photos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}