/*==================================================
    CLIENTS PAGE
==================================================*/

.dr1064clients{
    position:relative;
    overflow:hidden;
    background:
    radial-gradient(circle at top right,#00c8ff15 0%,transparent 35%),
    radial-gradient(circle at bottom left,#008cff15 0%,transparent 35%),
    linear-gradient(180deg,#071423 0%,#091b31 45%,#06101d 100%);
    color:#fff;
}

/*========================================
 HERO
========================================*/

.dr1064clientsHero{
    position:relative;
    min-height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.dr1064clientsHeroImage{
    position:absolute;
    inset:0;
}

.dr1064clientsHeroImage img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.08);
    animation:dr1064HeroZoom 18s linear infinite alternate;
}

.dr1064clientsHeroOverlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(135deg,
    rgba(3,14,27,.92),
    rgba(5,36,69,.72),
    rgba(3,14,27,.95));
}

.dr1064clientsHeroContent{
    position:relative;
    z-index:5;
    max-width:900px;
    text-align:center;
    padding:120px 24px;
}

.dr1064eyebrow{
    display:inline-block;
    margin-bottom:20px;
    padding:10px 24px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(18px);
    font-size:.9rem;
    letter-spacing:2px;
    text-transform:uppercase;
}

.dr1064clientsHeroContent h1{
    font-size:clamp(2.7rem,6vw,5rem);
    line-height:1.1;
    font-weight:800;
    margin-bottom:25px;
}

.dr1064clientsHeroContent p{
    max-width:760px;
    margin:auto;
    color:#d7e6f7;
    font-size:1.1rem;
    line-height:1.9;
}

/*========================================
COMMON
========================================*/

.dr1064clients section{
    width:min(1320px,92%);
    margin:auto;
    padding:100px 0;
}

.dr1064clients h2{
    font-size:clamp(2rem,3vw,3rem);
    margin-bottom:22px;
    text-align:center;
}

.dr1064clients p{
    color:#c7d6e8;
    line-height:1.9;
}

/*========================================
INTRO
========================================*/

.dr1064clientsIntro{
    text-align:center;
    max-width:900px;
}

/*========================================
INDUSTRIES
========================================*/

.dr1064industryGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:28px;
    margin-top:70px;
}

.dr1064industryCard{
    position:relative;
    padding:45px 30px;
    border-radius:28px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    transition:.45s;
    overflow:hidden;
}

.dr1064industryCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(145deg,
    rgba(255,255,255,.14),
    transparent 60%);
    opacity:0;
    transition:.45s;
}

.dr1064industryCard:hover{
    transform:translateY(-10px);
    border-color:#17d6ff;
    box-shadow:0 25px 70px rgba(0,180,255,.25);
}

.dr1064industryCard:hover::before{
    opacity:1;
}

.dr1064industryCard i{
    font-size:2.8rem;
    color:#18d7ff;
    margin-bottom:25px;
}

.dr1064industryCard h3{
    font-size:1.3rem;
}

/*========================================
LOGOS
========================================*/

.dr1064logoGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:30px;
    margin-top:60px;
}

.dr1064logoCard{
    height:140px;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(16px);
    color:#c8d7e9;
    font-weight:600;
    transition:.45s;
    position:relative;
    overflow:hidden;
}

.dr1064logoCard::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-40%;
    width:60%;
    height:300%;
    background:rgba(255,255,255,.18);
    transform:rotate(25deg);
}

.dr1064logoCard:hover::before{
    animation:dr1064Shine .9s linear;
}

.dr1064logoCard:hover{
    transform:translateY(-8px);
    border-color:#20d9ff;
    box-shadow:0 20px 60px rgba(0,170,255,.25);
}

/*========================================
WHY US
========================================*/

.dr1064trustGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:35px;
    margin-top:70px;
}

.dr1064trustGrid article{
    padding:45px;
    border-radius:28px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(16px);
    transition:.45s;
}

.dr1064trustGrid article:hover{
    transform:translateY(-8px);
}

.dr1064trustGrid i{
    font-size:3rem;
    color:#1fd7ff;
    margin-bottom:25px;
}

.dr1064trustGrid h3{
    margin-bottom:18px;
}

/*========================================
TIMELINE
========================================*/

.dr1064deliveryFlow ol{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:35px;
    margin-top:60px;
    counter-reset:flow;
}

.dr1064deliveryFlow li{
    list-style:none;
    position:relative;
    padding:35px 25px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    text-align:center;
    border:1px solid rgba(255,255,255,.1);
}

.dr1064deliveryFlow li::before{
    counter-increment:flow;
    content:counter(flow);
    width:55px;
    height:55px;
    border-radius:50%;
    background:#16d6ff;
    color:#071423;
    font-weight:700;
    display:grid;
    place-items:center;
    margin:0 auto 20px;
}

/*========================================
STATS
========================================*/

.dr1064clientStats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:30px;
}

.dr1064clientStats article{
    padding:45px;
    border-radius:28px;
    background:rgba(255,255,255,.05);
    text-align:center;
    border:1px solid rgba(255,255,255,.12);
}

.dr1064clientStats h3{
    font-size:3rem;
    color:#18d8ff;
    margin-bottom:15px;
}

/*========================================
CTA
========================================*/

.dr1064clientsCTA{
    text-align:center;
    padding-bottom:120px!important;
}

.dr1064ctaButtons{
    margin-top:45px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
}

.dr1064primaryBtn,
.dr1064secondaryBtn{
    padding:18px 38px;
    border-radius:60px;
    text-decoration:none;
    font-weight:700;
    transition:.35s;
}

.dr1064primaryBtn{
    background:#18d7ff;
    color:#04101d;
}

.dr1064primaryBtn:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(24,215,255,.45);
}

.dr1064secondaryBtn{
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
}

.dr1064secondaryBtn:hover{
    background:rgba(255,255,255,.08);
}

/*========================================
ANIMATIONS
========================================*/

@keyframes dr1064HeroZoom{

from{transform:scale(1.08);}
to{transform:scale(1.18);}

}

@keyframes dr1064Shine{

0%{left:-80%;}
100%{left:180%;}

}

/*========================================
RESPONSIVE
========================================*/

@media(max-width:768px){

.dr1064clients section{
    padding:70px 0;
}

.dr1064clientsHero{
    min-height:75vh;
}

.dr1064clientsHeroContent{
    padding:100px 20px;
}

.dr1064ctaButtons{
    flex-direction:column;
}

.dr1064primaryBtn,
.dr1064secondaryBtn{
    width:100%;
    text-align:center;
}

}