.section-title.style4 h5 {
display: inline-block;
padding: 0 25px 0 35px;
margin-bottom: 20px;
font-size: 14px;
line-height: 35px;
text-transform: uppercase;
color: #ffffff;
font-weight: 500;
font-family: "Open Sans";
border-radius: 0 20px 20px 0px;
background-color: rgba(255,255,255,0.10196078431372549);
border: 1px solid rgba(255,255,255,0.2);
position: relative;
}
.section-title.style4 h5:before {
position: absolute;
content: '';
width: 9px;
height: 9px;
border-radius: 4px;
background-color: #ff853f;
left: 15px;
top: 13px;
}
.section-title.style4 h5 img {
position: absolute;
right: -50%;
top: 14px;
animation: bounceleft 4s linear infinite;
}
.section-title.style4 h3 {
font-size: 60px;
line-height: 70px;
color: #fff;
font-weight: 600;
}
.section-title.style4 h3 span {
color: #1ec28e;
}
.section-title.style4 p {
font-size: 18px;
line-height: 28px;
color: #fefefe;
font-weight: 400;
margin: 0;
}
.section-title.style4 .bar-main {
margin: 0px 0 0;
display: block;
}
.section-title.style4 .bar.bar-big {
height: 1px;
width: 100%;
background: rgba(255,255,255,0.2);
margin: 35px auto;
position: relative;
overflow: hidden;
}
.section-title.style4 .bar.bar-big::before {
content: '';
position: absolute;
left: 0;
top: 0px;
height: 1px;
width: 150px;
border-radius: 50%;
background: #1ec28e;
-webkit-animation-duration: 30s;
animation-duration: 35s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: moveLeftBounces;
animation-name: moveLeftBounces;
} .dreamit-button.style5 a {
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: var(--color-white);
font-weight: 500;
font-family: "Outfit";
border-radius: 28px;
background-color: #1ec28e;
padding: 13px 35px;
transition: 0.5s;
position: relative;
z-index: 1;
}
.dreamit-button.style5 a:before {
position: absolute;
content: "";
height: 100%;
width: 100%;
background: #1e1e1e;
border-radius: 30px;
left: 0;
top: 0;
bottom: 0;
right: 0;
transition: .5s;
clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
z-index: -1;
}
.dreamit-button.style5 a:hover:before {
clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
background: #1e1e1e;
} .dreamit-button.style6 a {
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: #fff;
font-weight: 500;
font-family: "Outfit";
background: transparent;
position: relative;
z-index: 1;
transition: 0.5s;
}
.dreamit-button.style6 a:hover {
color: #1ec28e;
}
.dreamit-button.style6 a:before {
position: absolute;
content: '';
width: 0px;
height: 1px;
background-color: #26a58e;
left: 36px;
right: 0;
top: 38px;
}
.dreamit-button.style6 a:hover:before {
width: 125px;
} .single-counter.style10 {
position: relative;
left: 10px;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 20px;
padding: 0 20px 0 25px;
animation: upDown 1.8s ease-in-out 1.8s forwards infinite alternate;
border-radius: 20px;
background-color: rgba(30,194,142,0.14901960784313725);
border: 2px solid rgba(30,194,142,0.5);
width: 291px;
height: 139px;
}
.single-counter.style10 .number span {
display: inline-block;
font-size: 26px;
line-height: 26px;
color:#fff;
font-weight: 600;
font-family: "Outfit", serif;
}
.single-counter.style10 .counter-content.counter h6 {
display: block;
font-size: 16px;
line-height: 26px;
font-weight: 400;
color: #ffffff;
font-family: "Open Sans";
margin: 2px 0 0;
} .icon-box.style17 {
border-radius: 20px;
background-color: #ffffff;
padding: 25px 35px;
display: flex;
align-items: center;
gap: 25px;
position:relative;
z-index:1;
}
.icon-box.style17:before {
position: absolute;
content: "";
z-index: -1;
width: 0;
height: 100%;
left: 0;
top: 0;
border-radius: 14px;
background-color: #1ec28e;
transition: 0.5s;
}
.icon-box.style17:hover:before {
width: 100%;
}
.icon-box.style17 .img-icon {
width: 100px;
height: 100px;
border-radius: 15px;
background-color: #e4f6ef;
line-height: 130px;
text-align: center;
}
.icon-box.style17 .icon-box-content h2 {
font-size: 20px;
color: #1e1e1e;
font-weight: 500;
margin: 0;
transition: 0.5s;
}
.icon-box.style17:hover .icon-box-content h2 {
color: #fff;
}
@keyframes bounceleft{
0% {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
50% {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
100% {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
}
@keyframes moveLeftBounces {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(585px);
transform: translateX(585px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes upDown {
0% {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px);
}
} .section-title.style5 h5 {
display: inline-block;
transition: 0.5s;
position: relative;
z-index: 1;
font-size: 15px;
text-transform: uppercase;
color: #1ec28e;
font-weight: 600;
font-family: "Open Sans";
margin: 0;
}
..section-title.style5 h5:before {
position: absolute;
content: '';
width: 6px;
height: 6px;
line-height: 6px;
background-color: var(--primary-color);
left: 4px;
top: 8px;
}
.section-title.style5 h5:after {
position: absolute;
content: '';
background-color: rgba(30,30,30,0.10196078431372549);
left: -15px;
bottom: -3px;
width: 146px;
height: 1px;
background-image: linear-gradient(90deg, #ffffff 0%, #1dc18d 50%, #ffffff 100%);
}
.section-title.style5 h3 {
font-size: 45px;
line-height: 55px;
color: #1e1e1e;
font-weight: 600;
}
.service-box.style8 {
border: 1px solid #78bda0;
border-radius: 16px;
margin-bottom: 20px;
transition: 0.5s;
position: relative;
}
.service-box.style8 .service-box-inner {
border-radius: 14px;
background-color: #f0fbf8;
margin: 10px;
padding: 45px 20px 35px 35px;
position: relative;
z-index: 1;
transition: 0.5s;
}
.service-box.style8 .service-box-inner:before {
position: absolute;
content: "";
z-index: -1;
width: 100%;
height: 100%;
left: 0%;
top: 0;
border-radius: 14px;
background-color: #1ec28e;
transition: 0.5s;
transform:translateY(0%) rotateX(90deg);
opacity: 0;
}
.service-box.style8:hover .service-box-inner:before {
opacity: 1;
transform: translateY(0) rotateX(0);
}
.service-box.style8:hover .thumb {
filter: brightness(0) invert(1);
}
.service-box.style8 .content h3 {
font-size: 26px;
color: #1e1e1e;
font-weight: 600;
position: relative;
z-index: 1;
transition: .5s;
padding: 25px 0 0;
margin: 25px 0 0;
}
.service-box.style8:hover .content h3 {
color: #fff;
}
.service-box.style8 .content h3:before {
position: absolute;
content:'';
left: 0;
right: 0;
top: 0;
width: 100%;
overflow: hidden;
z-index: 5;
height: 1px;
background-color: rgb(30 30 30 / 10%);
padding: 0 0 0;
transition: 0.5s;
}
.service-box.style8:hover .content h3:before {
background-color: rgb(255 255 255 / 30%);
}
.service-box.style8 .content h3:after {
content: "";
display: block;
position: relative;
bottom: 59px;
left: 0px;
-webkit-animation: moveLeftBouncestwo 35s linear infinite;
animation: moveLeftBouncestwo 35s linear infinite;
overflow: hidden;
width: 80px;
height: 1px;
background-color: #ff853f;
transition: 0.5s;
z-index: 9;
}
.service-box.style8:hover .content h3:after {
background-color: #fff;
}
.service-box.style8 .content p {
font-size: 17px;
line-height: 30px;
color: #616161;
font-weight: 400;
transition: 0.5s;
margin: 12px 0 22px;
}
.service-box.style8:hover .content p {
color:#fff
}
.service-box.style8 .content .service-btn a {
display: inline-block;
transition: 0.5s;
font-size: 16px;
font-weight: 500;
font-family: "Outfit";
color: #1e1e1e;
text-transform: uppercase;
letter-spacing: -10px;
opacity: 0;
}
.service-box.style8:hover .content .service-btn a {
color:#fff;
letter-spacing:0px;
opacity: 1;
}
.service-box.style8 .content .service-btn i {
font-size: 16px;
font-weight: 600;
color: #1ec28e;
transition: 0.5s;
margin-right: 8px;
}
.service-box.style8:hover .content .service-btn i {
color:#fff;
}
.gym-shape1 {
animation: scaleAnimation 2s infinite ease-in-out;
}
@keyframes scaleAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes moveLeftBouncestwo {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(200px);
transform: translateX(148px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
} .single-video.style6 .video-icon a {
position: absolute;
display: inline-block;
font-size: 20px;
color: #fff;
top: 13%;
left: 74%;
transform: translate(-50%, 50%);
line-height: 69px;
text-align: center;
width: 70px;
height: 69px;
border-radius: 34px;
background-color: #1ec28e;
border: 1px solid rgba(255,255,255,0.35);
webkit-animation: ripple-white 1s linear infinite;
animation: ripple-blue 1s linear infinite;
-webkit-transition: 0.5s;
animation: rippleGreen 1.5s infinite ease-out;
}
.single-video.style6 .video-icon a:after {
position: absolute;
content: '';
left: -17px;
top: -17px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50px;
border: 1px solid rgb(30 194 142 / 40%);
}
.section-title.style7 h5 {
display: inline-block;
transition: 0.5s;
position: relative;
z-index: 1;
font-size: 15px;
text-transform: uppercase;
color: #1ec28e;
font-weight: 600;
font-family: "Open Sans";
padding-left: 20px;
}
.section-title.style7 h5:before {
position: absolute;
content: '';
left: 0;
top: 4px;
width: 9px;
height: 9px;
line-height: 9px;
border-radius: 10px;
background-color: #ff853f;
}
.section-title.style7 h3 {
font-size: 45px;
line-height: 55px;
color: #1e1e1e;
font-weight: 600;
}
.icon-box.style18 {
display: flex;
align-items: center;
gap: 50px;
margin-bottom: 30px;
}
.icon-box.style18 .img-icon {
width: 63px;
height: 63px;
line-height: 79px;
border-radius: 31px;
filter: drop-shadow(0 0 25px rgba(30,194,142,0.15));
background-color: #ffffff;
text-align: center;
position: relative;
flex-shrink: 0;
}
.icon-box.style18 .img-icon:before {
position: absolute;
content: '';
width: 85px;
height: 85px;
border-radius: 42px;
background-color: rgba(30,194,142,0);
border: 1px solid rgb(30 194 142 / 35%);
left: -11px;
top: -11px;
}
.icon-box.style18 .img-icon:after {
position: absolute;
content: '';
width: 1px;
height: 80px;
border: 1px dashed rgb(30 194 142 / 35%);
left: 30px;
top: 62px;
}
.last .icon-box.style18 .img-icon:after{
display: none;
}
.icon-box.style18 .icon-box-content h2 {
font-size: 22px;
line-height: 42px;
color: #000000;
font-weight: 500;
margin: 0 0 0;
}
.icon-box.style18 .icon-box-content p {
font-size: 17px;
line-height: 28px;
color: #616161;
font-weight: 400;
margin: 0 0 0;
}
@keyframes rippleGreen {
0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.4); }
50% { box-shadow: 0 0 10px 10px rgba(0, 255, 0, 0.2); }
100% { box-shadow: 0 0 20px 20px rgba(0, 255, 0, 0); }
}  .testimonial.style6 .testimonial-item {
border-radius: 15px;
background-color: #ffffff;
padding: 50px 50px 50px;
}
.testimonial.style6 .testimonial-item .testi_content h3 {
display: inline-block;
transition: 0.5s;
position: relative;
z-index: 1;
font-size: 15px;
line-height: 30px;
text-transform: uppercase;
color: #1e1e1e;
font-weight: 600;
font-family: "Open Sans";
border: 1px solid rgba(30,194,142,0.25);
padding: 2px 24px 2px 36px;
border-radius: 0px 30px 30px 0px;
margin: 0;
}
.testimonial.style6 .testimonial-item .testi_content h3:before {
position: absolute;
content: '';
line-height: 9px;
left: 15px;
top: 14px;
width: 9px;
height: 9px;
border-radius: 10px;
background-color: #ff853f;
}
.testimonial.style6 .testimonial-item .testi_content h2 {
font-size: 30px;
line-height: 55px;
color: #000000;
font-weight: 600;
margin: 19px 0 30px;
}
.testimonial.style6 .testimonial-item  .testi-star i {
display: inline-block;
font-size: 16px;
color: #1ec28e;
}
.testimonial.style6 .testimonial-item .testi_content p {
font-size: 17px;
line-height: 30px;
color: #616161;
font-weight: 400;
margin: 32px 0 0;
}
.testimonial.style6 .testimonial-item .bio {
display: flex;
align-items: center;
gap: 16px;
margin-top: 40px;
}
.testimonial.style6 .testimonial-item .author_content h4 {
font-size: 22px;
line-height: 32px;
color: #1e1e1e;
font-weight: 500;
}
.testimonial.style6 .testimonial-item .author_content h5 {
font-size: 15px;
text-transform: uppercase;
color: #616161;
font-weight: 400;
font-family: "Open Sans";
padding-left: 20px;
position: relative;
}
.testimonial.style6 .testimonial-item .author_content h5:before {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #ff853f;
left: 0;
top: 10px;
} .pricing-hand-shape {
animation: flexAnimation 1.5s infinite ease-in-out;
}
.pricing.style3 {
border-radius: 16px;
background-color: rgba(255,255,255,0);
border: 1px solid rgb(120 189 160 / 20%);
}
.pricing.style3 .pricing-box-inner {
border-radius: 14px;
background-color: #f0fbf8;
margin: 25px 25px 25px 25px;
padding: 40px 25px 45px 35px;
}
.pricing.style3 .pricing-head h3 {
font-size: 17px;
text-transform: uppercase;
color: #1ec28e;
font-weight: 500;
position: relative;
z-index: 1;
}
.pricing.style3 .pricing-head h3:before {
position: absolute;
content: '';
width: 189px;
height: 44px;
background-color: #ffffff;
z-index: -1;
left: -34px;
top: -11px;
border-radius: 0px 30px 30px 0px;
}
.pricing.style3 .pricing-head h3:after {
position: absolute;
content: '';
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
background-color: #ffffff;
top: -10px;
right: 12px;
transform: scale(1);
transition: .5s;
}
.pricing.style3:hover .pricing-head h3:after {
background-color: #1ec28e;
transform: scale(1.1);
}
.pricing.style3 .price-item {
margin: 40px 0 10px;
}
.pricing.style3 .price-item span {
font-size: 50px;
line-height: 56px;
color: #1e1e1e;
font-weight: 600;
}
.pricing.style3 .price-item span.month {
font-size: 17px;
color: #1e1e1e;
font-weight: 400;
}
.pricing.style3 .pricing-head p {
font-size: 16px;
line-height: 28px;
color: #616161;
font-weight: 400;
}
.pricing.style3 .pricing-body ul.features {
padding-left: 25px;
}
.pricing.style3 .pricing-body ul.features li {
list-style: none;
font-size: 16px;
line-height: 28px;
color: #616161;
font-weight: 400;
font-family: "Open Sans";
margin-bottom: 18px;
position: relative;
}
.pricing.style3 .pricing-body ul.features li:before {
position: absolute;
content: '';
width: 9px;
height: 9px;
border-radius: 5px;
background-color: #ff853f;
left: -25px;
top: 9px;
}
.pricing.style3 .pricing-body a {
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: #fff;
font-weight: 500;
font-family: "Outfit";
border-radius: 28px;
background-color: #1ec28e;
padding: 10px 33px;
position: relative;
z-index: 1;
margin-top: 15px;
}
.pricing.style3:hover .pricing-body a {
color:#fff;
}
.pricing.style3 .pricing-body a:before {
position: absolute;
content: "";
width: 0;
height: 100%;
left: 50%;
top: 0;
background: #1e1e1e;
z-index: -1;
border-radius: 26px;
transition: 0.5s;
clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
}
.pricing.style3:hover .pricing-body a::before{
width: 100%;
left: 0;
clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
}
@keyframes flexAnimation {
0%, 100% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.1) rotate(-5deg);
}
} .blog-rolling-shape {
animation: scaleAnimation 3s infinite ease-in-out;
}
.blog-rolling2-shape {
animation: shakeAnimation 5s infinite ease-in-out;
}
@keyframes scaleAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes shakeAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
} .form-area.quote_form.style_two input {
width: 100%;
height: 56px;
border-radius: 10px;
background-color: #ffffff;
border: 0;
outline: 0;
padding-left: 20px;
}
.form-area.quote_form.style_two .button {
font-size: 16px;
line-height: 28px;
text-transform: uppercase;
color: #ffffff;
font-weight: 500;
font-family: "Open Sans";
text-align: center;
width: 100%;
height: 56px;
border-radius: 28px;
background-color: #1ec28e;
position: relative;
z-index: 1;
}
.form-area.quote_form.style_two .button:before {
position: absolute;
content: "";
width: 0;
height: 100%;
left: 50%;
top: 0;
background: #fff;
z-index: -1;
border-radius: 26px;
transition: 0.5s;
}
.form-area.quote_form.style_two .button:hover:before {
width: 100%;
left: 0;
}  .islamic{
overflow:hidden;
}
.islamic .section-title.style4 h5 img {
position: absolute;
right: -33rem;
top: -3rem;
animation: bounceleft 4s linear infinite;
}
.islamic .section-title.style4 h5 {
background-color: rgba(255,255,255,0.30196078431372547);
border: 1px solid rgba(255,255,255,0.5);
}
.islamic .section-title.style4 .bar.bar-big {
background: rgba(97,97,97,0.2);
}
.islamic .hero-shape84 {
animation: scaleZoom 2s cubic-bezier(0.10, 0, 0.26, 0) 0s infinite alternate;
}
.hero-shape81 {
animation: pulse 0.6s ease infinite;
}
@keyframes scaleZoom {
0% {
transform: scale(0.6);
opacity: 0.3;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.09);
}
} .service-box.style8 .icon {
position: absolute;
right: 0;
top: 0;
}
.islamic .service-box.style8 .service-box-inner {
overflow: hidden;
}
.islamic .service-box.style8 .service-box-inner:after {
position: absolute;
content: "";
z-index: -1;
width: 100%;
height: 100%;
left: 46%;
top: 55%;
border-radius: 14px;
background: url(https://wp.ditsolution.net/educatex/wp-content/uploads/2025/09/learn-circle.png);
transition: 0.5s;
background-repeat: no-repeat;
background-position: center;
} .about-shape82 {
animation: floatShimmer 4s ease-in-out infinite;
}
.single-video.style-seven .em-video-image {
width: 450px;
height: 360px;
}
.single-video.style-seven .video-icon {
left: -70px;
position: absolute;
top: 15%; }
.single-video.style-seven .video-icon a {
display: inline-block;
font-size: 20px;
color: #fff;
top: 26px;
left: 190px;
text-align: center;
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
background-color: rgba(255,255,255,0.14901960784313725);
border: 1px solid rgba(255,255,255,0.35);
backdrop-filter: blur(10px);
}
.single-video.style-seven .video-icon a::after {
position: absolute;
content: '';
left: -16px;
top: -16px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
border: 2px solid rgb(255,255,255,0.2);
animation: ripple-blue 1s linear infinite;
-webkit-transition: 0.5s;
}
@keyframes ripple-blue {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.30196078431372547),
0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255,0.30196078431372547);
box-shadow: 0 0 0 0 rgba(255,255,255,0.30196078431372547),
0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255,0.30196078431372547);
}
100% {
-webkit-box-shadow: 0 0 0 10px rgba(255,255,255,0.30196078431372547),
0 0 0 20px rgba(255,255,255,0.30196078431372547), 0 0 0 30px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(255,255,255,0.30196078431372547),
0 0 0 20px rgba(255,255,255,0.30196078431372547), 0 0 0 30px rgba(255, 255, 255, 0);
}
}
ul.item-list.style4 li {
font-size: 16px;
text-transform: uppercase;
color: #1e1e1e;
font-weight: 500;
font-family: "Outfit";
margin-bottom: 20px;
list-style: none;
}
ul.item-list.style4 li i {
display: inline-block;
margin-right: 15px;
color: #ff853f;
font-size: 10px;
}
.about-shapes83 {
animation: sadSway 5s ease-in-out infinite;
}
@keyframes floatShimmer {
0% {
transform: translateY(0) rotate(0deg) scale(1);
filter: drop-shadow(0 0 0px #fb923c);
}
25% {
transform: translateY(-4px) rotate(-1deg) scale(1.02);
filter: drop-shadow(0 0 6px #fb923c);
}
50% {
transform: translateY(0) rotate(1deg) scale(1);
filter: drop-shadow(0 0 10px #fb923c);
}
75% {
transform: translateY(-4px) rotate(-1deg) scale(1.02);
filter: drop-shadow(0 0 6px #fb923c);
}
100% {
transform: translateY(0) rotate(0deg) scale(1);
filter: drop-shadow(0 0 0px #fb923c);
}
}
@keyframes sadSway {
0% {
transform: rotate(0deg) translateY(0);
filter: grayscale(0%) brightness(100%);
opacity: 1;
}
25% {
transform: rotate(-1deg) translateY(2px);
filter: grayscale(40%) brightness(90%);
opacity: 0.95;
}
50% {
transform: rotate(1deg) translateY(4px);
filter: grayscale(60%) brightness(80%);
opacity: 0.9;
}
75% {
transform: rotate(-1deg) translateY(2px);
filter: grayscale(40%) brightness(90%);
opacity: 0.95;
}
100% {
transform: rotate(0deg) translateY(0);
filter: grayscale(0%) brightness(100%);
opacity: 1;
}
}  .move-left {
animation: bounceleft 4s linear infinite;
}
.flip-shape {
animation: flip 1.7s ease-in-out infinite;
}
.book-shape {
animation: bookPage 3s infinite ease-in-out;
animation-delay: 2s;
}
.zoom-shape {
animation: scaleZoom 3s cubic-bezier(0.10, 0, 0.26, 0) 0s infinite alternate;
}
ul.my-accordion.style5 li {
list-style: none;
padding: 0px 0px 28px;
}
ul.my-accordion.style5 li:after {
position: absolute;
content: "";
top: 13px;
right: 16px;
width: 38px;
height: 38px;
border-radius: 20px;
border: 1px solid rgb(30,30,30,0.15);
display: block;
background: transparent;
border: 1transparent;
}
ul.my-accordion.style5 li:hover:after {
background:transparent;
}
ul.my-accordion.style5 li a {
position: relative;
width: 100%;
display: block;
cursor: pointer;
padding: 17px 11px 18px 30px;
z-index: 1;
font-size: 22px;
line-height: 26px;
color: #1e1e1e;
font-weight: 500;
font-family: "Outfit";
border-radius: 12px;
background-color: rgba(255,255,255,0);
border: 1px solid rgb(30 30 30 / 15%);
}
ul.my-accordion.style5 li a:before {
width: 2px;
height: 16px;
background: #1e1e1e;
position: absolute;
right: 32px;
content: " ";
top: 23px;
transform: rotate(0deg);
transition: all 0.5s ease-in-out;
z-index: 2;
}
ul.my-accordion.style5 li a:after {
width: 16px;
height: 2px;
background: #1e1e1e;
position: absolute;
right: 25px;
content: " ";
top: 30px;
transition: all 0.5s ease-in-out;
z-index: 1;
}
ul.my-accordion.style5 li a.active:after {
transform: rotate(0deg);
-webkit-transition: all 0.5s ease-in-out;
background: #fff;
} ul.my-accordion.style5 li a.active:after {
transform: rotate(0deg);
-webkit-transition: all 0.5s ease-in-out;
}
ul.my-accordion.style5 li a.active:before {
transform: rotate(0deg);
-webkit-transition: all 0.5s ease-in-out;
background: #1e1e1e;
}
ul.my-accordion.style5 li a.active {
border-radius: 10px 10px 0 0;
background-color: #1ec28e;
color: #fff !important;
}                     ul.my-accordion.style5 li p {
display: none;
padding: 28px 35px 30px 25px;
margin: 0;
overflow: hidden;
font-family: "Open Sans";
border-radius: 0px 0px 10px 10px;
background-color: #ffffff;
filter: drop-shadow(0px 20px 15px rgba(219,231,228,0.4));
font-size: 17px;
line-height: 28px;
color: #616161;
font-weight: 400;
} @keyframes flip {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(20deg); }
100% { transform: rotateY(0deg); }
}
@keyframes bookPage {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(-180deg); }
100% { transform: rotateY(-180deg); }
}
@keyframes scaleZoom {
0% {
transform: scale(0.6);
opacity: 0.3;
}
100% {
transform: scale(1);
opacity: 1;
}
} .team-shape1 {
animation: enter 1.2s ease-out forwards, float 3s ease-in-out infinite;
}
.team.style4 .image {
position: relative;
z-index: 1;
transition: .5s;
overflow: hidden;
}
.team.style4 ul.social-icon li {
list-style: none;
}
.team.style4 ul.social-icon li a {
display: inline-block;
position: absolute;
top: 55px;
right: 15px;
width: 55px;
height: 55px;
line-height: 55px;
border-radius: 50%;
background-color: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.4);
text-align: center;
color: #fff;
backdrop-filter: blur(10px);
font-size: 20px;
transition: 0.5s;
transform: translateY(-110px);
opacity: 0;
}
.team.style4:hover ul.social-icon li a {
transform: translateY(0px);
opacity: 1;
}
.team-area.style-four .single-team-box.box-2:hover .team-profile a {
transform: translateY(-20px);
opacity: 1;
}
.team-area.style-four .single-team-box.box-3:hover .team-profile a {
transform: translateY(-30px);
opacity: 1;
}
.team-area.style-four .single-team-box.box-4:hover .team-profile a {
transform: translateY(-30px);
opacity: 1;
}
@keyframes enter {
0% {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}  .blog_style_three .single_blog_adn {
border-radius: 20px;
background-color: rgba(255,255,255,0);
border: 1px solid rgb(30 30 30 / 20%);
overflow: hidden;
margin-bottom: 20px;
transition: 0.5s;
}
.blog_style_three .luxury-single-blog_adn {
margin: 25px;
background: #fff;
border-radius: 20px;
transition: 0.5s;
}
.blog_style_three .luxury-single-blog_adn .luxury-blog-thumb_adn {
position: relative;
z-index: 1;
transition: 0.5s;
}
.blog_style_three .luxury-single-blog_adn .luxury-blog-thumb_adn:before {
content: "";
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
transform: skewX(-25deg);
}
.blog_style_three .luxury-single-blog_adn:hover .luxury-blog-thumb_adn:before {
animation: shine 800ms;
}
.blog_style_three .luxury-blog-thumb_adn img {
border-radius: 20px;
}
.blog_style_three .em-blog-content-area_adn {
padding: 20px 40px 40px;
}
.blog_style_three .em-blog-content-area_adn .author a {
font-size: 15px;
text-transform: uppercase;
color: #616161;
font-weight: 500;
margin-bottom: 15px;
}
.blog_style_three .blog-page-title_adn h2 a {
display: inline-block;
font-size: 24px;
line-height: 32px;
color: var(--title-color);
font-weight: 600;
font-family: "Outfit";
transition: 0.5s;
}
.blog_style_three .luxury-blog-readmore a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16px;
line-height: 30px;
color: var(--tertiary-color);
font-weight: 500;
font-family: "Outfit";
border-radius: 25px;
background-color: rgba(21,193,250,0.10196078431372549);
border: 1px solid rgba(21,193,250,0.3);
padding: 8px 17px 8px 30px;
margin-top: 27px;
position: relative;
z-index: 1;
transition: 0.5s;
}
.blog_style_three .luxury-blog-readmore a:before {
position: absolute;
content: "";
height: 100%;
width: 100%;
background: var(--tertiary-color);
border-radius: 30px;
left: 0;
top: 0;
bottom: 0;
right: 0;
transition: .5s;
clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
z-index: -1;
}
.blog_style_three .luxury-blog-readmore a:hover{
color:var(--color-white);  
}
.blog_style_three .luxury-blog-readmore a:hover img{
filter: brightness(0) invert(1);  
}
.blog_style_three .luxury-blog-readmore a:hover:before {
clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
} .blog-post.style4 .post-item.style4 {
display: flex;
margin: 0 0 15px;
}
.blog-post.style4 .post-item.style4 .post-thumb {
position: relative;
line-height: 0;
}
.blog-post.style4 .post-item.style4 .post-thumb img {
height: 317px;
width: 514px;
object-fit: cover;
}
.blog-post.style4 .post-item.style4 .post-thumb:before {
background: rgba(255, 255, 255, 0.3);
bottom: 0;
content: "";
left: 50%;
position: absolute;
right: 51%;
top: 0;
opacity: 1;
pointer-events: none;
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
}
.blog-post.style4 .post-item.style4:hover .post-thumb:before {
left: 0;
right: 0;
opacity: 0;
}
.blog-post.style4 .post-item.style4 .post-thumb img {
border-radius: 20px;
}
.blog-post.style4 .post-item.style4 .single_blog_post_content {
position: relative;
z-index: 1;
padding: 33px 0px 15px 0;
margin-left: -40px;
transition: 0.5s;
}
.blog-post.style4 .post-item.style4 .single_blog_post_content:before {
position: absolute;
content: '';
right: -55px;
top: 0;
z-index: -1;
width: 388px;
height: 317px;
border-radius: 20px;
background-color: #ffffff;
transition: 0.5s;
}
.blog-post.style4 .post-item.style4 ul.post-categories li {
list-style: none;
}
.blog-post.style4 .post-item.style4 ul.post-categories li a {
display: inline-block;
font-size: 15px;
line-height: 30px;
text-transform: uppercase;
color: #1ec28e;
font-weight: 400;
font-family: "Open Sans";
border-radius: 17px;
background-color: rgba(30,194,142,0.10196078431372549);
border: 1px solid rgba(21,193,250,0.3);
padding: 2px 20px;
margin-bottom: 10px;
transition: 0.5s;
}
.blog-post.style4 .post-item.style4 .single_blog_post_content h3 a {
display: inline-block;
font-size: 24px;
line-height: 36px;
color: #1e1e1e;
font-weight: 500;
font-family: "Outfit";
transition: 0.5s;
position: relative;
border-bottom: 1px solid rgba(97,97,97,0.2);
padding-bottom: 18px;
margin-bottom: 18px;
}
.blog-post.style4 .post-item.style4 .single_blog_post_content h3 a:hover {
color: #1ec28e;
}
.blog-post.style4 .post-item.style4 .single_blog_post_content p {
font-size: 16px;
line-height: 28px;
color: #616161;
font-weight: 400;
margin: 0px 0 42px;
}
.blog-post.style4 .post-item.style4 .single_blog_post_content .blog_btn a {
display: inline-block;
text-transform: uppercase;
font-size: 16px;
color: #1ec28e;
font-weight: 500;
font-family: "Outfit";
transition: 0.5s;
}
.dark .blog_style_three .luxury-single-blog_adn {
background: #282c2b;
}
.dark .blog-post.style4 .post-item.style4 .single_blog_post_content:before {
background: #282c2b;
} .brand.style4 .brand-item {
padding: 0 15px;
}