Current File : /home/masbinta/www/core/resources/sass/_history.scss

/*======= History timeline =======*/

.about-history-area{
	padding-top: 100px;
	padding-bottom: 170px;
	& .section-title{
		padding-bottom: 60px;
		& .title{
			margin-bottom: 13px;
			&::before{
				display: none;
			}
		}
		& p{
			@include respond-below(sm) {
				font-size: 15px;
			}
		}
	}
	& .history-item{
		box-shadow: 0px 8px 16px 0px rgba(132, 190, 255, 0.1);
		margin-right: 55px;
		position: relative;
		@include respond-below(sm) {
			padding-top: 0;
			margin-right: 0;
		}

		& .history-thumb{
			& img{
				width: 100%;
			}

		}
		& .history-content{
			padding: 33px 40px 38px;
			@include respond-below(md) {
				padding: 25px 20px 25px;
			}
			@include respond-below(sm) {
				padding: 15px;
			}
			@include respond-below(sm) {
				padding: 33px 40px 38px;
			}
			& span{
				color: $primary-color;
				font-weight: 700;
			}
			& .title{
				font-size: 26px;
				padding-top: 9px;
				@include respond-below(lg) {
					font-size: 22px;
				}
				@include respond-below(md) {
					font-size: 17px;
				}
				@include respond-below(sm) {
					font-size: 18px;
				}
				@include respond-below(sm) {
					font-size: 26px;
				}
			}
		}
		&.history-item-2{
			margin-right: 0;
			margin-left: 55px;
			@include respond-below(sm) {
				margin-left: 0;
			}
			&::after{
				left: -72px;
			}
			& .number-box{
				left: -100px;
			}
		}
		&::after{
			position: absolute;
			content: '';
			right: -70px;
			top: 0;
			height: 100%;
			width: 2px;
			background: $border-color;
			@include respond-below(sm) {
				display: none;
			}
		}
		& .number-box{
			height: 60px;
			width: 60px;
			border-radius: 50%;
			border: 4px solid #9edbff;
			position: absolute;
			top: -25px;
			right: -99px;
			background: $white;
			z-index: 5;
			text-align: center;
			@include respond-below(sm) {
				display: none;
			}
			& span{
				line-height: 55px;
				font-weight: 700;
				color: $secondary-color;
			}
		}
		& .number-box-2{
			height: 60px;
			width: 60px;
			text-align: center;
			border-radius: 50%;
			background: $primary-color;
			position: absolute;
			right: -99px;
			bottom: -50px;
			z-index: 9;
			@include respond-below(sm) {
				display: none;
			}
			& i{
				color: $white;
				font-size: 20px;
				line-height: 60px;
			}
		}
	}
}