:root {
    --color-1: #1f1f1f;
    --color-2: #707070;
    --color-3: #9a9a9a;
    --color-4: #f2f2f2;
    --link-color: #274dea;
    --link-hover-color: #1d3ecf
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.4rem;
    letter-spacing: 0.5px;
    color: var(--color-1);
    background: #fff;
}

h1, h2, h3, h4, h5, h6{margin: 0 0 20px; font-weight: 700; text-transform: none;}
a{text-decoration: none;}
a:hover, .links li a:hover, .socials a:hover, .copyright-text a:hover{color: var(--link-hover-color);}
img{max-width: 100%;}
ul, li{margin: 0; padding: 0; list-style: none;}
.btn{border-radius: 20px; border-width: 0; font-weight: 600; padding: 10px 20px;}
.btn-outline-secondary{border-width: 1px;}
.btn-primary{background: #3b63fb;}
.btn-primary:hover, .btn-primary:focus{background: #274dea;}
.download-btn{padding: 20px 30px; border-radius: 50px; font-size: 1.5rem; text-transform: uppercase; font-weight: 600; letter-spacing: 2px;}
.download-btn i{display: inline-block; margin-right: 5px;}


.button{--h-button:48px;--w-button:102px;--round:.75rem;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;transition:all .25s ease;background:radial-gradient(65.28% 65.28% at 50% 100%,#df71ffcc 0%,#df71ff00 100%),linear-gradient(0deg,#7a5af8,#7a5af8);border-radius:var(--round);border:none;outline:none;padding:25px 35px}
.button::before,.button::after{content:"";position:absolute;inset:var(--space);transition:all .5s ease-in-out;border-radius:calc(var(--round) - var(--space));z-index:0}
.button::before{--space:1px;background:linear-gradient(177.95deg,#ffffff30 0%,#fff0 100%)}
.button::after{--space:2px;background:radial-gradient(65.28% 65.28% at 50% 100%,#df71ffcc 0%,#df71ff00 100%),linear-gradient(0deg,#7a5af8,#7a5af8)}
.button:active{transform:scale(0.95)}
.fold{z-index:1;position:absolute;top:0;right:0;height:1rem;width:1rem;display:inline-block;transition:all .5s ease-in-out;background:radial-gradient(100% 75% at 55%,#df71ffcc 0%,#df71ff00 100%);box-shadow:0 0 3px #000;border-bottom-left-radius:.5rem;border-top-right-radius:var(--round)}
.fold::after{content:"";position:absolute;top:0;right:0;width:150%;height:150%;transform:rotate(45deg) translateX(0%) translateY(-18px);background-color:#e8e8e8;pointer-events:none}
.button:hover{transform: scale(1.05);}
.button:hover .fold{margin-top:-1rem;margin-right:-1rem}
.points_wrapper{overflow:hidden;width:100%;height:100%;pointer-events:none;position:absolute;z-index:1}
.points_wrapper .point{bottom:-10px;position:absolute;animation:floating-points infinite ease-in-out;pointer-events:none;width:2px;height:2px;background-color:#fff;border-radius:9999px}
@keyframes floating-points {
    0%{transform:translateY(0)}
    85%{opacity:0}
    100%{transform:translateY(-55px);opacity:0}
}
.points_wrapper .point:nth-child(1){left:10%;opacity:1;animation-duration:2.35s;animation-delay:.2s}
.points_wrapper .point:nth-child(2){left:30%;opacity:.7;animation-duration:2.5s;animation-delay:.5s}
.points_wrapper .point:nth-child(3){left:25%;opacity:.8;animation-duration:2.2s;animation-delay:.1s}
.points_wrapper .point:nth-child(4){left:44%;opacity:.6;animation-duration:2.05s}
.points_wrapper .point:nth-child(5){left:50%;opacity:1;animation-duration:1.9s}
.points_wrapper .point:nth-child(6){left:75%;opacity:.5;animation-duration:1.5s;animation-delay:1.5s}
.points_wrapper .point:nth-child(7){left:88%;opacity:.9;animation-duration:2.2s;animation-delay:.2s}
.points_wrapper .point:nth-child(8){left:58%;opacity:.8;animation-duration:2.25s;animation-delay:.2s}
.points_wrapper .point:nth-child(9){left:98%;opacity:.6;animation-duration:2.6s;animation-delay:.1s}
.points_wrapper .point:nth-child(10){left:65%;opacity:1;animation-duration:2.5s;animation-delay:.2s}
.inner{z-index:2;gap:6px;position:relative;width:100%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;text-transform: uppercase;font-weight:500;letter-spacing: 1px;transition:color .2s ease-in-out}
.inner svg.icon{width:25px;height:25px;transition:fill .1s linear; margin-right: 10px;}
.button:focus svg.icon{fill:#fff}
.button:hover svg.icon{fill:transparent;animation:dasharray 1s linear forwards,filled .1s linear forwards .95s}
@keyframes dasharray {
    from{stroke-dasharray:0 0 0 0}
    to{stroke-dasharray:68 68 0 0}
}
@keyframes filled {
    to{fill:#fff}
}


#download-steps{text-align: center; padding: 10px 0; color: #111;}
#download-steps .step{display: inline-block; margin-right: 5px; font-size: 1.2rem;}

.navbar{border-bottom: 1px solid #eaeaea; background: #f8f8f8;}
.navbar-brand img{height: 30px;}
.nav-link{padding: 5px 30px !important;}

#header{
    //background: url('https://www.adobe.com/products/media_1b89ac796c5c7b230cc7504a0fa8a8750a7f1b6fa.jpeg?width=2000&format=jpeg&optimize=medium') no-repeat;
    background: url('https://cc-prod.scene7.com/is/image/CCProdAuthor/DesktopBackground?$pjpeg$&jpegSize=300&wid=1920') no-repeat;
    background-size: cover;
    text-align: center;
    padding: 80px 0;
    margin-top: 60px;
}
#header .description{margin-bottom: 30px;}

.outstanding .item{margin-bottom: 10px;}
.outstanding .item:last-child{margin-bottom: 0;}
.outstanding .item i{color: #4CAF50; display: inline-block; margin-right: 5px;}

.block-title{text-align: center; font-size: 1.8rem; font-weight: 600; margin-bottom: 2rem;}
.block-caption{text-align: center; margin-bottom: 2rem;}

#product-category{text-align: center; margin-bottom: 40px;}
#product-category .item{display: inline-block; padding: 10px 20px; border-bottom: 4px solid transparent; cursor: pointer; color: var(--color-3);}
#product-category .item:hover{color:var(--color-2);}
#product-category .item.active{border-color: #333; color: var(--color-1);}

#app-list{background: #fafafa; padding: 60px 0;}
.list-product .item{text-align: center; background: #fff; border-radius: 16px; border: 1px solid #eaeaea; padding: 25px 15px; height: 300px; display: flex; flex-direction: column; justify-content: space-between; color: var(--color-1);}
.list-product .item:hover{border-color: #ccc;}
.list-product .item .title{margin: 15px 0 10px 0; font-size: 1.3rem;}
.list-product .item .description{color: var(--color-2); font-size: .8rem;}
.list-product .item .logo img{height: 60px;}

#features{
    background: url('https://www.adobe.com/cc-shared/fragments/cco/media_173e564a912ca88e9973aa3a6573dec3bd51af299.png?width=2000&format=webply&optimize=medium') no-repeat center center;
    background-size: 120%;
    padding: 80px 0 90px 0;
}
.feature-list .item{background: #fff; border-radius: 20px; padding: 40px 30px 30px 30px;}
.feature-list .item .title{font-size: 1.3rem; font-weight: 600; margin-bottom: 30px;}
.feature-list .item .line{margin-bottom: 25px; display: flex; align-items: center;}
.feature-list .item .icon{width: 32px; height: 32px; margin-right: 10px;}
.feature-list .item .text{font-size: .8rem; color: var(--color-2);}

#faq{padding: 70px 0;}
#faq .accordion{border-bottom: 1px solid rgba(0,0,0,0.3);}
#faq .accordion-item{border: 0; background: transparent;}
#faq .accordion-item .accordion-header{font-weight: 500; color: #111;}
#faq .accordion-item .accordion-header .number{display: inline-block; width: 50px;}
#faq .accordion-item .accordion-button{font-size: 1rem; background: transparent; font-weight: 600; border-top: 1px solid rgba(0,0,0,0.3); border-radius: 0; padding: 30px 0;}
#faq .accordion-item .accordion-button:not(.collapsed){color: var(--bs-primary); box-shadow: none;}
#faq .accordion-body{padding: 0 0 30px 0; color: rgba(0,0,0,0.7); font-size: .9rem;}
#faq .table{font-size: .9rem;}

#slogan{text-align: center;}
#slogan .bg-top{
    background: url('https://cc-prod.scene7.com/is/image/CCProdAuthor/cc-gradient-strip-desktop?$png$&jpegSize=300&wid=1440') no-repeat center center;
    background-size: cover;
    display: block;
    height: 10px;
    margin-bottom: 100px;
}
#slogan .bg-bottom{
    background: url('https://cc-prod.scene7.com/is/image/CCProdAuthor/rainbow-desktop@2x?wid=1920') no-repeat center center;
    background-size: cover;
    display: block;
    height: 10px;
    margin-top: 100px;
}
#slogan .logo img{height: 100px;}
#slogan .slogan{margin-top: 20px;}

#footer{background: #fafafa; padding: 50px 0;}
.footer-menu{display: flex; justify-content: space-between;}
.footer-menu .item .title{color: #505050; font-size: 1.1rem; font-weight: 500; margin-bottom: 20px;}
.links li a{color: #292929; font-size: .8rem; margin-bottom: 15px; display: block;}

.socials{border: 1px solid #999; border-left: 0; border-right: 0; padding: 12px 0; margin: 20px 0; text-align: center}
.socials a{color: var(--color-2); font-size: 1.3rem; margin: 0 10px;}
.copyright-text{font-size: .9rem;}
.copyright-text a{color: #292929;}