/* Basic information */
.basic-info{
  --color: rgba(30, 30, 30);
  --bgColor: rgba(245, 245, 245);
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 0rem;
  font-family: "Poppins", sans-serif;
  color: var(--color);
  background: var(--bgColor);
}
.timeline {
--col-gap: 2rem;
--row-gap: 2rem;
--line-w: 0.25rem;
display: grid;
grid-template-columns: var(--line-w) 1fr;
grid-auto-columns: max-content;
column-gap: var(--col-gap);
list-style: none;
width: min(60rem, 90%);
margin-inline: auto;
}

/* line */
.timeline::before {
content: "";
grid-column: 1;
grid-row: 1 / span 20;
background: rgb(225, 225, 225);
border-radius: calc(var(--line-w) / 2);
}

/* columns*/

/* row gaps */
.timeline li:not(:last-child) {
margin-bottom: var(--row-gap);
}

/* card */
.timeline li {
grid-column: 2;
--inlineP: 1.5rem;
margin-inline: var(--inlineP);
grid-row: span 2;
display: grid;
grid-template-rows: min-content min-content min-content;
}

/* date */
.timeline li .date {
--dateH: 3rem;
height: var(--dateH);
margin-inline: calc(var(--inlineP) * -1);

text-align: center;
background-color: var(--accent-color);

color: white;
font-size: 1.25rem;
font-weight: 700;

display: grid;
place-content: center;
position: relative;

border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

/* date flap */
.timeline li .date::before {
content: "";
width: var(--inlineP);
aspect-ratio: 1;
background: var(--accent-color);
background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
position: absolute;
top: 100%;

clip-path: polygon(0 0, 100% 0, 0 100%);
right: 0;
}

/* circle */
.timeline li .date::after {
content: "";
position: absolute;
width: 2rem;
aspect-ratio: 1;
background: var(--bgColor);
border: 0.3rem solid var(--accent-color);
border-radius: 50%;
top: 50%;

transform: translate(50%, -50%);
right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

/* title descr */
.timeline li .title,
.timeline li .descr {
background: var(--bgColor);
position: relative;
padding-inline: 1.5rem;
}
.timeline li .title {
overflow: hidden;
padding-block-start: 1.5rem;
padding-block-end: 1rem;
font-weight: 500;
}
.timeline li .descr {
padding-block-end: 1.5rem;
font-weight: 300;
}

/* shadows */
.timeline li .title::before,
.timeline li .descr::before {
content: "";
position: absolute;
width: 90%;
height: 0.5rem;
background: rgba(0, 0, 0, 0.5);
left: 50%;
border-radius: 50%;
filter: blur(4px);
transform: translate(-50%, 50%);
}
.timeline li .title::before {
bottom: calc(100% + 0.125rem);
}

.timeline li .descr::before {
z-index: -1;
bottom: 0.25rem;
}

@media (min-width: 40rem) {
.timeline {
grid-template-columns: 1fr var(--line-w) 1fr;
}
.timeline::before {
grid-column: 2;
}
.timeline li:nth-child(odd) {
grid-column: 1;
}
.timeline li:nth-child(even) {
grid-column: 3;
}

/* start second card */
.timeline li:nth-child(2) {
grid-row: 2/4;
}

.timeline li:nth-child(odd) .date::before {
clip-path: polygon(0 0, 100% 0, 100% 100%);
left: 0;
}

.timeline li:nth-child(odd) .date::after {
transform: translate(-50%, -50%);
left: calc(100% + var(--col-gap) + var(--line-w) / 2);
}
.timeline li:nth-child(odd) .date {
border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
}
}

.credits {
margin-top: 1rem;
text-align: right;
}
.credits a {
color: var(--color);
}

/* managing commitee */
.body-mc {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}

.card {
background-color: #fff;
border-radius: 5px;
/* padding: 20px; */
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



.name {
font-size: 24px;
margin: 0;
}

.username {
font-size: 18px;
color: #777;
margin: 10px 0;
}

.tagline,
.description {
color: #555;
margin: 10px 0;
}

.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}

.button:hover {
background-color: #0056b3;
}


.outer-circle {
width: 100px;
height: 10px;
background-color: #3498db; /* Outer circle background color */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.inner-circle {
width: 100px;
height: 100px;
background-color: #e74c3c; /* Inner circle background color */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.clip
{
clip-path: polygon(0% 15%, 0 0, 15% 0%, 85% 0%, 100% 0, 100% 15%, 99% 16%, 99% 14%, 99% 17%, 98% 16%, 14% 53%, 0 36%);
background-color: #3498db; /* Set your desired background color */
width: 200px; /* Set your desired width */
height: 200px; /* Set your desired height */
border-radius: 15px;
}

.profile-picture {
width: 92px;
height: 92px;
border-radius: 50%;
overflow: hidden;
margin: 19 auto 20px;

}

.profile-picture img {
width: 100%;
height: 100%;
object-fit: cover;
}

.profile-picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
.grparea
{
  height: 250px;
}

  .grp
  {
    margin-top:160px;
    height: 95px;
    width: 100%;
    background-color: #9261AA;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .grpimg1
  {
    height: 190px;
    width: 170px;
    border-radius: 5px;
    position:relative;
    margin-top: -77px;
  }
  .grpimg2
  {
    height: 190px;
    width: 170px;
    border-radius: 5px;
    position:relative;
    margin-top: 45px;
  }
  .grpname
  {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
  }
  .grpheight
  {
    margin:50px
  }



  .redressal
  {
    position: relative;
    margin-top:100px;
    height: 370px;
    width: 300PX;
    border-radius: 10px;
   
    display: flex;
    justify-content: center;
  }
  .redressal2
  {
    position: relative;
    margin-top:100px;
    height: 370px;
    width: 300PX;
    border-radius: 10px;
   
    display: flex;
    justify-content: center;
  }
  .semicircle
  {
    height: 270px;
    width: 138px;
    border-radius: 96px;
    background-color: #d8c5e1;
    transform: rotate(38deg);
    position: relative;
    z-index: -999;
    left: 117px;
  }
  .redressalimage
  {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
  }

  .redessalsubtitle
  {
    font-size: 11px;
    margin-top: 8px;
  }
  .redessalname
  {
    font-size: 20px;
    margin-top: 6px;
    font-weight: bold;
    letter-spacing: 3px;
    color:#555;

  }
  .redessalsubname
  {
    font-size: 14px;
    margin-top: -18px;
  }



  @media (max-width: 450px) {
    .card {
      background-color: #fff;
      border-radius: 5px;
      /* padding: 20px; */
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      height: 375px;
      width: 290px;
      position: relative;
      margin-left: 40px;
    }
    
  
    
    .name {
      font-size: 20px;
      margin-top:8px;
    }
    
    .designation {
      font-size: 14px;
      color: #777;
      margin-top:-20px;
      
    }
    
    .tagline,
    .description {
      font-size: 14px;
      color: #555;
      /* margin: 10px 0; */
    }
    .redressal
    {
      display: none;
      position: relative;
      margin-top: 381px;
      height: 370px;
      width: 300PX;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      margin-left: -2px;
    }

    .redressal2
    {
      position: relative;
      margin-top:1px;
      height: 370px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
    }
    
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .basic-info{
      --color: rgba(30, 30, 30);
      --bgColor: rgba(245, 245, 245);
      min-height: 100vh;
      display: grid;
      align-content: center;
      gap: 2rem;
      padding: 0rem ;
      font-family: "Poppins", sans-serif;
      color: var(--color);
      background: var(--bgColor);
    }
    .info{
      margin-right: 9%;
    }
  }
  @media only screen and (min-width: 360px) and (max-width: 767px) {
    .basic-info{
      --color: rgba(30, 30, 30);
      --bgColor: rgba(245, 245, 245);
      min-height: 100vh;
      display: grid;
      align-content: center;
      gap: 2rem;
      padding: 0rem;
      font-family: "Poppins", sans-serif;
      color: var(--color);
      background: var(--bgColor);
      margin-left: -47px;

    }
    
  }