#academic-calender h1 {
  text-align: center;
  font: bold 48px/61px GothamBold !important;
  color: #062f4f;
  padding: 50px 0px;
}
@media only screen and (max-width: 600px) {
  #academic-calender h1 {
    font: bold 34px/38px GothamBold !important;
    padding: 30px 0px;
  }
}
#academic-calender .row {
  margin-bottom: 20px;
}
@media only screen and (max-width: 600px) {
  #academic-calender .row {
    padding: 10px;
  }
}
#academic-calender .row .img-box {
  position: relative;
}
@media only screen and (max-width: 600px) {
  #academic-calender .row .img-box {
    margin-bottom: 10px;
  }
}
#academic-calender .row .img-box img {
  margin: 0;
  padding: 0;
}
#academic-calender .row .img-box p {
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 94%;
  background-color: #062f4f;
  color: #fff;
  padding: 10px;
  transform: translateX(-50%);
  text-align: center;
  font: normal 18px/29px GothamBook !important;
}
#academic-calender .row .content-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font: normal 18px/29px GothamBook !important;
  background-color: #f2f2f2;
  padding: 10px;
}
@media only screen and (max-width: 600px) {
  #academic-calender .row .content-box {
    font: normal 16px/24px GothamBook !important;
  }
}
#academic-calender .row .content-box h4 {
  font: bold 30px/48px GothamBold !important;
}
@media only screen and (max-width: 600px) {
  #academic-calender .row .content-box h4 {
    font: bold 24px/30px GothamBold !important;
  }
}
#academic-calender .row .content-box .btn {
  width: 200px;
  background-color: #813672;
  border-color: #813672;
}
#academic-calender .row .content-box ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media only screen and (max-width: 600px) {
  #academic-calender .row .content-box ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
#academic-calender .row .content-box ul li {
  color: #813672;
}