.main-timeline{ font-family: 'Poppins', sans-serif; } .main-timeline:after{ content: ''; display: block; clear: both; } .main-timeline .timeline{ padding: 0 40px; margin: 0 0 50px; box-shadow: 0 10px 15px -19px rgba(0,0,0,0.5) inset; } .main-timeline .timeline-content{ color: #999; background: #fff; text-align: center; min-height: 140px; padding: 40px 120px; border: 12px solid #2563AE; border-top: none; border-radius: 0 0 40px 40px; box-shadow: 0 10px 15px -15px rgba(0,0,0,0.5) inset; display: block; position: relative; } .main-timeline .timeline-content:before{ content: ""; border: 3px dashed #2563AE; border-top: none; border-radius: 0 0 30px 30px; position: absolute; top: 0; left: 5px; right: 5px; bottom: 4px; } .main-timeline .timeline-content:hover{ text-decoration: none; } .main-timeline .timeline-icon{ color: #2563AE; font-size: 50px; line-height: 50px; transform: translateY(-50%); position: absolute; top: 50%; left: 35px; } .main-timeline .timeline-step{ color: #2563AE; font-size: 50px; font-weight: 600; line-height: 50px; text-align: center; transform: translateY(-50%); position: absolute; top: 50%; right: 35px; } .main-timeline .timeline-step span{ font-size: 22px; font-weight: 400; line-height: 25px; text-transform: uppercase; display: block; } .main-timeline .title{ font-size: 28px; font-weight: 500; text-transform: uppercase; margin: 0 0 8px; } .main-timeline .description{ font-size: 14px; margin: 0; } .main-timeline .timeline:nth-child(4n+2) .timeline-content, .main-timeline .timeline:nth-child(4n+2) .timeline-content:before{ border-color: #553986; } .main-timeline .timeline:nth-child(4n+2) .timeline-icon, .main-timeline .timeline:nth-child(4n+2) .timeline-step{ color: #553986; } .main-timeline .timeline:nth-child(4n+3) .timeline-content, .main-timeline .timeline:nth-child(4n+3) .timeline-content:before{ border-color: #EC4C1A; } .main-timeline .timeline:nth-child(4n+3) .timeline-icon, .main-timeline .timeline:nth-child(4n+3) .timeline-step{ color: #EC4C1A; } .main-timeline .timeline:nth-child(4n+4) .timeline-content, .main-timeline .timeline:nth-child(4n+4) .timeline-content:before{ border-color: #BF2A7E; } .main-timeline .timeline:nth-child(4n+4) .timeline-icon, .main-timeline .timeline:nth-child(4n+4) .timeline-step{ color: #BF2A7E; } @media screen and (max-width:576px){ .main-timeline .timeline .timeline-content, .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 110px 25px 25px; } .main-timeline .timeline-icon{ transform: translateY(0); top: 32px; } .main-timeline .timeline-step{ transform: translateY(0); top: 17px; } .main-timeline .title{ font-size: 22px; } }