/*==================================================
PAD PRINTS & DESIGNS
COMPONENTS.CSS
==================================================*/

/*==================================
SERVICE CARDS
==================================*/

/*==================================
SERVICES SHOWCASE
==================================*/

.services-showcase{

    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:35px;

}

.service-feature{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    min-height:620px;

}

.service-feature img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.service-feature-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:45px;

    color:#fff;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.15)
    );

}

.service-feature-content span{

    color:#FFD36A;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}

.service-feature-content h3{

    font-size:2.4rem;

    margin-bottom:18px;

}

.service-feature-content p{

    margin-bottom:30px;

    max-width:520px;

}

.service-list{

    display:grid;

    gap:25px;

}

.mini-service{

    display:flex;

    gap:22px;

    align-items:flex-start;

    padding:30px;

    border-radius:22px;

    background:#fff;

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

    box-shadow:var(--shadow);

    transition:.35s;

}

.mini-service:hover{

    transform:translateY(-8px);

}

.mini-service i{

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.mini-service h3{

    margin-bottom:10px;

}

.mini-service p{

    color:var(--gray);

}

/*==================================
PRODUCT CARDS
==================================*/

.products-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.product-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    aspect-ratio:1/1;

    cursor:pointer;

}

.product-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-overlay{

    position:absolute;

    inset:0;

    padding:35px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.80),
        rgba(0,0,0,.10)
    );

    color:#fff;

}

.product-overlay span{

    opacity:.8;

    margin-bottom:10px;

}

.product-overlay h3{

    margin-bottom:10px;

    font-size:1.8rem;

}

/*==================================
PORTFOLIO
==================================*/

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    grid-auto-flow:dense;

}

.portfolio-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    min-height:320px;

}

.portfolio-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

.portfolio-large{

    grid-column:span 2;

    min-height:520px;

}

.portfolio-wide{

    grid-column:span 2;

}

.portfolio-tall{

    grid-row:span 2;

}

.portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:flex-end;

    flex-direction:column;

    padding:35px;

    color:#fff;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        transparent
    );

}

.portfolio-overlay span{

    opacity:.8;

    margin-bottom:8px;

}

/*==================================
BEFORE & AFTER
==================================*/

.before-after-slider{
    --position:50%;
    position:relative;
    width:100%;
    aspect-ratio:16/7;
    min-height:340px;
    margin:0 0 18px;
    overflow:hidden;
    border-radius:28px;
    background:#0b2757;
    box-shadow:var(--shadow);
    isolation:isolate;
}

.before-after-slider__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    user-select:none;
    pointer-events:none;
}

.before-after-slider__before{
    position:absolute;
    inset:0;
    width:100%;
    overflow:hidden;
    clip-path:inset(0 calc(100% - var(--position)) 0 0);
    z-index:2;
}

.before-after-slider__before .before-after-slider__image{
    width:100%;
}

.before-after-slider__label{
    position:absolute;
    z-index:4;
    top:22px;
    padding:10px 18px;
    border:1px solid rgba(255,255,255,.32);
    border-radius:999px;
    color:#fff;
    background:rgba(4,20,48,.78);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    backdrop-filter:blur(8px);
}

.before-after-slider__label--before{left:22px;}
.before-after-slider__label--after{right:22px;}

.before-after-slider__divider{
    position:absolute;
    z-index:5;
    top:0;
    bottom:0;
    left:var(--position);
    width:3px;
    transform:translateX(-50%);
    background:#fff;
    box-shadow:0 0 18px rgba(0,0,0,.35);
    pointer-events:none;
}

.before-after-slider__divider span{
    position:absolute;
    top:50%;
    left:50%;
    display:grid;
    width:54px;
    height:54px;
    place-items:center;
    transform:translate(-50%,-50%);
    border:4px solid #fff;
    border-radius:50%;
    color:#0b2757;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
}

.before-after-slider__range{
    position:absolute;
    z-index:6;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:ew-resize;
}

.before-after-slider:focus-within{
    outline:4px solid rgba(25,114,249,.3);
    outline-offset:4px;
}

.before-after-slider__hint{
    margin:0 0 34px;
    color:#64748b;
    text-align:center;
    font-size:.92rem;
    font-weight:600;
}

@media(max-width:700px){
    .before-after-slider{aspect-ratio:4/3;min-height:0;border-radius:20px;}
    .before-after-slider__label{top:14px;padding:8px 12px;font-size:.7rem;}
    .before-after-slider__label--before{left:14px;}
    .before-after-slider__label--after{right:14px;}
    .before-after-slider__divider span{width:46px;height:46px;}
}

.comparison-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.comparison-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    overflow:hidden;

    border-radius:24px;

    box-shadow:var(--shadow);

}

.comparison-image{

    position:relative;

}

.comparison-image img{

    aspect-ratio:4/5;

    object-fit:cover;

}

.comparison-image span{

    position:absolute;

    top:20px;

    left:20px;

    background:rgba(0,0,0,.75);

    color:#fff;

    padding:10px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

/*==================================
ABOUT
==================================*/

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image img{

    border-radius:24px;

    box-shadow:var(--shadow);

}

/*==================================
CLIENTS
==================================*/

.client-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    align-items:center;

}

