/* =====================================================
   PrintQly CSS v2.0
   File : cards.css
   Part : 3A
   Purpose : Base Card System
===================================================== */

/* ==========================================
   COMMON CARD
========================================== */

.card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:.3s ease;
}

.card:hover{
    border-color:var(--primary);
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,.35);
}

.card-header{
    padding:24px;
    border-bottom:1px solid var(--border-color);
}

.card-title{
    font-size:1.4rem;
    font-weight:700;
    color:var(--white);
    margin-bottom:8px;
}

.card-subtitle{
    color:var(--text-light);
    font-size:.95rem;
    line-height:1.6;
}

.card-body{
    padding:24px;
    flex:1;
}

.card-footer{
    padding:20px 24px;
    border-top:1px solid var(--border-color);
}


/* ==========================================
   CARD GRID
========================================== */

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.card-grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.card-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.card-grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}


/* ==========================================
   FEATURE CARD
========================================== */

.feature-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:35px;
    transition:.3s ease;
}

.feature-card:hover{
    border-color:var(--primary);
    transform:translateY(-6px);
}

.feature-icon{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:rgba(255,204,0,.12);
    margin-bottom:20px;
}

.feature-icon img{
    width:36px;
    height:36px;
}

.feature-title{
    font-size:1.35rem;
    font-weight:700;
    color:var(--white);
    margin-bottom:12px;
}

.feature-text{
    color:var(--text-light);
    line-height:1.8;
}


/* ==========================================
   SERVICE CARD
========================================== */

.service-card{
    display:flex;
    flex-direction:column;
    background:var(--card-bg);
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--border-color);
    transition:.3s ease;
}

.service-card:hover{
    border-color:var(--primary);
    transform:translateY(-6px);
}

.service-image{
    width:100%;
    height:220px;
    overflow:hidden;
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.service-card:hover .service-image img{
    transform:scale(1.08);
}

.service-content{
    padding:24px;
}

.service-title{
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:10px;
    color:var(--white);
}

.service-text{
    color:var(--text-light);
    line-height:1.8;
}


/* ==========================================
   INFO CARD
========================================== */

.info-card{
    padding:30px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.info-card h3{
    color:var(--white);
    margin-bottom:15px;
}

.info-card p{
    color:var(--text-light);
    line-height:1.8;
}


/* ==========================================
   SIMPLE STAT CARD
========================================== */

.stat-card{
    background:var(--card-bg);
    border-radius:var(--radius-lg);
    border:1px solid var(--border-color);
    padding:30px;
    text-align:center;
}

.stat-number{
    font-size:2.4rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:10px;
}

.stat-label{
    color:var(--text-light);
    font-size:.95rem;
}

/* =====================================================
   SHOP CARD
===================================================== */

.shop-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:.3s ease;
}

.shop-card:hover{
    border-color:var(--primary);
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.shop-image{
    width:100%;
    height:220px;
    overflow:hidden;
}

.shop-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.shop-card:hover .shop-image img{
    transform:scale(1.08);
}

.shop-content{
    padding:24px;
}

.shop-name{
    font-size:1.35rem;
    font-weight:700;
    color:var(--white);
    margin-bottom:8px;
}

.shop-address{
    color:var(--text-light);
    line-height:1.7;
    margin-bottom:18px;
}

.shop-rating{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:15px;
    color:var(--primary);
    font-weight:600;
}

.shop-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--border-color);
}

.shop-status{
    color:#38d26f;
    font-weight:600;
}

.shop-distance{
    color:var(--text-light);
    font-size:.9rem;
}


/* =====================================================
   PARTNER CARD
===================================================== */

.partner-card{
    display:flex;
    align-items:center;
    gap:20px;
    padding:24px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    transition:.3s ease;
}

.partner-card:hover{
    border-color:var(--primary);
}

.partner-logo{
    width:80px;
    height:80px;
    border-radius:16px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.partner-logo img{
    max-width:70%;
    max-height:70%;
}

.partner-details{
    flex:1;
}

.partner-name{
    font-size:1.2rem;
    font-weight:700;
    color:var(--white);
    margin-bottom:6px;
}

.partner-location{
    color:var(--text-light);
    margin-bottom:8px;
}

.partner-description{
    color:var(--text-light);
    line-height:1.7;
}


/* =====================================================
   CATEGORY CARD
===================================================== */

.category-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:22px;
    padding:30px;
    text-align:center;
    transition:.3s ease;
}

