/* ==========================================================
   深圳市显科科技有限公司
   官网 V2.0
   Components.css

   公共组件
   Button
   Card
   Title
   Badge
   Animation
========================================================== */



/* ==========================================================
   Button
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:180px;

    height:52px;

    padding:0 32px;

    border-radius:var(--radius-md);

    border:1px solid transparent;

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    transition:all .25s ease;

    white-space:nowrap;

    letter-spacing:.5px;

}



.btn:hover{

    transform:translateY(-1px);

}



.btn--primary{

    background:var(--primary);

    color:#fff;

    box-shadow:0 4px 16px rgba(10,93,166,.22);

}



.btn--primary:hover{

    background:var(--primary-hover);

}



.btn--white{

    background:#fff;

    color:var(--primary);

}



.btn--white:hover{

    background:#f5f7fb;

}



.btn--outline{

    border:1px solid var(--primary);

    color:var(--primary);

    background:transparent;

}



.btn--outline:hover{

    background:var(--primary);

    color:#fff;

}



/* ==========================================================
   Card
========================================================== */

.card{

    background:#fff;

    border-radius:var(--radius-lg);

    border:1px solid #e5e7ea;

    overflow:hidden;

    transition:.35s;

}



.card:hover{

    border-color:#c5c9d2;

}



.card__image{

    overflow:hidden;

}



.card__image img{

    transition:.5s;

}



.card:hover .card__image img{

    transform:scale(1.08);

}



.card__content{

    padding:32px;

}



.card__title{

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

    color:var(--text-primary);

}



.card__desc{

    color:var(--text-secondary);

    line-height:1.9;

}



/* ==========================================================
   Section Title
========================================================== */

.title{

    font-size:clamp(34px,3vw,52px);

    font-weight:700;

    line-height:1.2;

}



.subtitle{

    font-size:18px;

    color:var(--text-secondary);

    line-height:1.9;

}



/* ==========================================================
   Badge
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:34px;

    padding:0 16px;

    border-radius:999px;

    background:rgba(26,58,92,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:600;

}



/* ==========================================================
   Glass
========================================================== */

.glass{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}



/* ==========================================================
   Hover Underline
========================================================== */

.link{

    position:relative;

}



.link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}



.link:hover::after{

    width:100%;

}



/* ==========================================================
   Arrow
========================================================== */

.arrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

}



.arrow svg{

    transition:.35s;

}



.arrow:hover svg{

    transform:translateX(6px);

}



/* ==========================================================
   Image Zoom
========================================================== */

.zoom{

    overflow:hidden;

}



.zoom img{

    transition:.5s;

}



.zoom:hover img{

    transform:scale(1.08);

}






/* ==========================================================
   Delay
========================================================== */

.delay-1{

    transition-delay:.1s;

}



.delay-2{

    transition-delay:.2s;

}



.delay-3{

    transition-delay:.3s;

}



.delay-4{

    transition-delay:.4s;

}



/* ==========================================================
   Shadow Hover
========================================================== */

.hover-shadow{

    transition:.35s;

}



.hover-shadow:hover{

    box-shadow:var(--shadow-lg);

}



/* ==========================================================
   Gradient Text
========================================================== */

.gradient-text{

    background:linear-gradient(90deg,#1a3a5c,#39A8FF);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/* ==========================================================
   Divider
========================================================== */

.divider{

    width:80px;

    height:4px;

    margin:24px auto;

    border-radius:999px;

    background:var(--primary);

}



/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .btn{

        width:100%;

        min-width:auto;

    }

    .card__content{

        padding:24px;

    }

    .card__title{

        font-size:22px;

    }

}