style2.css

section {
  padding: 100px 0;
  border: 0px solid red;
}
html, body {
  overflow-x: hidden;
}
body {
  font-family: "Roboto";
  font-size: 17px;
  font-weight: 400;
  background-color: #eee;
  
}
h1 {
  font-size: 200%;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
}

header {
  background: #3F51B5;
  color: #FFFFFF;
  padding: 150px 0;
}
header p {
  font-family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 0;
  font-size: 60px;
  margin-top: -30px;
}

.timeline {
  position: relative;
  font-weight: bold;
}

/* Draws line */
.timeline::before {
  content: "";
  background: #C5CAE9;
  width: 5px;
  height: 73%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item {
  width: 100%;
  margin-bottom: 70px;

}

.timeline-item:nth-child(even) .timeline-content {
 
  margin-right: 8%;
  float: right;
  padding: 10px 30px 10px 30px;
}
 .timeline-item:nth-child(even) .timeline-content .alignment {
  position:absolute;
  text-align: left;
  padding-right: 5px;
} 
.timeline-item:nth-child(even) .timeline-content .date {
  left: auto;
  right: 0;
}
.timeline-item:nth-child(even) .timeline-content .bnt-more {
  position: absolute;
  right:0;
  bottom: 65px;
}

.timeline-item:nth-child(even) .timeline-content::after {
  content: "";
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  left: -15px;
  border-width: 10px 15px 10px 0;
  border-color: transparent #f5f5f5 transparent transparent;
}

.timeline-item::after {
  content: "";
  display: block;
  clear: both;
}

/* This will give the cards to their respective sides */
.timeline-content {
  position: relative;
  width: 35%;
  margin-left: 7%;
  padding: 25px 30px;
  border-radius: 40px;

  box-shadow: 0 20px 25px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row;
  align-items: center;
  background-image: linear-gradient(147deg, #545b62a8, black);
  color: white;
  height: 227px;
  font-family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
}

.timeline-content::after {
  font-family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
  content: "";
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  right: -15px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #f5f5f5;
}

.timeline-img {
  width: 30px;
  height: 30px;
  background: #3F51B5;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-top: 25px;
  margin-left: -15px;
}


.date {
  background: #FF4081;
  display: inline-block;
  color: #FFFFFF;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

@media (max-width: 991px){

  .timelineHeading{
    font-size: 1.8ch;
   font-weight: bold;
  }
  .date1{
    padding: 1px;
  }                                   
  .timelineHeading2{
    font-size: 94%;
  }
  .date2{
    padding: 0px;
  }
  .date3{
    padding: 4px;
  }
}


@media(max-width:1200px){
  .timelineHeading{
    font-size: 152%;
  }
  .timelineHeading2{
    font-size: 131%;
  font-weight: bolder;
  }
  .timelineHeading3{
    font-size: 2.9ch;
  }
}

@media (max-width: 991px){

  .timelineHeading{
    font-size: 1.8ch;
   font-weight: bold;
  }
  .date1{
    padding: 1px;
  }

  .timelineHeading2{
    font-size: 94%;
  }
  .date2{
    padding: 0px;
  }
  .date3{
    padding: 4px;
  }
}


@media screen and (max-width: 768px) {
  .timeline::before {
    left: 50px;
  }

  .timeline .timeline-img {
    left: 50px;
  }

  .timeline .timeline-content {
    max-width: 100%;
    width: auto;
    margin-left: 70px;
  }

  .timeline .timeline-item:nth-child(even) .timeline-content {
    float: none;
  }
  h2{
    font-size: 1.75rem;
  }
  h3{
    font-size: 1.5rem;
  }

  .timeline .timeline-item:nth-child(odd) .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent #f5f5f5 transparent transparent;
  } 
}
 
body
{
  width: auto;
}
@media(max-width:600px)
{
  body{

  
  font-size: 13px;
  }
}

footer
{
    display: flex;
    position: relative;
    width: 100%;
    background-color: #3586ff;
    min-height: 120px;
    padding: 20px 0px;
    justify-content: center;
    align-items: center;
}
footer .icons
{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;

}
footer .icons li
{
  list-style: none;
}
footer .icons li a
{
  font-size: 2em;
  color: white;
  margin: 0 15px;
  display: inline-block;
  transition: 0.5s;
}
footer .icons li a:hover
{
  transform: translateY(-13px);
}
footer 
{
  display: block;

}
footer #contact
{
  width: auto;
  align-items: center;
  text-align: centre;
  height: 30px;
  margin: auto;
  margin-bottom: 25px;
}
footer h2
{
  text-align: center;
  align-items: center;
}