.category-card:hover{
    border-color:var(--primary);
    transform:translateY(-5px);
}

.category-icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    border-radius:50%;
    background:rgba(255,204,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
}

.category-icon img{
    width:40px;
    height:40px;
}

.category-title{
    color:var(--white);
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:10px;
}

.category-text{
    color:var(--text-light);
    line-height:1.7;
}


/* =====================================================
   BUSINESS CARD
===================================================== */

.business-card{
    display:flex;
    gap:24px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.business-image{
    width:260px;
    flex-shrink:0;
}

.business-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.business-content{
    flex:1;
    padding:28px;
}

.business-title{
    font-size:1.4rem;
    font-weight:700;
    color:var(--white);
    margin-bottom:12px;
}

.business-text{
    color:var(--text-light);
    line-height:1.8;
    margin-bottom:20px;
}

.business-list{
    list-style:none;
    padding:0;
    margin:0;
}

.business-list li{
    color:var(--text-light);
    margin-bottom:12px;
    padding-left:24px;
    position:relative;
}

.business-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--primary);
    font-weight:700;
}


/* =====================================================
   DELIVERY CARD
===================================================== */

.delivery-card{
    background:linear-gradient(135deg,#232323,#161616);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:32px;
}

.delivery-title{
    color:var(--white);
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:16px;
}

.delivery-text{
    color:var(--text-light);
    line-height:1.8;
    margin-bottom:22px;
}

.delivery-info{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:18px;
    border-top:1px solid var(--border-color);
}

.delivery-time{
    color:var(--primary);
    font-weight:700;
}

.delivery-price{
    color:#38d26f;
    font-weight:700;
}

/* =====================================================
   PRICING CARD
===================================================== */

.pricing-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:40px 32px;
    transition:.3s ease;
    overflow:hidden;
}

.pricing-card:hover{
    border-color:var(--primary);
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.pricing-card.featured{
    border:2px solid var(--primary);
}

.pricing-badge{
    position:absolute;
    top:20px;
    right:-35px;
    width:140px;
    padding:8px 0;
    text-align:center;
    background:var(--primary);
    color:#000;
    font-weight:700;
    transform:rotate(45deg);
}

.pricing-title{
    font-size:1.5rem;
    font-weight:700;
    color:var(--white);
    margin-bottom:12px;
}

.pricing-price{
    font-size:3rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:6px;
}

.pricing-duration{
    color:var(--text-light);
    margin-bottom:30px;
}

.pricing-features{
    list-style:none;
    margin:0;
    padding:0;
    flex:1;
}

.pricing-features li{
    padding:12px 0;
    color:var(--text-light);
    border-bottom:1px solid var(--border-color);
}

.pricing-features li:last-child{
    border-bottom:none;
}


/* =====================================================
   DASHBOARD CARD
===================================================== */

.dashboard-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:28px;
}

.dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.dashboard-title{
    font-size:1.2rem;
    font-weight:700;
    color:var(--white);
}

.dashboard-value{
    font-size:2.6rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:10px;
}

.dashboard-label{
    color:var(--text-light);
}

.dashboard-change{
    display:inline-flex;
    align-items:center;
    margin-top:18px;
    padding:6px 12px;
    border-radius:30px;
    font-size:.85rem;
    font-weight:600;
}

.dashboard-change.up{
    color:#2ecc71;
    background:rgba(46,204,113,.12);
}

.dashboard-change.down{
    color:#ff5b5b;
    background:rgba(255,91,91,.12);
}


/* =====================================================
   ANALYTICS CARD
===================================================== */

.analytics-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:30px;
}

.analytics-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.analytics-title{
    color:var(--white);
    font-size:1.3rem;
    font-weight:700;
}

.analytics-value{
    font-size:2.4rem;
    font-weight:800;
    color:var(--primary);
}

.analytics-chart{
    width:100%;
    height:220px;
    border-radius:16px;
    background:#181818;
}


/* =====================================================
   STATISTICS CARD
===================================================== */

.statistics-card{
    display:flex;
    align-items:center;
    gap:20px;
    padding:28px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.statistics-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:rgba(255,204,0,.10);
    display:flex;
    align-items:center;
    justify-content:center;
}

.statistics-icon img{
    width:34px;
    height:34px;
}

.statistics-content{
    flex:1;
}

