✏️ Editing: _icon-box.scss Writable

.ova-icon-box {
	display: flex;
	align-items:center;
	justify-content:space-between;

@media(max-width: 1024px){
		justify-content: center;
	}

.prefix{
		margin: 0;
		font-size: 30px;
		@media(max-width: 1024px){
			display: none;
		}
	}

.content{
		display: inline-block;
		text-align: center;
		margin: 35px 50px -20px 20px;

@media(max-width: 1024px){
			margin:0;
		}

&:hover{
			.icon-read-more{
				@include transaction( all, 0.3s, ease);
				top: 0;
				opacity: 1;
				visibility: visible;
			}
		}

.icon{
			display: inline-flex;
			margin: 0 0 10px 0;
			
			svg{
				width: 56px;
				height: 56px;
			}

i{
				display:inline-flex;
				font-size: 56px;
				color: var(--primary);
			}
		}

.title{
			font-size: 24px;
			font-weight: 500;
			line-height: 1.5;
			color: var(--heading);
			text-transform: capitalize;
			margin: 0 0 4px 0;

@media(max-width: 1200px){
				font-size: 20px;
			}	
		}

.description{
			@include transaction( all, 0.3s, ease);
			font-size: 18px;
			color: var(--heading);
			margin: 0;

@media(max-width: 1200px){
				font-size: 16px;
			}	
			
			.special-word{
				@include transaction( all, 0.3s, ease);
				color: var(--primary);
			}
		}

.icon-read-more{
			@include transaction( all, 0.3s, ease);
			position: relative;
			display: inline-flex;
			align-items:center;
			justify-content: center;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background-color: var(--primary);
			margin: 30px 0 0 0;

top: -15px;
			opacity: 0;
			visibility: hidden;

&:hover{
				background-color: var(--heading);
				i{
					@include transaction( all, 0.3s, ease);
					color: var(--primary);
				}
			}

@media(max-width: 1024px){
				opacity: 1;
				visibility: visible;
				margin: 15px 0 0 0;
			}

i{
				@include transaction( all, 0.3s, ease);
				font-size: 15px;
				display: inline-flex;
				color: var(--heading);
				transform: rotate(90deg);
			}
		}
	}
}

🔐 Sid Gifari File Manager Pro