.header {position: fixed;background-color: hsla(0, 0%, 100%, .8);backdrop-filter: saturate(180%) blur(20px);}

.index-banner{position:relative;padding-top:50px;
    /*background:linear-gradient(180deg,#111827,rgba(17,24,39,.8));*/
    background: linear-gradient(180deg, #789af7, rgb(255 255 255));
    /*background: linear-gradient(0deg, #d8efdb, #edf7ef);*/
}
@media screen and (max-width:991px){
    .index-banner{padding-top:50px;}
}
@media screen and (max-width:767px){
    .index-banner .layui-container{padding:0 40px;}
    .index-banner{padding-top:50px;}
}
.index-banner-content{margin:auto auto 15px;max-width:940px;text-align:center;}
.index-banner-content .index-banner-title{margin-bottom:30px;margin-top: 30px;color:var(--text-color);text-align:center;font-weight:700;font-size:60px;line-height:60px;}
@media screen and  (max-width:991px){
    .index-banner-content .index-banner-title{font-size:58px;line-height:50px;}
}
@media screen and (max-width:767px){
    .index-banner-content .index-banner-title{margin-bottom:18px;font-size:36px;line-height:36px;}
    .index-banner-content .index-banner-title strong{display:block;margin-bottom:10px;font-size:42px;line-height:42px;}
}
.index-banner-content .index-banner-desc{margin:auto auto 30px;max-width:700px;color:var(--text-color);text-align:center;font-weight:400;font-size:20px;line-height:35px;opacity:.8;}
@media screen and (max-width:767px){
    .index-banner-content .index-banner-desc{margin-bottom:18px;font-size:16px;line-height:30px;}
}
.index-banner-buttons .layui-btn{border:1px solid transparent;background-color:var(--white-color);color:var(--heading-color);font-size:18px;}
.index-banner-buttons .layui-btn:hover{box-shadow:0 2px 25px hsla(0,0%,100%,.2);color:var(--primary-color);transform:translateY(-5px);}
.index-banner-brands{margin-bottom:40px;color:#637381;text-align:center;}
.index-banner-images{position:relative;z-index:1;margin:auto;max-width:845px;text-align:center;}
.index-banner-images img{max-width:100%;text-align:center;}
.index-banner-images .item-primary{border-radius:9px 9px 0 0;box-shadow:0 -2px 25px hsla(0,0%,100%,.2);}
.index-banner-images .item-shape-1,.index-banner-images .item-shape-2{position:absolute;z-index:-1;}
.index-banner-images .item-shape-1{bottom:0;left:-30px;}
.index-banner-images .item-shape-2{top:-20px;right:-20px;}
.index-features{padding-top:120px;padding-bottom:90px;background-color:var(--white-color);}
@media screen and (max-width:767px){
    .index-features{padding-top:80px;padding-bottom:40px;}
}

.index-section-title{margin:auto auto 70px;text-align:center;}
.index-section-title span{margin-bottom:10px;color:var(--primary-color);font-weight:600;font-size:18px;}
.index-section-title h2{margin-bottom:20px;color:var(--heading-color);text-transform:capitalize;font-weight:700;font-size:42px;line-height:55px;}
.index-section-title p{font-size:20px;line-height:30px;}
@media screen and (max-width:767px){
    .index-section-title h2{font-size:32px;}
    .index-section-title p{font-size:16px;line-height:26px;}
}
@media screen and (max-width:575px){
    .index-section-title h2{font-size:22px;line-height:36px;margin-bottom: 10px;}
}

.index-single-feature{margin-bottom:50px;text-align:center;}
.index-single-feature:hover .index-feature-icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.index-single-feature .index-feature-icon{position:relative;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;margin:auto auto 40px;width:70px;height:70px;border-radius:14px;background:var(--primary-color);color:var(--white-color);text-align:center;font-size:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.index-single-feature .index-feature-icon:before{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border-radius:14px;background:var(--primary-color);content:"";opacity:.2;-webkit-transition:all .3s ease-out 0s;transition:all .3s ease-out 0s;-webkit-transform:rotate(23deg);transform:rotate(23deg);}
.index-single-feature .index-feature-title{margin-bottom:12px;font-weight:700;font-size:20px;line-height:28px;}
.index-single-feature .index-feature-desc{margin-bottom:40px;font-size:16px;line-height:24px;}
@media screen and (max-width:575px){
    .index-single-feature .index-feature-title{font-size:18px;line-height:26px;}
}

.index-templates{padding-bottom:90px;}
.index-ai-template,.index-templates{background-color:var(--white-color);}
.index-ai-template{position:relative;display:block;border:1px solid #e5e7eb;border-radius:9px;box-shadow:none;transition:all .3s ease-in-out;}
.index-ai-template .con{padding:20px;}
.index-ai-template h4{color:var(--heading-color);font-weight:700;font-size:16px;line-height:1.5;}
.index-ai-template p{color:#6b7280;font-size:14px;line-height:1.5;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow-wrap: break-word;}
.index-ai-template-icon{display:flex;overflow:hidden;margin-bottom:10px;padding:.5rem;width:2.5rem;height:2.5rem;border-radius:9px;box-shadow:0 0 transparent,0 0 transparent,0 0 0 1px rgba(17,24,39,.05),0 1px 4px rgba(17,24,39,.1),0 8px 16px rgba(17,24,39,.1);align-items:center;justify-content:center;}
.index-ai-template:hover{box-shadow:0 2px 8px rgb(0 0 0/8%);transform:translateY(-3px);}
@media screen and (max-width:767px){
    .index-ai-template p{-webkit-line-clamp: 3;}
}

.index-ai-template-button{margin:50px auto 50px;text-align:center;}
.index-ai-template-button .layui-btn{border:1px solid transparent;background-color:var(--primary-color);color:var(--white-color);font-weight:500;font-size:16px;}
.index-ai-template-button .layui-btn:hover{background-color:var(--heading-color);box-shadow:0 0 10px rgba(0,0,0,.3);}

.index-ai-example{display:block;padding:20px;border:1px solid rgba(0,0,0,.08);background:var(--white-color);}
.index-ai-example-content .tag{display:inline-block;margin-bottom:20px;padding:5px 20px;background-color:var(--primary-color);color:var(--white-color);font-weight:500;font-size:14px;}
.index-ai-example-content h2{margin-bottom:30px;font-weight:700;font-size:36px;line-height:45px;}
.index-ai-example-content p{margin-bottom:24px;font-size:16px;line-height:28px;}

@media screen and (min-width: 992px) {
    .index-ai-example-content{padding: 7px;}
}
@media screen and (min-width: 1200px){
    .index-ai-example-content{padding: 38px;}
}
@media screen and (min-width: 1400px) {
    .index-ai-example-content{padding: 67px;}
}
@media screen and (max-width:991px){
    .index-ai-example{display:block;border:0;}
    .index-ai-example-content .tag{display: none;}
    .index-ai-example-content{padding:0;text-align: center;margin-bottom: 50px;}
}
@media (max-width:767px){
    .index-ai-example-content h2{font-size:26px;line-height:38px;}
}

.index-articles{background-color: var(--white-color);padding-bottom:90px;}
.index-articles .index-section-title{margin-bottom: 20px;}

.index-article-list ul {
    overflow: hidden;
    padding: 15px 0 15px 20px;
    font-size: 16px;
}
.index-article-list li {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-top: 10px;
    padding-left: 15px;
    width: 33.33%;
    height: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 26px;
}
.index-article-list li:before {
    position: absolute;
    top: 9px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 10px;
    background-color: var(--primary-color);
    content: "";
}

@media screen and (max-width:991px){
    .index-article-list li{width:50%;}
    .index-article-list li:nth-child(n+31) {
      display: none;
    }
}
@media (max-width:575px){
    .index-article-list ul{font-size: 14px;}
    .index-article-list li{width:100%;}
    .index-article-list li:nth-child(n+21) {
      display: none;
    }
}
.evaluation {
    justify-content: center;
    display: flex;
}
.evaluation .item {
    width: 240px;
    font-size: 18px;
    color: white;
}
.evaluation .icon {
    width: 100px;
    margin: 0 auto 2px;
}
.evaluation .icon img {
    width: 100%;
}