.statistics-number{
    font-size:2rem;
    font-weight:800;
    color:var(--white);
}

.statistics-text{
    margin-top:6px;
    color:var(--text-light);
}


/* =====================================================
   SUMMARY CARD
===================================================== */

.summary-card{
    padding:28px;
    background:linear-gradient(135deg,#242424,#171717);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.summary-title{
    font-size:1.3rem;
    font-weight:700;
    color:var(--white);
    margin-bottom:18px;
}

.summary-list{
    list-style:none;
    margin:0;
    padding:0;
}

.summary-list li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid var(--border-color);
    color:var(--text-light);
}

.summary-list li:last-child{
    border-bottom:none;
}

.summary-value{
    color:var(--primary);
    font-weight:700;
}

/* =====================================================
   PRINTQLY CSS v2.0
   File : cards.css
   Part : 3D
   Purpose : Orders, Reviews, Profile & Skeleton Cards
===================================================== */


/* =====================================================
   ORDER CARD
===================================================== */

.order-card{

background:var(--card-bg);

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

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

padding:28px;

transition:.3s ease;

}

.order-card:hover{

border-color:var(--primary);

transform:translateY(-4px);

}

.order-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.order-id{

font-size:18px;

font-weight:700;

color:var(--white);

}

.order-status{

padding:8px 18px;

border-radius:40px;

font-size:13px;

font-weight:700;

}

.status-pending{

background:#FF980020;

color:#FFB300;

}

.status-processing{

background:#2196F320;

color:#42A5F5;

}

.status-completed{

background:#4CAF5020;

color:#4CAF50;

}

.status-cancelled{

background:#F4433620;

color:#EF5350;

}

.order-body{

display:flex;

justify-content:space-between;

margin-top:15px;

}

.order-info{

display:flex;

flex-direction:column;

gap:10px;

color:var(--text-light);

}


/* =====================================================
   REVIEW CARD
===================================================== */

.review-card{

background:var(--card-bg);

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

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

padding:30px;

}

.review-header{

display:flex;

align-items:center;

gap:18px;

margin-bottom:18px;

}

.review-avatar{

width:60px;

height:60px;

border-radius:50%;

overflow:hidden;

}

.review-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.review-name{

font-size:18px;

font-weight:700;

color:var(--white);

}

.review-stars{

margin-top:5px;

color:#FFD400;

}

.review-text{

margin-top:18px;

line-height:1.8;

color:var(--text-light);

}


/* =====================================================
   PROFILE CARD
===================================================== */

.profile-card{

background:var(--card-bg);

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

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

padding:35px;

text-align:center;

}

.profile-image{

width:120px;

height:120px;

border-radius:50%;

overflow:hidden;

margin:auto;

margin-bottom:20px;

}

.profile-image img{

width:100%;

height:100%;

object-fit:cover;

}

.profile-name{

font-size:24px;

font-weight:700;

color:var(--white);

margin-bottom:10px;

}

.profile-role{

color:var(--primary);

margin-bottom:18px;

}

.profile-description{

color:var(--text-light);

line-height:1.8;

}


/* =====================================================
   NOTIFICATION CARD
===================================================== */

.notification-card{

display:flex;

gap:20px;

padding:24px;

background:var(--card-bg);

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

border-left:5px solid var(--primary);

}

.notification-icon{

font-size:32px;

color:var(--primary);

}

.notification-content{

flex:1;

}

.notification-title{

font-weight:700;

margin-bottom:8px;

color:var(--white);

}

.notification-text{

color:var(--text-light);

line-height:1.7;

}


/* =====================================================
   EMPTY CARD
===================================================== */

.empty-card{

text-align:center;

padding:70px 30px;

background:var(--card-bg);

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

border:2px dashed var(--border-color);

}

.empty-card img{

width:150px;

margin:auto;

margin-bottom:25px;

}

.empty-card h3{

margin-bottom:12px;

}

.empty-card p{

color:var(--text-light);

}


/* =====================================================
   SKELETON CARD
===================================================== */

.skeleton-card{

background:var(--card-bg);

padding:28px;

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

}

.skeleton{

height:18px;

border-radius:10px;

background:linear-gradient(
90deg,
#1b1b1b,
#2d2d2d,
#1b1b1b
);

background-size:300%;

animation:skeleton-loading 1.2s infinite;

margin-bottom:15px;

}

.skeleton.title{

width:60%;

height:26px;

}

