  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Kannada:wght@400;500;600;700&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
  html * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    *,
    *:after,
    *:before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    body {
      font-size: 100%;
      font-family: "Droid Serif", serif;
      color: #7f8c97;
      background-color: #e9f0f5;
    }
    
    img {
      max-width: 100%;
    }
    
    h1,
    h2 {
      font-family: "Open Sans", sans-serif;
      font-weight: bold;
    }

    :root{
      --red:#CA0000;
      --grey:#94979C;
      --black:#2D2E30;  
      --yellow: #EDD500;
      --blue:  #09274C;
      --sans:'Work Sans', sans-serif;                                                                                                                                                           
  }  
    
    /* -------------------------------- 
    
    Modules - reusable parts of our design
    
    -------------------------------- */
    .timelinebanner{
      margin-top: 0px;
    }
    .timeline-tablet-banner{
      display: none;
    }
    .timeline-mobile-banner{
      display: none;
    }
    .step-section{
      background-color: #e9f0f5;
    }
    .cd-container {
      /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
      max-width: 1000px;
      margin: 0 auto;
    }
    .cd-container::after {
      /* clearfix */
      content: "";
      display: table;
      clear: both;
    }
    
    /* -------------------------------- 
    
    Main components 
    
    -------------------------------- */
    header {
      height: 200px;
      line-height: 200px;
      text-align: center;
      background: #303e49;
    }
    header h1 {
      color: #ffffff;
      font-size: 18px;
      font-size: 1.125rem;
    }

    
    #cd-timeline {
      position: relative;
      /* padding: 2em 0; */
      padding-bottom: 20px;
      padding-top: 20px;
      padding-right: 20px;
    }
    #cd-timeline::before {
      /* this is the vertical line */
      content: "";
      position: absolute;
      top: 0;
      left: 18px;
      height: 100%;
      width: 4px;
      background: #09274C;
    }


    @keyframes moveline{
      0%{
          height: 0;
      }
      100%{
          height: 100%;
      }
  }
    
    .cd-timeline-block {
      position: relative;
      margin: 2em 0;
      animation: movedown 1s linear forwards;
      opacity: 0;
    }
    @keyframes movedown{
      0%{
          opacity: 0;
          transform: translateY(-30px);
      }
      100%{
          opacity: 1;
          transform: translateY(0px);
      }
  }
    .cd-timeline-block::after {
      clear: both;
      content: "";
      display: table;
    }
    .cd-timeline-block:first-child {
      margin-top: 0;
    }
    .cd-timeline-block:last-child {
      margin-bottom: 0;
    }
  .cd-timeline-block:nth-child(1){
      animation-delay: 0s;
  }
  .cd-timeline-block:nth-child(2){
      animation-delay: 1s;
  }
  .cd-timeline-block:nth-child(3){
      animation-delay: 2s;
  }
  .cd-timeline-block:nth-child(4){
      animation-delay: 3s;
  }
  .cd-timeline-block:nth-child(5){
      animation-delay: 4s;
  }
  .cd-timeline-block:nth-child(6){
      animation-delay: 5s;
  }
  .cd-timeline-block:nth-child(7){
      animation-delay: 6s;
  }
  .cd-timeline-block:nth-child(8){
      animation-delay: 7s;
  }
  .cd-timeline-block:nth-child(9){
      animation-delay: 8s;
  }
  .cd-timeline-block:nth-child(10){
      animation-delay: 9s;
  }
  .cd-timeline-block:nth-child(11){
      animation-delay: 10s;
  }
  .cd-timeline-block:nth-child(12){
      animation-delay: 11s;
  }
  .cd-timeline-block:nth-child(13){
      animation-delay: 12s;
  }
  .cd-timeline-block:nth-child(14){
      animation-delay: 13s;
  }

  .cd-timeline-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    
    @-webkit-keyframes cd-bounce-1 {
      0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
      }
      60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
      }
      100% {
        -webkit-transform: scale(1);
      }
    }
    @-moz-keyframes cd-bounce-1 {
      0% {
        opacity: 0;
        -moz-transform: scale(0.5);
      }
      60% {
        opacity: 1;
        -moz-transform: scale(1.2);
      }
      100% {
        -moz-transform: scale(1);
      }
    }
    @keyframes cd-bounce-1 {
      0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
      }
      60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
      }
      100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
      }
    }
    .cd-timeline-content {
      position: relative;
      margin-left: 70px;
      background: #ffffff;
      border-radius: 0.25em;
      padding: 1em;
      box-shadow: 0 3px 0 #d7e4ed;
      border:  10px solid #DCE7EF;
      border-radius: 20px;
    }
    .cd-timeline-content::after {
      clear: both;
      content: "";
      display: table;
    }
    .cd-timeline-content h2 {
      font-family: var(--sans);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0em;
      text-align: center;
      color: #DD291D;
    }
    .cd-timeline-content p {
      font-family: var(--sans);
      font-size: 22px;
    font-weight: 500;
  margin-bottom: 0;
  letter-spacing: 0em;
  text-align: center;
  color: var(--blue);
  margin-bottom: 0;
    }
    .cd-timeline-content p {
      font-family: var(--sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  color: var(--blue);
  margin-bottom: 0;
    }
    .cd-timeline-content .cd-read-more,
    .cd-timeline-content .cd-date {
      display: inline-block;
    }
    .cd-timeline-content .cd-read-more {
      float: right;
      padding: 0.8em 1em;
      background: #acb7c0;
      color: #ffffff;
      border-radius: 0.25em;
    }
    .no-touch .cd-timeline-content .cd-read-more:hover {
      background-color: #bac4cb;
    }
    .cd-timeline-content .cd-date {
      float: left;
      padding: 0.8em 0;
      opacity: 0.7;
    }
  .cd-left::before {
      content: "";
      position: absolute;
      top: 16px;
      right: 100%;
      height: 0;
      width: 0;
      border: 26px solid transparent;
      border-right: 7px solid #bac4cb;
      border-right-color: #dce7ef;

    }
    .cd-right::before {
      content: "";
      position: absolute;
      top: 16px;
      right: 100%;
      height: 0;
      width: 0;
      border: 26px solid transparent;
      border-left: 7px solid #bac4cb;

    }


    
    @-webkit-keyframes cd-bounce-2 {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
      }
      60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
      }
      100% {
        -webkit-transform: translateX(0);
      }
    }
    @-moz-keyframes cd-bounce-2 {
      0% {
        opacity: 0;
        -moz-transform: translateX(-100px);
      }
      60% {
        opacity: 1;
        -moz-transform: translateX(20px);
      }
      100% {
        -moz-transform: translateX(0);
      }
    }
    @keyframes cd-bounce-2 {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px);
      }
      60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        transform: translateX(20px);
      }
      100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
      }
    }
    @-webkit-keyframes cd-bounce-2-inverse {
      0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
      }
      60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
      }
      100% {
        -webkit-transform: translateX(0);
      }
    }
    @-moz-keyframes cd-bounce-2-inverse {
      0% {
        opacity: 0;
        -moz-transform: translateX(100px);
      }
      60% {
        opacity: 1;
        -moz-transform: translateX(-20px);
      }
      100% {
        -moz-transform: translateX(0);
      }
    }
    @keyframes cd-bounce-2-inverse {
      0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px);
      }
      60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
      }
      100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
      }
    }

    /* Mobile */
    @media (min-width: 320px) and (max-width: 600px) {
      .timelinebanner{
          display: none;
        }
        .timeline-tablet-banner{
          display: none;
        }
        .timeline-mobile-banner{
          margin-top: 0px;
          display: block;
        }
      #cd-timeline::before{
          left: 32px;
      }
      .cd-timeline-img {
          position: absolute;
          top: 50px;
          left: 5px;
          width: 60px;
          height: 60px;
          border-radius: 50%;
      }
      .cd-timeline-content h2 {
          font-family: var(--sans);
          margin-bottom: 6px;
          font-size: 16px;
          font-weight: 500;
          line-height: 35px;
          letter-spacing: 0em;
          text-align: center;
          color:#DD291D;
      }
      .cd-timeline-content p {
          font-family: var(--sans);
          font-size: 14px;
          font-weight: 500;
          line-height: 28px;
          letter-spacing: 0em;
          text-align: center;
          color: var(--blue);
          margin-bottom: 8px;
      }
      .cd-timeline-content p {
        font-family: var(--sans);
      font-size: 24px;
      font-weight: 500;
      line-height: 28px;
      letter-spacing: 0em;
      text-align: center;
      color: var(--blue);
      margin-top: 10px;
        }
      .cd-right::before{
          display: none !important;
      }
      .cd-left::before{
          display: none !important;
      }
    }
    @media (min-width: 601px) and (max-width: 768px){
      .cd-right::before{
        display: none !important;
    }
    .cd-left::before{
        display: none !important;
    }
    }
    @media (min-width: 768px) and (max-width: 1024px) {
      .timelinebanner{
          display: none;
        }
        .timeline-tablet-banner{
          margin-top: 0px;
          display: block;
        }
        .timeline-mobile-banner{
          display: none;
        }
      #cd-timeline::before{
          left: 32px;
      }
      .cd-timeline-img {
          position: absolute;
          top: 50px;
          left: -7px;
          width: 80px;
          height: auto;
          border-radius: 50%;    
      }
      .cd-timeline-content h2 {
          font-family: var(--sans);
          margin-bottom: 6px;
          font-size: 24px;
          font-weight: 500;
          line-height: 35px;
          letter-spacing: 0em;
          text-align: center;
          color:#DD291D;;
      }
      .cd-timeline-content p {
          font-family: var(--sans);
          font-size: 20px;
          font-weight: 500;
          line-height: 28px;
          letter-spacing: 0em;
          text-align: center;
          color: var(--blue);
          margin-bottom: 8px;
      }
      .cd-timeline-content p {
        font-family: var(--sans);
      font-size: 24px;
      font-weight: 500;
      line-height: 28px;
      letter-spacing: 0em;
      text-align: center;
      color: var(--blue);
        }
      .cd-right::before{
          display: none !important;
      }
      .cd-left::before{
          display: none !important;
      }
    }

    @media (min-width: 1024px) and (max-width: 1440px) {
      .timelinebanner{
          display: block;
        }
        .timeline-tablet-banner{
          margin-top: 60px;
          display: none;
        }
        .timeline-mobile-banner{
          display: none;
        }
        header {
          height: 300px;
          line-height: 300px;
        }
        header h1 {
          font-size: 24px;
          font-size: 1.5rem;
        }
      #cd-timeline {
      padding: 40px;
      }
      #cd-timeline::before {
        left: 50%;
        margin-left: -2px;
        animation: moveline 10s linear forwards;
      }
      .cd-timeline-block {
          margin: 4em 0;
        }
        .cd-timeline-block:first-child {
          margin-top: 0;
        }
        .cd-timeline-block:last-child {
          margin-bottom: 0;
        }
        .cd-timeline-img {
          width: 80px;
          height: 80px;
          left: 50%;
          margin-left: -40px;
          z-index: 10;
          top: 20px;
        }
        .cssanimations .cd-timeline-img.is-hidden {
          visibility: hidden;
        }
        .cssanimations .cd-timeline-img.bounce-in {
          visibility: visible;
          -webkit-animation: cd-bounce-1 0.6s;
          -moz-animation: cd-bounce-1 0.6s;
          animation: cd-bounce-1 0.6s;
        }

        .cd-timeline-content {
          margin-left: 0;
          padding: 1.6em;
          width: 42%;
        }
        .cd-timeline-content::before {
          top: 24px;
          left: 100%;
          border-color: transparent;
        border-left-color: #dce7ef;
    
        }
        .cd-timeline-content .cd-read-more {
          float: left;
        }
        .cd-timeline-content .cd-date {
          position: absolute;
          width: 100%;
          left: 122%;
          top: 6px;
          font-size: 16px;
          font-size: 1rem;
        }
        .cd-timeline-block:nth-child(even) .cd-timeline-content {
          float: right;
        }
        .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
          top: 24px;
          left: auto;
          right: 100%;
          border-color: transparent;
          border-right-color: #dce7ef;
    
        }
        .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
          float: right;
        }
        .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
          left: auto;
          right: 122%;
          text-align: right;
        }
        .cssanimations .cd-timeline-content.is-hidden {
          visibility: hidden;
        }
        .cssanimations .cd-timeline-content.bounce-in {
          visibility: visible;
          -webkit-animation: cd-bounce-2 0.6s;
          -moz-animation: cd-bounce-2 0.6s;
          animation: cd-bounce-2 0.6s;
        }
        /* inverse bounce effect on even content blocks */
      .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
          -webkit-animation: cd-bounce-2-inverse 0.6s;
          -moz-animation: cd-bounce-2-inverse 0.6s;
          animation: cd-bounce-2-inverse 0.6s;
        }
    }

    @media screen and (min-width: 1441px) {
      header {
          height: 300px;
          line-height: 300px;
        }
        header h1 {
          font-size: 24px;
          font-size: 1.5rem;
        }
      #cd-timeline {
      padding: 40px;
      }
      #cd-timeline::before {
        left: 50%;
        margin-left: -2px;
        animation: moveline 10s linear forwards;
      }
      .cd-timeline-block {
          margin: 4em 0;
        }
        .cd-timeline-block:first-child {
          margin-top: 0;
        }
        .cd-timeline-block:last-child {
          margin-bottom: 0;
        }
        .cd-timeline-img {
          width: 80px;
          height: 80px;
          left: 50%;
          margin-left: -40px;
          z-index: 10;
          top: 20px;
        }
        .cssanimations .cd-timeline-img.is-hidden {
          visibility: hidden;
        }
        .cssanimations .cd-timeline-img.bounce-in {
          visibility: visible;
          -webkit-animation: cd-bounce-1 0.6s;
          -moz-animation: cd-bounce-1 0.6s;
          animation: cd-bounce-1 0.6s;
        }

        .cd-timeline-content {
          margin-left: 0;
          width: 42%;
        }
        .cd-timeline-content::before {
          top: 24px;
          left: 100%;
          border-color: transparent;
        border-left-color: #dce7ef;
    
        }
        .cd-timeline-content .cd-read-more {
          float: left;
        }
        .cd-timeline-content .cd-date {
          position: absolute;
          width: 100%;
          left: 122%;
          top: 6px;
          font-size: 16px;
          font-size: 1rem;
        }
        .cd-timeline-block:nth-child(even) .cd-timeline-content {
          float: right;
        }
        .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
          top: 24px;
          left: auto;
          right: 100%;
          border-color: transparent;
          border-right-color: #dce7ef;
    
        }
        .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
          float: right;
        }
        .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
          left: auto;
          right: 122%;
          text-align: right;
        }
        .cssanimations .cd-timeline-content.is-hidden {
          visibility: hidden;
        }
        .cssanimations .cd-timeline-content.bounce-in {
          visibility: visible;
          -webkit-animation: cd-bounce-2 0.6s;
          -moz-animation: cd-bounce-2 0.6s;
          animation: cd-bounce-2 0.6s;
        }
        /* inverse bounce effect on even content blocks */
      .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
          -webkit-animation: cd-bounce-2-inverse 0.6s;
          -moz-animation: cd-bounce-2-inverse 0.6s;
          animation: cd-bounce-2-inverse 0.6s;
        }
    }

    
    

    