/**
 * Why Learn
 *
 * Generated by Dreamz Page Builder on 2026-07-22.
 */
.why-learn{
	background: #FFFAF5;
	padding: 80px 0px 65px 0px;
	margin-bottom: 45px;
	position: relative;
}
.why-learn .main-title{
    margin: -40px auto 0px auto;
    text-align: center;
    background: var(--section-bg);
    max-width: 500px;
    padding: 40px 0px;
}
.why-learn .main-title h2{
    padding: 0px 10px;
	margin: 0px;
}
.why-tune-animation  {
    background-image: url(../images/music-animation-bg.svg);
    background-repeat: repeat;
    background-size: contain;
    width: 100%;
    height: 140px;
    display: block;
    position: absolute;
    top: 35px;
    right: 0px;
    background-position: center;
    animation: waveMove 50s linear infinite;
}
.icon-text-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.icon-text-item{
	width: calc(25% - 15px);
	border-radius: 20px;
	border: 2px solid #E0E0E0;
	background: #FFF;
	padding: 24px 30px;
	text-align: center;
	transition: var(--transition);
}
.icon-text-item:hover{
	border: 2px solid #B28B50;
	box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.15);
	transition: var(--transition);
}
.icon-text-item .icon{
	width: 75px;
	height: 75px;
	border-radius: 75px;
	border: 1px solid #A37522;
	padding: 14px;
	margin: 0px auto 15px auto;
	transition: var(--transition);
}
.icon-text-item:hover  .icon{
	background: rgba(163, 117, 34, 0.10);

}
.icon-text-item .icon img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.icon-text-item p{
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}


@media only screen and (max-width:1024px) {
	.icon-text-item {
		width: calc(33.33% - 15px);
	}
}

@media only screen and (max-width:991px) {
    .icon-text-item {
        width: calc(50% - 10px);
    }
	.why-learn{
		padding: 60px 0px;
	}
	.why-learn .main-title{
		margin: -30px auto 0px auto;
		padding: 30px 0px;
	}
	.why-tune-animation{
		top: 10px;
	}
}

@media only screen and (max-width:767px) {
	.icon-text-item {
        width: 100%;
		border-radius: 15px;
    }
	.icon-text-item{
		padding: 24px 20px;
	}
	.icon-text-item .icon {
		width: 65px;
		height: 65px;
		padding: 15px;
	}	
	.why-learn {
        padding: 50px 0px;
    }
	.why-learn .main-title{
		max-width: 300px;
	}
	.why-learn .why-tune-animation{
		top: 0px;
	}
}