.skeleton.text{

width:100%;

}

.skeleton.small{

width:40%;

}

@keyframes skeleton-loading{

0%{

background-position:100%;

}

100%{

background-position:-100%;

}

}


/* =====================================================
   CARD HELPERS
===================================================== */

.card-center{

text-align:center;

}

.card-shadow{

box-shadow:0 20px 45px rgba(0,0,0,.30);

}

.card-border{

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

}

.card-rounded{

border-radius:30px;

}

/* =====================================================
   END OF cards.css
===================================================== */


/*==================================================
PRINTQLY VAULT TOOLBAR
==================================================*/

.vault-toolbar{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;

    margin:20px 0 25px;

}

.vault-tool{

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#181818;

    border:1px solid #2d2d2d;

    border-radius:14px;

    color:#ffffff;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

    text-decoration:none;

}

.vault-tool:hover{

    border:1px solid #ffffff;

    transform:translateY(-3px);

    box-shadow:0 0 18px rgba(255,255,255,.18);

}

.vault-tool.active{

    border:2px solid #ffffff;

    background:#242424;

    box-shadow:0 0 18px rgba(255,255,255,.30);

}

.vault-tool i{

    pointer-events:none;

}

.vault-tool.danger:hover{

    border-color:#ff4040;

    color:#ff4040;

    box-shadow:0 0 18px rgba(255,64,64,.35);

}

/* Hide checkbox */

#selectAll{

    display:none;

}

/* Search Box */

#searchBoxArea{

    margin-top:15px;

    margin-bottom:25px;

}

#searchDocuments{

    height:52px;

    background:#161616;

    border:1px solid #2e2e2e;

    border-radius:14px;

    color:#fff;

}

#searchDocuments:focus{

    border:1px solid #ffffff;

    box-shadow:0 0 15px rgba(255,255,255,.15);

    background:#161616;

    color:#fff;

}

/* Mobile */

@media(max-width:768px){

.vault-toolbar{

justify-content:center;

gap:10px;

}

.vault-tool{

width:48px;

height:48px;

font-size:18px;

}

}

/* Desktop */

@media(min-width:992px){

.vault-toolbar{

justify-content:flex-start;

}

}

/* ===========================
   PrintQly Vault Document Card
=========================== */

.row > [class*="col-"]{
    margin-bottom:24px;
}

.card{
    background:#111 !important;
    border:2px solid rgba(255,255,255,.12) !important;
    border-radius:20px !important;
    box-shadow:0 8px 25px rgba(0,0,0,.45);
    transition:.3s ease;
    overflow:hidden;
}

.card:hover{
    transform:translateY(-4px);
    border-color:#ffffff;
    box-shadow:0 0 25px rgba(255,255,255,.12);
}

.card-body{
    padding:22px 24px !important;
}

.document-check{
    transform:scale(1.2);
    margin-right:12px;
}

.card h5{
    font-size:28px;
    font-weight:700;
    color:#fff;
    margin-bottom:18px;
}

.card p{
    color:#bdbdbd;
    font-size:15px;
    line-height:1.8;
    margin-bottom:8px;
}

.doc-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
    margin-top:16px;
}

.doc-actions .action-btn{
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:#1b1b1b;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:.25s;
}

.doc-actions .action-btn:hover{
    background:#FFD400;
    color:#000;
    transform:translateY(-3px);
}

.doc-meta{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:10px;
    margin:6px 0;
    font-size:14px;
    color:#d8d8d8;
    white-space:nowrap;
}

.doc-meta span{
    display:flex;
    align-items:center;
    gap:4px;
}

.doc-meta i{
    font-size:13px;
}

.doc-date{
    margin:0 0 14px;
    font-size:13px;
    color:#9d9d9d;
}

.doc-date i{
    margin-right:6px;
}

@media (max-width:768px){

.card{
    margin:0 12px 20px;
    border-radius:22px;
}

.card-body{
    padding:28px 24px 24px !important;
}

.card h5{
    font-size:20px;
    margin-bottom:18px;
    line-height:1.25;
}

.doc-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin:10px 0;
    white-space:nowrap;
    font-size:13px;
}

.doc-actions{
    justify-content:space-between;
    margin-top:20px;
    gap:8px;
}

.doc-actions .action-btn{
    width:42px;
    height:42px;
}

}