.client-grid img{

    filter:grayscale(100%);

    opacity:.65;

    transition:.35s;

}

.client-grid img:hover{

    filter:none;

    opacity:1;

}

/*==================================
CTA
==================================*/

.cta-box{

    background:linear-gradient(
        135deg,
        var(--primary),
        #ff9b3d
    );

    color:#fff;

    text-align:center;

    padding:80px 60px;

    border-radius:28px;

}

.cta-box span{

    letter-spacing:2px;

    font-weight:700;

}

.cta-box h2{

    margin:20px 0;

    font-size:clamp(2rem,5vw,3.5rem);

}

.cta-box p{

    max-width:650px;

    margin:0 auto 35px;

}

/*==================================
CONTACT
==================================*/

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

}

.contact-list{

    margin-top:35px;

    display:grid;

    gap:24px;

}

.contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.contact-item i{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:1.2rem;

}

.contact-map iframe{

    width:100%;

    height:100%;

    min-height:500px;

    border:0;

    border-radius:24px;

}

/*==================================
PORTFOLIO V2
==================================*/

.portfolio-filter{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-bottom:40px;

    flex-wrap:wrap;

}

.portfolio-filter button{

    padding:10px 18px;

    border-radius:999px;

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

    background:#fff;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.portfolio-filter button.active,
.portfolio-filter button:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

/* GRID ENHANCED */

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    grid-auto-flow:dense;

}

.portfolio-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    min-height:320px;

    cursor:pointer;

}

.portfolio-item.large{

    grid-column:span 2;

    min-height:520px;

}

.portfolio-item.wide{

    grid-column:span 2;

}

.portfolio-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

/* OVERLAY */

.portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    color:#fff;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        transparent
    );

}

.portfolio-overlay span{

    font-size:.85rem;

    letter-spacing:2px;

    opacity:.85;

    margin-bottom:8px;

}

/*==================================
WHY PAD V2
==================================*/

.why-pad{

    background:#fff;

    padding:120px 0;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.why-card{

    background:#fff;

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

    border-radius:24px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);

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

}

.why-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:24px;

    transition:.3s;

}

.why-card:hover .why-icon{

    transform:scale(1.1);

}

.why-card h3{

    margin-bottom:12px;

    font-size:1.2rem;

}

.why-card p{

    color:var(--gray);

    font-size:.95rem;

}

/*==================================
CONTACT V2
==================================*/

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    margin-bottom:50px;

}

.contact-box{

    display:flex;

    gap:15px;

    align-items:flex-start;

    margin-bottom:25px;

}

.contact-box i{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    font-size:18px;

}

.contact-social{

    display:flex;

    gap:12px;

    margin-top:20px;

}

.contact-social a{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f2f2f2;

    transition:.3s;

}

.contact-social a:hover{

    background:var(--primary);

    color:#fff;

}

/* FORM */

.contact-form{

    background:#fff;

    padding:35px;

    border-radius:18px;

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

}

.form-group{

    position:relative;

    margin-bottom:25px;

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:14px 12px;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

    background:transparent;

}

.form-group label{

    position:absolute;

    top:50%;

    left:12px;

    transform:translateY(-50%);

    color:#999;

    transition:.3s;

    pointer-events:none;

}

.form-group textarea{

    min-height:120px;

    resize:none;

}

.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:valid + label,
.form-group textarea:valid + label{

    top:-10px;

    font-size:.75rem;

    color:var(--primary);

}

/* MAP */

.contact-map iframe{

    width:100%;

    height:400px;

    border:none;

    border-radius:18px;

}


.quote-modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.65);

    display:none;

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

    z-index:9999;

    backdrop-filter:blur(6px);

}

.quote-modal.show{

    display:flex;

}

.quote-modal-content{

    width:min(900px,95%);

    background:#fff;

    border-radius:18px;

    padding:35px;

    position:relative;

    animation:popup .25s ease;

    max-height:90vh;

    overflow:auto;

}

.quote-close{

    position:absolute;

    right:18px;

    top:18px;

    border:none;

    background:none;

    font-size:30px;

    cursor:pointer;

}

.quote-tabs{

    display:flex;

    gap:10px;

    margin:30px 0;

}

.tab-btn{

    flex:1;

    padding:12px;

    border-radius:10px;

    border:1px solid #ddd;

    cursor:pointer;

    background:#f5f5f5;

}

.tab-btn.active{

    background:#0A5CFF;

    color:#fff;

}

@keyframes popup{

from{

transform:translateY(30px);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}



.quote-common{

    margin:30px 0;

    padding-bottom:25px;

    border-bottom:1px solid #ececec;

}

.quote-section-title{

    margin-bottom:20px;

    font-size:18px;

    font-weight:700;

    color:#222;

}

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

@media(max-width:768px){

    .form-grid{

        grid-template-columns:1fr;

    }

}


.careers-modal.show {
    display: flex;
}