
.about-cert {padding: 80px 0 100px;background: url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/3cca4deccd1213bb14a32e444efec082/about_cert.jpg) no-repeat center bottom;background-size: 106% auto;}
.about-cert .tit {max-width: 1240px;margin: 0 auto;text-align: center;}
.about-cert .tit h3 {line-height: 1;color: #fff;font-weight: 600;text-transform: capitalize;}
.about-cert .tit p {font-size: 18px;line-height: 30px;color: #7a7a7a;margin-top: 25px;}
.about-cert .list {margin-top: 50px;position: relative;}
.about-cert .list a {display: block;overflow: hidden;border: 8px solid #484848;}
.about-cert .list a img {width: 100%;}

.about-cert .swiper-button-prev,.about-cert .swiper-button-next{width:50px;height:50px;line-height:48px;overflow:hidden;border-radius:50%;background:none;margin-top:-25px;text-align:center;color:#B5B5B5;border: 1px solid transparent;box-sizing: border-box;transition: all .3s ease;}
.about-cert .swiper-button-next::after,.about-cert .swiper-button-prev::after {display:none;}
.about-cert .swiper-button-prev i,.about-cert .swiper-button-next i{color:inherit;font-size:28px;display:inline-block;}
.about-cert .swiper-button-prev,.about-cert .swiper-container-rtl .swiper-button-next{left:-60px;right:auto;}
.about-cert .swiper-button-next,.about-cert .swiper-container-rtl .swiper-button-prev{right:-60px;left:auto;}
.about-cert .swiper-button-prev:hover,.about-cert .swiper-button-next:hover{border-color: var(--color-primary);}

.about-cert .swiper-pagination-bullets{position:static;width:100%;display:none;margin-top:20px;}
.about-cert .swiper-pagination-bullet {width:10px;height:10px;margin:0 3px;background:#C1C1C1;border-radius:50%;opacity:1;box-sizing:border-box;}
.about-cert .swiper-pagination-bullet-active{background:var(--color-primary);}

.about-cert .swiper-button-prev:hover::before{content:"\e62b";display: flex;justify-content: center;align-items: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: var(--color-primary);border-radius: 50%;animation: animation_btn .5s ease-in-out;font-family: "qico" !important;font-size: 28px;color: #fff;}
.about-cert .swiper-button-next:hover::before{content:"\e628";display: flex;justify-content: center;align-items: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: var(--color-primary);border-radius: 50%;animation: animation_btn .5s ease-in-out;font-family: "qico" !important;font-size: 28px;color: #fff;}

@keyframes animation_btn{
  0% {
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 0 0;
    transform: translate(0%, 100%);
  }
  30% {
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 0 0;
  }
  100% {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    transform: translate(0%, 0%);
  }
}



@media screen and (max-width: 1550px) {
.about-cert {padding: 65px 0 80px;}
.about-cert .tit p {font-size: 17px;line-height: 28px;margin-top: 20px;}
.about-cert .list {margin-top: 40px;}
}
                                          
@media screen and (max-width: 1367px) {
.about-cert {padding: 50px 0 60px;}
.about-cert .tit p {font-size: 16px;line-height: 26px;margin-top: 15px;}
.about-cert .list {margin-top: 30px;}
}
                                    
@media screen and (max-width: 1280px) {
.about-cert .swiper-button-prev,.about-cert .swiper-button-next{width:40px;height:40px;line-height:38px;margin-top:-20px;}
.about-cert .swiper-button-prev i,.about-cert .swiper-button-next i{font-size:22px;}
.about-cert .swiper-button-prev,.about-cert .swiper-container-rtl .swiper-button-next{left:-45px;}
.about-cert .swiper-button-next,.about-cert .swiper-container-rtl .swiper-button-prev{right:-45px;}

}
                                
@media screen and (max-width: 992px) {
.about-cert {padding: 30px 0;}
.about-cert .swiper-button-prev, .about-cert .swiper-button-next {display: none;}
.about-cert .swiper-pagination-bullets {display: block;}
}
                                
@media screen and (max-width: 768px) {
.about-cert .tit p{font-size: 14px;line-height: 22px;margin-top: 5px;}
}

@media screen and (max-width: 480px) {
.about-cert .tit p {font-size:13px;line-height:20px;}
}

@media screen and (max-width: 400px) {
.about-cert .tit p {font-size: 12px;line-height: 18px;}
}










/* Yawei Certification Component */
.yawei-certification {position:relative;padding:80px 0;background-color:var(--bg-color);overflow:hidden;}
/* Background image */  
.yawei-certification .certification-bg {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;opacity:0.5;}
.yawei-certification .certification-bg .bg-image {width:100%;height:100%;object-fit:cover;}
/* Content area */  
.yawei-certification .certification-content {position:relative;z-index:1;}
/* Header section */  
.yawei-certification .content-header {text-align:center;margin-bottom:60px;}
.yawei-certification .main-title {font-family:var(--title-font-family);font-size:60px;font-weight:700;color:var(--title-text-color);line-height:1.15;margin:0 0 30px 0;text-transform:uppercase;}
.yawei-certification .description {font-family:var(--font-family);font-size:18px;font-weight:400;color:#797979;line-height:1.67;margin:0 auto;text-align:center;}
/* Certificates carousel */  
.yawei-certification .certificates-carousel {position:relative;}
.yawei-certification .swiper-container {width:100%;overflow:hidden;padding:20px 0;}
.yawei-certification .swiper-wrapper {display:flex;align-items:center;}
.yawei-certification .swiper-slide {width:25.86%;flex-shrink:0;padding:0 15px;transition:transform 0.3s ease;transform:scale(0.8);opacity:0.7;}
.yawei-certification .swiper-slide-active {transform:scale(1);opacity:1;z-index:10;}
.yawei-certification .swiper-slide-prev,.yawei-certification .swiper-slide-next {transform:scale(0.9);opacity:0.85;z-index:5;}
/* Certificate item */  
.yawei-certification .cert-item {position:relative;background:#fff;border-radius:8px;/* padding:20px;*/    box-shadow:0 4px 20px rgba(0,0,0,0.1);transition:all 0.3s ease;cursor:pointer;}
.yawei-certification .cert-item:hover {transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.15);}
.yawei-certification .cert-image {width:100%;height:auto;display:block;border-radius:4px;}
/* Certificate overlay */  
.yawei-certification .cert-overlay {position:absolute;top:20px;left:20px;right:20px;bottom:20px;opacity:0;transition:opacity 0.3s ease;pointer-events:none;border-radius:4px;overflow:hidden;}
.yawei-certification .cert-item:hover .cert-overlay {opacity:1;}
.yawei-certification .overlay-image {width:100%;height:100%;object-fit:cover;}
/* Navigation arrows */  
.yawei-certification .cert-navigation {position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:20;pointer-events:none;}
.yawei-certification .swiper-button-prev,.yawei-certification .swiper-button-next {position:absolute;top:0;width:45px;height:45px;display:flex;align-items:center;justify-content:center;color:#000;text-decoration:none;transition:all 0.3s ease;pointer-events:auto;z-index:21;}
.yawei-certification .swiper-button-prev {left:-60px;}
.yawei-certification .swiper-button-next {right:-60px;}
.yawei-certification .swiper-button-prev:hover,.yawei-certification .swiper-button-next:hover {background:var(--color-second);transform:scale(1.1);text-decoration:none;color:#fff;}
.yawei-certification .swiper-button-prev i,.yawei-certification .swiper-button-next i {font-size:24px;line-height:1;}
/* Hide default Swiper navigation buttons */  
.yawei-certification .swiper-button-prev::after,.yawei-certification .swiper-button-next::after {display:none;}
.yawei-certification .swiper-pagination-bullets.swiper-pagination-horizontal {display:none;}
/* Responsive Design */  
@media (max-width:1400px) {
.yawei-certification .swiper-slide {width:30%;}
.yawei-certification .main-title {font-size:48px;}
}
@media (max-width:1200px) {
.yawei-certification .swiper-slide {width:32%;}
.yawei-certification .swiper-button-prev {left:-50px;}
.yawei-certification .swiper-button-next {right:-50px;}
}
@media (max-width:991px) {
.yawei-certification {padding:60px 0;}
.yawei-certification .content-header {margin-bottom:40px;}
.yawei-certification .main-title {font-size:36px;}
.yawei-certification .description {font-size:16px;}
.yawei-certification .swiper-slide {width:45%;}
.yawei-certification .swiper-button-prev,.yawei-certification .swiper-button-next {width:40px;height:40px;}
.yawei-certification .swiper-button-prev {left:10px;}
.yawei-certification .swiper-button-next {right:10px;}
}
@media (max-width:767px) {
.yawei-certification {padding:25px 0 60px;}
.yawei-certification .main-title {font-size:20px;margin-bottom:20px;text-align:left;}
.yawei-certification .description {font-size:16px;line-height:30px;text-align:left;}
.yawei-certification .content-header {margin-bottom:0;text-align:left;}
.yawei-certification .swiper-slide {width:70%;}
.yawei-certification .cert-item {}
.yawei-certification .swiper-button-prev,.yawei-certification .swiper-button-next {display:none;}
.yawei-certification .swiper-button-prev i,.yawei-certification .swiper-button-next i {font-size:14px;}
.yawei-certification .swiper-slide {transform:scale(1);}
.yawei-certification .swiper-slide-prev,.yawei-certification .swiper-slide-next {transform:scale(1);}
.yawei-certification .swiper-slide {padding:0;}
.yawei-certification .container {max-width:100%;}
.yawei-certification .certificates-carousel .swiper-pagination-bullets.swiper-pagination-horizontal {position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;justify-content:center;}
.cert-pagination .swiper-pagination-bullet {width:10px;height:10px;background:#C4C4C4;border-radius:50%;cursor:pointer;transition:all 0.3s ease;}
.cert-pagination .swiper-pagination-bullet-active {background:#F4541D;}
}
@media (max-width:575px) {
.yawei-certification .swiper-slide {width:85%;}
.yawei-certification .main-title {font-size:24px;}
.yawei-certification .swiper-button-prev,.yawei-certification .swiper-button-next {width:35px;height:35px;}
.yawei-certification .swiper-button-prev {left:5px;}
.yawei-certification .swiper-button-next {right:5px;}
}