.shop-card{
    background:#161616;
    border:1px solid #2c2c2c;
    border-radius:18px;
    padding:25px;
    margin:25px 0;
}

.shop-card h3{
    margin-bottom:18px;
}

.shop-card p{
    margin:12px 0;
    line-height:1.7;
}

.shop-actions{
    display:flex;
    gap:15px;
    margin-top:25px;
    flex-wrap:wrap;
}

.shop-actions .btn{
    flex:1;
    text-align:center;
    padding:14px 18px;
    border-radius:12px;
    font-weight:700;
    text-decoration:none;
}

.btn-secondary{
    background:#2b2b2b;
    color:#ffffff;
    border:1px solid #555;
}

.btn-secondary:hover{
    background:#3b3b3b;
}

.btn-primary{
    background:#ffcc00;
    color:#000;
}

.shop-search-header{

margin:35px 0;

}

.shop-search-header h2{

font-size:32px;
color:#FFD400;
margin-bottom:10px;

}

.shop-search-header p{

color:#bbbbbb;
margin-bottom:25px;

}

.shop-filter-box{

background:#151515;

border:1px solid #2b2b2b;

padding:25px;

border-radius:18px;

margin-bottom:35px;

}

.shop-filter-box input{

margin-bottom:15px;

}

.or-divider{

text-align:center;

font-weight:700;

color:#FFD400;

margin:15px 0;

}

#filteredResult{

margin:20px 0;

font-size:18px;

font-weight:700;

color:#FFD400;

}

.shop-photo{

width:100%;

height:220px;

object-fit:cover;

border-radius:16px;

margin-bottom:20px;

}

.shop-buttons{

display:flex;

gap:15px;

margin-top:25px;

flex-wrap:wrap;

}

.shop-buttons .btn{

flex:1;

min-width:180px;

text-align:center;

}


/*=========================================================
  PARTNER LANDING PAGE CARDS
  Add at END of cards.css
=========================================================*/


/* Hero Card */

.hero-card{

background:linear-gradient(135deg,#171717,#101010);

border:1px solid rgba(255,212,0,.18);

border-radius:30px;

padding:70px 60px;

text-align:center;

overflow:hidden;

position:relative;

box-shadow:0 25px 60px rgba(0,0,0,.45);

}


.hero-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:260px;

height:260px;

border-radius:50%;

background:rgba(255,212,0,.08);

}


.hero-card::after{

content:"";

position:absolute;

bottom:-100px;

left:-100px;

width:220px;

height:220px;

border-radius:50%;

background:rgba(255,212,0,.05);

}


.hero-card h1{

font-size:68px;

font-weight:800;

line-height:1.08;

margin-bottom:25px;

}


.hero-card p{

max-width:900px;

margin:auto;

font-size:22px;

line-height:1.9;

color:#bdbdbd;

}



/*=========================================================*/


.business-card{

background:#161616;

border:1px solid #2b2b2b;

border-left:6px solid #FFD400;

padding:40px;

border-radius:24px;

transition:.35s;

margin-bottom:30px;

}


.business-card:hover{

transform:translateY(-8px);

border-color:#FFD400;

box-shadow:0 20px 55px rgba(255,212,0,.12);

}


.business-card h2{

font-size:46px;

margin-bottom:20px;

}


.business-card p{

line-height:2;

font-size:17px;

}



/*=========================================================*/


