@property --bg {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@keyframes slide {
  0% { transform: translateX(-5rem); opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slide_vertical {
  0% { transform: translateY(-5rem); opacity: 0; }
  100% { opacity: 1; }
}

@keyframes backgroundAnimation {
  to { --bg: 10%; }
}

:root {
  --white-light: #eee;
  --white: #fff;
  --color-primary: #7d0d45;
  --color-secondary: #a3243b;
  --color-tertiary: #d8544f;
  --color-list: #fff;
  --grey-light: #777;
  --font: 'Times New Roman', Times, serif
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  text-align: justify;
  scroll-behavior: smooth;
  scroll-padding: 10rem;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding: 10rem;
  font-family: var(--font);
}

@media only screen and (min-width:100em) { html { font-size: 70%; } }
@media only screen and (max-width: 68.75em) { html { font-size: 50%; } }
@media only screen and (max-width: 56.25em) { html { font-size: 43.75%; } }
@media only screen and (max-width: 46.875em) { html { font-size: 37.5%; } }

body {
  box-sizing: border-box;
  transition: all .3s ease-in-out;
  background-color: var(--white-light);
}

/* ===== CONTAINER ===== */
.container {
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, 1fr));
  scroll-behavior: smooth;
  scroll-padding: 10rem;
  scrollbar-gutter: stable;
}

.container::-webkit-scrollbar { width: .5rem; background-color: var(--white-light); }
.container::-webkit-scrollbar-thumb { background-color: #777; border-radius: 2rem; }

@media only screen and (max-width: 40.635em) {
  .container { grid-template-columns: 1fr; }
}

/* ===== SECTIONS ===== */
section {
  opacity: 0.3;
  transition: all .3s ease-in-out;
  padding: 0 !important;
}
.show { opacity: 1; }
.animate { animation: backgroundAnimation 1s forwards ease-in-out; }

::selection { color: var(--color-primary); background-color: white; }
::-webkit-scrollbar { width: .5rem; border-radius: 2rem; }
::-webkit-scrollbar-thumb { background-color: #777; }

/* ===== HEADINGS ===== */
.heading__1 {
  text-transform: uppercase;
  font-size: 5rem;
  font-weight: 500;
  letter-spacing: .2rem;
  color: var(--color-primary);
}

.heading__2 {
  text-transform: capitalize;
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 8rem;
  letter-spacing: .2rem;
  margin-left: 2.5rem;
  color: #000;
  animation: slide_vertical 1s ease-in-out;
}

/* ===== NAV ===== */
.college { grid-column: 1/-1; }

.college__list {
  display: flex;
  position: fixed;
  background-color: white;
  height: 10vh;
  width: 100%;
  z-index: 10;
  column-gap: 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
  list-style: none;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
  padding: 0 1rem;
  border-radius: 0 0 1.5rem 1.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}

@media only screen and (max-width: 40.625em) {
  .college__list { visibility: hidden; width: 100%; font-size: 1rem; }
}

.college__list__link:visited,
.college__list__link {
  height: 100%;
  text-decoration: none;
  color: #373737;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.college__list__item {
  display: inline-block;
  height: 100%;
  min-width: 8rem;
  transition: all .3s ease-in-out;
  border-radius: 0 0 1.5rem 1.5rem;
  overflow-wrap: break-word;
  text-align: center;
}

.college__list__item:hover { height: 100%; background-color: var(--color-primary); }
.college__list__item:hover .college__list__link { height: 100%; color: white; }
.college__list__item--active { height: 100%; background-color: var(--color-primary); }
.college__list__item--active .college__list__link { height: 100%; color: white; }

/* ===== PROFILE ===== */
.profile {
  background-image: linear-gradient(110deg, var(--white), #eeeeee 50%, var(--color-secondary) 50%);
  grid-column: 1/-1;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

@media only screen and (max-width:56.25em) {
  .profile {
    background-image: linear-gradient(180deg, var(--white), #eeeeee 60%, var(--color-secondary) 60%);
    flex-direction: column;
  }
}

.profile__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 75%;
}

.profile__photo {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  transform: scale(1.08);
  margin-bottom: 3rem;
  position: relative;
  border: 1px solid #777;
  transition: all .3s;
}

.profile__photo:hover { transform: scale(1); filter: brightness(100%); cursor: default; }

.profile__name {
  font-size: 2.1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #4d4d4d;
  text-align: initial;
}

@media only screen and (max-width: 43.75em) {
  .profile__name { text-align: center; }
  .profile__photo { width: 25rem; height: 25rem; margin-bottom: 5rem; }
}

.profile__designation {
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: capitalize;
  align-self: center;
  line-height: 3rem;
  color: var(--color-tertiary);
  animation: slide_vertical 1s ease-in-out;
}

/* ===== CONTACT ===== */
.contact {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  overflow: auto;
  padding: 2rem 0;
}

@media only screen and (max-width: 43.75em) {
  .contact { width: 100%; height: auto; }
}

.contact__heading {
  font-size: 3rem;
  font-weight: 100;
  letter-spacing: .3rem;
  align-self: center;
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 1.5rem;
  margin-bottom: 1rem;
}

@media only screen and (max-width:56.25em) {
  .contact__heading { visibility: hidden; height: 0; margin: 0; }
}

.contact__details {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 1rem;
}

.contact__icon { height: 3rem; width: 3rem; fill: #eeeeee; }

.contact .detail {
  font-size: 1.4rem;
  font-weight: 200;
  letter-spacing: .2rem;
  color: var(--white);
  display: inline-block;
  transition: all .3s ease-in-out;
}

.detail__container {
  outline: 0px solid white;
  transition: all .6s ease-in-out;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.3);
  padding: 1.5rem 3rem;
  scale: .95;
  cursor: pointer;
  width: 100%;
}

.detail__container:hover { scale: 1; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.1); }

.contact__details-address,
.contact__details-email,
.contact__details-phone {
  width: 100%;
  overflow-wrap: break-word;
  display: grid;
  grid-template-columns: 15% 85%;
  align-items: center;
  gap: 0 2rem;
}

/* ===== EDUCATION / REFRESHER / WEBINARS / COURSES ===== */
.education {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  grid-column: 1/-1;
  background: linear-gradient(120deg, var(--color-secondary) var(--bg), var(--white-light) var(--bg));
  padding: 4rem 0 !important;
}

.education__container {
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100%;
  gap: 5rem;
  padding: 0 5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.education__heading {
  font-size: 5rem;
  font-family: var(--font);
  width: clamp(max-content, 100%, 80vw);
  padding: 1rem;
  font-weight: 200;
  letter-spacing: .3rem;
  margin: 1.5rem 0 2rem 4rem;
  color: #373737;
  position: relative;
  border-bottom: 1px solid var(--color-secondary);
  text-wrap: balance;
}

@media only screen and (max-width: 33.75em) {
  .education__heading { font-size: 3.5rem; margin: 1rem 0 0 2rem; }
}

.education__1 { width: 22%; min-width: 18rem; }

.education .course { font-size: 2.5rem; padding-bottom: 1rem; font-weight: 600; color: #666; }
.education .year { font-size: 2rem; color: var(--color-tertiary); font-style: italic; }

.education .institution {
  font-weight: 200;
  font-size: 1.7rem;
  width: 80%;
  color: #555;
  text-align: start;
  font-family: var(--font);
  margin-top: 1.5rem;
  overflow-wrap: break-word;
}

.education .careerProfile { width: 85%; }

.education .careerProfile__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  color: #2b2b2b;
  list-style: decimal;
  font-size: 1.6rem;
  line-height: 2.4rem;
  padding-left: 2rem;
}

/* ===== EXPERIENCE ===== */
.experience {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: baseline;
  background-color: #eeeeee;
  gap: 3rem 1.5rem;
  font-size: 1.5rem;
  padding: 4rem 0 5rem !important;
}

.experience .careerProfile,
.experience .adminAssignment,
.experience .specialization {
  height: 100%;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}

.experience .careerProfile__heading,
.experience .adminAssignment__heading,
.experience .specialization__heading {
  font-size: 2.6rem;
  font-weight: 300;
  text-transform: capitalize;
  letter-spacing: .2rem;
  color: var(--color-primary);
  padding-top: .5rem;
  text-align: center;
}

.experience .careerProfile__list,
.experience .adminAssignment__list,
.experience .specialization__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: #2b2b2b;
  list-style: decimal;
  width: 90%;
  max-height: 35rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-left: 2rem;
  font-size: 1.5rem;
  line-height: 2.2rem;
}

.experience .careerProfile__list::-webkit-scrollbar,
.experience .adminAssignment__list::-webkit-scrollbar,
.experience .specialization__list::-webkit-scrollbar { width: .5rem; background-color: var(--white-light); }

.experience .careerProfile__list::-webkit-scrollbar-thumb,
.experience .adminAssignment__list::-webkit-scrollbar-thumb,
.experience .specialization__list::-webkit-scrollbar-thumb { background-color: #777; border-radius: 2rem; }

.subjects__taught { width: 100%; }

@media only screen and (max-width: 38.75em) {
  .experience {
    border: 1px solid #373737;
    border-radius: 3rem;
    grid-template-columns: 1fr;
  }
}

/* ===== PROJECTS (patentsPubs) ===== */
.patentsPubs {
  background-image: linear-gradient(to right bottom, var(--color-primary), var(--color-secondary), var(--color-tertiary));
  width: 100%;
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem 0 !important;
}

.patentsPubs__container {
  display: grid;
  column-gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  height: 100%;
  align-items: flex-start;
  padding: 0 2rem;
}

.patentsPubs__content__container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2.5rem 3rem;
  border-right: 1px solid var(--white);
  min-height: 30rem;
}

.patentsPubs__content__container:last-child { border-right: none; }

.patentsPubs__heading {
  color: #eeeeee;
  font-size: 2rem;
  align-self: center;
  text-align: center;
  padding: 2rem .5rem;
  transition: all .1s ease-in;
}

.patentsPubs__heading:hover { outline: 3px solid #777; cursor: default; transform: scale(1.08); }

.patentsPubs__list {
  list-style: decimal;
  color: var(--color-list);
  font-size: 1.5rem;
  font-weight: lighter;
  line-height: 2.4rem;
  margin-left: 2rem;
  overflow-wrap: break-word;
  text-align: left;
}

.patentsPubs__list > li { margin-top: .8rem; }

@media only screen and (max-width: 38.75em) {
  .patentsPubs__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  .patentsPubs__content__container {
    padding: 2rem;
    margin: 0 2rem;
    border: none;
    outline: 1px solid var(--white-light);
    outline-offset: 1rem;
    width: 90%;
  }
}

/* ===== PUBLICATIONS ===== */
.publications {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  background-color: #eeeeee;
  padding-bottom: 5rem !important;
}

.publications__list {
  display: grid;
  align-items: baseline;
  justify-content: center;
  margin: 0 8rem;
  padding: 5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
  gap: 3rem;
  font-size: 1.5rem;
  line-height: 2.4rem;
  list-style: decimal;
  color: #1a1a1a;
}

.publications__heading {
  align-self: center;
  margin-top: 1.5rem;
  padding: 0 5rem;
  width: max-content;
  outline: 2px solid var(--color-secondary);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
}

.publications__heading:hover {
  outline-offset: 1rem;
  transform: scale(1.01);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 38.75em) {
  .publications__heading { margin-top: 8rem; }
  .publications__list {
    text-align: initial;
    font-size: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    overflow-wrap: break-word;
    gap: 2rem 3rem;
  }
}

/* ===== PRESENTATIONS (book) ===== */
.book {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #eeeeee;
  padding-bottom: 5rem !important;
}

.book__heading {
  align-self: center;
  margin-top: 3.5rem;
  padding: 0 5rem;
  width: max-content;
  outline: 2px solid var(--color-secondary);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
}

.book__heading:hover {
  outline-offset: 1rem;
  transform: scale(1.01);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
}

.book__list {
  display: grid;
  width: 90%;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  margin: 0 5rem;
  grid-auto-rows: max-content;
  justify-items: center;
  gap: 2rem;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.4rem;
  color: #4d4d4d;
  overflow-wrap: break-word;
  padding: 5rem 0;
}

@media only screen and (max-width: 38.75em) {
  .book__heading { font-size: 2rem; margin: 0; }
  .book__list { gap: 3rem; font-size: 1.5rem; }
}

/* ===== AWARDS & MEMBERSHIP ===== */
.awards {
  grid-column: 1/-1;
  background-color: var(--color-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 5rem 0 !important;
}

.awards__heading {
  font-size: 4rem;
  color: #eeeeee;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 1rem;
  text-align: center;
}

.awards__list {
  font-size: 1.6rem;
  color: var(--color-list);
  line-height: 2.6rem;
  list-style: decimal;
  margin: 0 8rem;
  overflow-wrap: break-word;
}

.awards__list li { margin-bottom: 2rem; }

@media only screen and (max-width: 38.75em) {
  .awards__heading { font-size: 3.5rem; }
  .awards__list { font-size: 1.8rem; margin: 0 4rem; }
}

/* ===== DOWNLOAD BTN ===== */
.btn {
  width: 15rem;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  height: 5rem;
  text-decoration: none;
  font-size: 1.6rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
  margin-top: 2rem;
  transition: all .3s ease-in-out;
}

.btn:hover {
  color: var(--color-primary);
  background-color: var(--white);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.3);
  outline: 1px solid var(--color-primary);
}

/* ===== HAMBURGER ===== */
.hamburger {
  height: 10rem;
  width: 10rem;
  border-radius: 50%;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 5%;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
  display: none;
}

@media only screen and (max-width: 40.625em) {
  .hamburger { display: grid; place-items: center; grid-template-rows: repeat(2, 1fr); margin-right: 10rem; }
}

.hamburger__label {
  position: relative;
  display: inline-block;
  margin-top: 5rem;
  width: 60%;
  height: .6rem;
  background-color: white;
}

.hamburger__label::after {
  content: "";
  display: inline-block;
  position: absolute;
  background-color: white;
  width: 100%;
  height: 100%;
  top: 1rem;
  left: -.08rem;
  transition: all .3s ease-in-out;
}

.hamburger__label::before {
  content: "";
  display: inline-block;
  position: absolute;
  background-color: white;
  width: 100%;
  height: 100%;
  top: -1rem;
  transition: all .3s ease-in-out;
}

.hamburger__background {
  height: 11rem;
  width: 11rem;
  background-image: radial-gradient(ellipse, var(--color-primary), var(--color-secondary));
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  top: 0;
  transition: 1s all cubic-bezier(0.41, 0.49, 0.06, 0.98);
}

.hamburger__content {
  font-size: 5rem;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 80vh;
  width: 0;
  transform: translate(40vw);
  visibility: hidden;
}

.hamburger__list-item { text-align: center; }

@media only screen and (orientation: landscape) {
  .hamburger__content { font-size: 1.5rem; }
}

.hamburger__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style: none;
  height: 100%;
}

@media only screen and (orientation: landscape) {
  .hamburger__list { gap: 3rem; font-size: 2rem; }
}

@media only screen and (max-width: 43.75em) {
  .hamburger__list {
    height: 100%;
    justify-content: space-evenly;
    align-items: center;
    font-size: 2.5rem;
    text-align: center;
  }
}

.hamburger__link,
.hamburger__link:active {
  display: inline-block;
  text-align: center;
  height: 100%;
  color: var(--white);
  text-decoration: none;
  transition: all .3s ease-in-out;
  padding: 2rem 1rem;
  border-bottom: 1px solid white;
}

.hamburger__link:hover { background-color: #eeeeee; color: var(--color-primary); }

.hamburger__check {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.hamburger__check:checked ~ .hamburger__background { transform: scale(80); }
.hamburger__check:checked ~ .hamburger__label::after { transform: rotate(135deg); top: -1rem; }
.hamburger__check:checked ~ .hamburger__label::before { transform: rotate(-135deg); }
.hamburger__check:checked ~ .hamburger__label { background-color: transparent; }
.hamburger__check:checked ~ .hamburger__content { visibility: visible; }

/* ===== UTILITIES ===== */
.-u--white { color: var(--white) !important; grid-column: 1/-1; }
.-u-ptop { padding-top: 2rem !important; }
.-u--primary { color: var(--color-primary) !important; }
.-u--bold { font-weight: bolder; }
.-u-mtop { margin-top: 5rem; }
.-u--overflow-control { overflow: auto; height: 50%; scrollbar-gutter: stable; margin-right: 1rem; }

ul { list-style: decimal !important; }