*{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
:root{
  --color-primary: #7d2028;
  --color-secondary: #f4f3e5;
  --color-white: white;
  --color-danger: #dc3545;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-ipsscreen:#fafafa;

  


  --container-width-lg: 76%;
  --container-width-md: 90%;
  --container-width-sm: 94%;

  --transition: all 400ms ease;
}
body{
  font-family: "Montserrat", sans-serif;
  line-height: 1.7;
  color: black;
  background: var(--color-white);
}
.container{
  width: var(--container-width-lg);
  margin: auto;

}

/* ======about========= */
.about_header{
  margin-top: 3rem;
}
.about_header-cointainer{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 5rem;
}
.about_right > p {
  margin: 1.6rem 0 2.5rem;
}
.abouts_cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.about_card {
  background: var(--color-ipsscreen);
  padding: 1.6rem;
  border-radius: 1rem;
  text-align: center;
  transition: var(--transition);
}
.about_card:hover {
  background: var(--color-white);
  box-shadow: 0 1rem 1rem rgb(0,0,0,0.3);
}
.about_icon{
  background: var(--color-danger);
  /* color: white; */
  padding: 0.5rem 1rem 0.5rem;
  border-radius: 1rem;
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 1rem;
}
.about_card:nth-child(2) 
.about_icon{
  background: var(--color-success);
}
.about_card:nth-child(3) 
.about_icon{
  background: var(--color-warning);
}
.about_card p{
  margin-top: 1rem;
}

/* ======history========= */
.history {
  background-color: var(--color-ipsscreen);
  /* background-color:#f7f5f5; */
  /* box-shadow: inset 0 0 3rem rgba(0,0,0,0.25); */
}
.history_image{
display: flex;
  /* flex-direction: row; */
  flex-wrap: wrap;
   gap: 10px;
  justify-content: center;
  align-items: center;

  width: 100vw;
  margin: 0 auto;
  /* flex-wrap: wrap;
  gap: 10px;
  padding: 20px 10px; */
}
.history_image img{
width: 600px;
object-fit: cover;
border-radius: 10px;
}


/* ==========facilities============ */
.Facilities{
  display: flex;
  justify-content: center;
  margin-top: -2rem;
}
.wrapper{
  /* width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 75px; */
  display: flex;
  justify-content: center;
}
.image{
  width: 500px;
  height: 500px;
  position: relative;
  margin: 10px;
  margin-top: -2rem;
}
.image img{
  width: 100%;
  display: block;
  margin: auto;
  height: 500px;
}
.content{
  width:100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background:rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
}
.content:hover{
  opacity: 1;
}
.content h1{
  font-size: 42px;
  color: yellow;
  margin-bottom: 10px;
}
.content p{
  font-size: 20px;
  /* font-weight:bold; */
  color: white;
}
.content p:hover{
  color: rgb(208, 255, 0);
  cursor: pointer;
}
.content > *{
  transform: translateY(25px);
  transition: transform 0.6s;
}
.content:hover > *{
  transform: translateY(0px);
}


/* ====== media queries (tablets)========= */
@media screen and (max-width:1024px) {
  .about_header {
    margin-top: 2rem;
  }
  .about_header-cointainer{
      grid-template-columns: 1fr;
      gap: 4rem;
  }
  /* .about_left{
      width: 80%;
      margin: 0 auto;
  } */
}

/* ====== media queries (phone)========= */
@media screen and (max-width:415px) {
  .abouts_cards{
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem ;         
  }
  .Facilities{
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .wrapper{
      margin-bottom: 2rem;
  }
  .history_image img{
    width: 100vw;
    object-fit: cover;
    border-radius: 10px;
    }
}

.resources{
display: flex;
justify-content: center;
align-items: center;

}


@media screen and (max-width:600px) {
  .abouts_cards{
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem ;         
  }
  .Facilities{
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .wrapper{
      margin-bottom: 2rem;
  }
  .history_image img{
    width: 100vw;
    object-fit: cover;
    border-radius: 10px;
    }
}





/* --------time----------- */
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap"); */


.timebody{
  --color: rgba(30, 30, 30);
  --bgColor: rgb(248, 248, 248);
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 2rem;
  font-family: "Poppins", sans-serif;
  color: var(--color);
  /* background: var(--bgColor); */
  margin-top: 2rem;
}

h1 {
  text-align: center;
}

.ulist ul {
  --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 */
.ulist ul::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 */
.ulist ul li:not(:last-child) {
  margin-bottom: var(--row-gap);
}

/* card */
.ulist ul 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 */
.ulist ul 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 */
.ulist ul 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 */
.ulist ul 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 img{
  width: 50px;
  display: flex;
  float: left;
  margin-right: 2rem;
}


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

/* shadows */
.ulist ul li .title::before,
.ulist ul 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%);
}
.ulist ul li .title::before {
  bottom: calc(100% + 0.125rem);
}

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

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

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

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

  .ulist ul li:nth-child(odd) .date::after {
    transform: translate(-50%, -50%);
    left: calc(100% + var(--col-gap) + var(--line-w) / 2);
  }
  .ulist ul 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);
}