.highlight-card{

background:linear-gradient(135deg,#FFD400,#FFCA00);

color:#111;

padding:40px;

border-radius:24px;

margin:40px 0;

box-shadow:0 20px 50px rgba(255,212,0,.30);

}


.highlight-card h2{

color:#111;

font-size:42px;

margin-bottom:20px;

}


.highlight-card p{

color:#222;

font-size:18px;

line-height:1.9;

}



/*=========================================================*/


.quote-card{

background:#1a1a1a;

border-left:6px solid #FFD400;

padding:35px;

border-radius:20px;

margin:35px 0;

font-style:italic;

}


.quote-card p{

font-size:20px;

line-height:2;

color:#fff;

margin:0;

}



/*=========================================================*/


.icon-card{

background:#181818;

border:1px solid #2c2c2c;

border-radius:22px;

padding:35px;

text-align:center;

transition:.35s;

height:100%;

}


.icon-card:hover{

border-color:#FFD400;

transform:translateY(-6px);

}


.icon-card .icon{

font-size:52px;

margin-bottom:20px;

}


.icon-card h3{

font-size:28px;

margin-bottom:15px;

}


.icon-card p{

color:#bdbdbd;

line-height:1.8;

}



/*=========================================================*/


.stats-card{

background:#111;

border:1px solid #292929;

border-radius:22px;

padding:40px;

text-align:center;

transition:.35s;

}


.stats-card:hover{

border-color:#FFD400;

transform:translateY(-5px);

}


.stats-number{

font-size:54px;

font-weight:800;

color:#FFD400;

margin-bottom:12px;

}


.stats-title{

font-size:20px;

font-weight:700;

margin-bottom:10px;

}


.stats-text{

color:#a9a9a9;

line-height:1.8;

}



/*=========================================================*/


.cta-card{

background:linear-gradient(135deg,#FFD400,#F6C600);

padding:70px;

border-radius:28px;

text-align:center;

color:#111;

box-shadow:0 30px 70px rgba(255,212,0,.25);

}


.cta-card h2{

font-size:52px;

color:#111;

margin-bottom:20px;

}


.cta-card p{

font-size:20px;

line-height:1.9;

max-width:900px;

margin:auto;

color:#222;

}



/*=========================================================*/


.compare-card{

background:#151515;

border:1px solid #2c2c2c;

border-radius:24px;

overflow:hidden;

margin:40px 0;

}


.compare-header{

background:#FFD400;

padding:20px;

font-size:24px;

font-weight:700;

color:#111;

}


.compare-body{

padding:35px;

}


.compare-row{

display:flex;

justify-content:space-between;

padding:18px 0;

border-bottom:1px solid #2c2c2c;

}


.compare-row:last-child{

border:none;

}



/*=========================================================*/


.glow-card:hover{

box-shadow:

0 0 20px rgba(255,212,0,.15),

0 0 45px rgba(255,212,0,.10);

}


/*==========================================================
  SERVICES PAGE COMPONENTS
==========================================================*/

/* Hero Card */

.service-hero-card{
    background:linear-gradient(135deg,#FFD400 0%,#FFC107 100%);
    color:#111;
    border-radius:30px;
    padding:70px 50px;
    text-align:center;
    margin-bottom:80px;
    box-shadow:0 30px 70px rgba(255,212,0,.18);
}

.service-hero-card h1{
    color:#111;
    font-size:58px;
    font-weight:800;
    margin-bottom:20px;
}

.service-hero-card p{
    color:#222;
    font-size:20px;
    max-width:850px;
    margin:0 auto;
    line-height:1.9;
}


/* Section Header */

.service-section-header{
    text-align:center;
    max-width:850px;
    margin:0 auto 70px;
}

.service-section-header h2{
    font-size:48px;
    margin-bottom:18px;
}

.service-section-header p{
    color:#bdbdbd;
    font-size:18px;
}


/* Printing Category Card */

.print-category-card{
    background:#131313;
    border:1px solid #252525;
    border-radius:26px;
    padding:35px;
    transition:.35s;
    text-align:left;
    height:100%;
}

.print-category-card:hover{
    border-color:#FFD400;
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}

.print-category-icon{
    width:82px;
    height:82px;
    margin-bottom:25px;
    border-radius:50%;
    background:rgba(255,212,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.print-category-card h3{
    margin-bottom:18px;
    font-size:28px;
}

.print-category-card ul{
    margin:0;
    padding:0;
}

.print-category-card li{
    color:#bdbdbd;
    margin-bottom:12px;
    line-height:1.8;
}


/* Highlight Card */

.highlight-card{
    background:#151515;
    border:1px solid #252525;
    border-radius:24px;
    padding:45px;
    text-align:center;
    transition:.35s;
}

.highlight-card:hover{
    border-color:#FFD400;
    transform:translateY(-8px);
}

.highlight-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    background:rgba(255,212,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
}

.highlight-card h3{
    margin-bottom:18px;
}

.highlight-card p{
    color:#bdbdbd;
}


/* Service CTA */

.service-cta-card{
    background:#FFD400;
    color:#111;
    border-radius:30px;
    padding:60px;
    text-align:center;
    margin-top:80px;
    box-shadow:0 25px 60px rgba(255,212,0,.22);
}

.service-cta-card h2{
    color:#111;
    margin-bottom:20px;
}

.service-cta-card p{
    color:#333;
    max-width:760px;
    margin:0 auto 35px;
    line-height:1.9;
}