/* ================================================================================== */
/* ============================> about intro <============================= */
/* ================================================================================== */
/* ---> About */
.about h1 {margin-bottom: 1.8rem;margin-top: 0px;font-size: 2.2rem;line-height: 1.6;font-weight: bold;text-shadow: 0px 0px 1px;color: #583e8fcf;}
.about .description {font-size: 1.2rem;}
.about .about-us { font-size: 15px;color: #777; }

#intro > .row::after {background: linear-gradient(80deg, #af9be814 40%, #af9be84a 10%);display:block;content: "";width: 75%;height: 100%;position: absolute;right: 0px;top: 0pc;z-index: -1;/* inset: -50px; */filter: blur(60px);}
#intro .site-history {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    background-repeat: no-repeat;
}
#intro .site-history li {
	  background: var(--ad-color-4);
	  border-radius: 17px;
	  list-style: none;
	  display: inline-block;
	  padding: 6px;
	  margin: 1%;
	  font-size: 0.85rem;
	  color: #000000;
	  width: 100%;
	  text-align: center;
	  box-shadow: 0px 2px 6px #8d889e78;
}
#intro .site-history strong {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    color: var(--ad-color-1);
    margin-bottom: 5px;
}
#intro .site-history span {
    text-align: right;
    width: 100%;
    display: 100%;
}

#intro .icons img{position: absolute;background-color: #ffffffa3;backdrop-blur: blur(2px);border: 1px solid #cfc4e8;border-radius: 50%;animation: floatY 1.5s ease-in-out infinite alternate;}
#intro .icons .icon1{right: 58%;top: 8%;}
#intro .icons .icon2{right: 12%;top: 46%;animation-delay: 1.7s;}
#intro .icons .icon3{left: 8%;top: 58%;animation-delay: 0.7s;}
/* Define the smooth up-down movement */
@keyframes floatY {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(15px); /* adjust 15px for more or less movement */
  }
}



/* ================================================================================== */
/* ===============================> featured lesson <=============================== */
/* ================================================================================== */
.color-box::after {content: "";display: inline-block;width: 50%;height: 115%;background: var(--ad-color-3);position: absolute;left: -10px;top: -15%;border-radius: 5px;}




/* ================================================================================== */
/* ============================> Last Training Product <============================= */
/* ================================================================================== */



/* #front-product-box { background: url("../img/abstract-bg.png") left bottom no-repeat; } */
#front-product-box .small-training-item { background: white;border-radius: 20px;border: 1px solid #eee; }
#front-product-box .small-training-item a { display: block; }
#front-product-box .small-training-item i {
	font-size: 40px;
	color: var(--ad-color-2);
	background: linear-gradient( to top right , var(--ad-color-2) , var(--ad-color-3) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}
#front-product-box .small-training-item h4 { font-size: 14px;margin: 10px 0 0;transition: all 0.3s; }
#front-product-box .small-training-item a:hover h4 { color: var(--ad-color-2); }




/* ================================================================================== */
/* ===============================> Blog: Last Post  <=============================== */
/* ================================================================================== */

#blog-posts aside { background: white;border-radius: 20px;border: 1px solid #eee;padding: 25px 10px; }




/* ================================================================================== */
/* ==================================> Responsive  <================================= */

/* ================================================================================== */

@media ( max-width: 768px ) {
	.about h1 {font-size: 1.6rem;}
}

@media ( min-width: 576px ) {
	/* ---> Services */
	#services .item i { font-size: 40px; }
	#services .item h4 { font-size: 15px; }
	/* ---> Files */
	#files { border-radius: 72px 72px 0 0; }
}