/* ===============================
   SERVICE HERO
================================ */

.service-hero{

    height:60vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
    linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),
    url("../images/service-banner.jpg")
    center/cover;

}

.service-hero h1{

    font-size:60px;

    color:#D4AF37;

}

.service-hero p{

    margin-top:20px;

    font-size:20px;

}

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:50px;

}

.service-card{

background:#1c1c1c;

padding:35px;

border-radius:20px;

text-align:center;

transition:.35s;

border:1px solid #333;

}

.service-card:hover{

transform:translateY(-10px);

border-color:#D4AF37;

box-shadow:0 15px 30px rgba(212,175,55,.25);

}

.service-card h3{

margin:20px 0;

color:#D4AF37;

}

.service-card a{

display:inline-block;

margin-top:20px;

color:#D4AF37;

text-decoration:none;

}

.featured-service{

display:flex;

align-items:center;

gap:60px;

padding:100px 10%;

}

.featured-image{

flex:1;

}

.featured-image img{

width:100%;

border-radius:20px;

}

.featured-text{

flex:1;

}

.featured-text h2{

color:#D4AF37;

margin-bottom:20px;

}

.featured-text ul{

margin:25px 0;

}

.featured-text li{

margin:12px 0;

}

.service-pricing{

    padding:100px 10%;

    text-align:center;

}

.price-table{

    width:100%;

    border-collapse:collapse;

    margin-top:40px;

}

.price-table th{

    background:#D4AF37;

    color:#111;

    padding:18px;

}

.price-table td{

    padding:18px;

    border-bottom:1px solid #333;

}

.price-table tr:hover{

    background:#1b1b1b;

}
.length-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:40px;

}

.length-card{

background:#1d1d1d;

padding:35px;

border-radius:20px;

transition:.3s;

}

.length-card:hover{

transform:translateY(-8px);

border:1px solid #D4AF37;

}

.faq{

padding:100px 10%;

}

.faq-item{

background:#1d1d1d;

padding:25px;

margin:20px 0;

border-radius:15px;

}

.faq-item h3{

color:#D4AF37;

margin-bottom:10px;

}

.color-level{

padding:100px 10%;

text-align:center;

}

.level-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(90px,1fr));

gap:15px;

margin-top:40px;

}

.level{

background:#1d1d1d;

padding:20px;

border-radius:15px;

font-size:24px;

font-weight:bold;

transition:.3s;

}

.level:hover{

background:#D4AF37;

color:#111;

}

.process-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:40px;

}

.process-card{

background:#1b1b1b;

padding:30px;

border-radius:20px;

transition:.3s;

}

.process-card:hover{

transform:translateY(-8px);

border:1px solid #D4AF37;

}

.compare-table{
    padding:100px 10%;

    text-align:center;

width:100%;

border-collapse:collapse;

margin-top:40px;

}

.compare-table th{

background:#D4AF37;

padding:18px;

color:#111;

}

.compare-table td{

padding:18px;

border-bottom:1px solid #333;

}

.floating-book{

position:fixed;

bottom:30px;

left:50%;

transform:translateX(-50%);

background:#D4AF37;

color:#111;

padding:16px 35px;

border-radius:40px;

text-decoration:none;

font-weight:bold;

z-index:999;

box-shadow:0 10px 30px rgba(0,0,0,.3);

transition:.3s;

}

.floating-book:hover{

transform:translateX(-50%) scale(1.05);

}

.service-rating{

padding:100px 10%;

text-align:center;

}

.rating-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:40px;

}

.rating-card{

background:#1d1d1d;

padding:30px;

border-radius:20px;

transition:.3s;

}

.rating-card:hover{

transform:translateY(-8px);

border:1px solid #D4AF37;

}

.rating-card span{

color:#D4AF37;

font-weight:bold;

}

.video-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:25px;

margin-top:40px;

}

.video-grid video{

width:100%;

border-radius:20px;

}

.quick-contact{

padding:80px 10%;

text-align:center;

background:#181818;

}

.contact-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:30px;

flex-wrap:wrap;

}

/* ===============================
   SERVICE TEXT POPUP
================================ */

.service-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

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

    backdrop-filter: blur(5px);

}

.service-modal.active {

    display: flex;

}

.service-modal-content {

    position: relative;

    width: min(90vw, 480px);

    background: #151515;

    border: 1px solid #D4AF37;

    border-radius: 18px;

    box-shadow: 0 20px 60px rgba(0,0,0,.6);

    animation: serviceTextPopup .25s ease;

}

@keyframes serviceTextPopup {

    from {

        opacity: 0;

        transform: scale(.95);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

.service-modal-info {

    padding: 40px 50px;

    text-align: center;

}

.service-modal-info h2 {

    margin-bottom: 15px;

    color: #D4AF37;

    font-size: 26px;

}

.service-modal-info p {

    margin: 0 auto;
    max-width: 1200px;
    color: #ddd;
    white-space: pre line;
    line-height: 1.8;
    font-size: 14px;
    text-align: left;

}

.service-modal-close {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 34px;

    height: 34px;

    border: 1px solid #D4AF37;

    border-radius: 50%;

    background: #111;

    color: #D4AF37;

    font-size: 22px;

    cursor: pointer;

}

.service-modal-close:hover {

    background: #D4AF37;

    color: #111;

}

/* ===============================
   VIEW DETAILS BUTTON
================================ */

.service-detail-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 20px;

    padding: 11px 26px;

    background: #ffffff;

    color: #111111;

    border: 1px solid #D4AF37;

    border-radius: 30px;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .3px;

    cursor: pointer;

    transition: all .3s ease;

}


/* HOVER */

.service-detail-btn:hover {

    background: #D4AF37;

    color: #111111;

    border-color: #D4AF37;

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(212, 175, 55, .25);

}


/* CLICK */

.service-detail-btn:active {

    transform: translateY(-1px);

}

#serviceDetailDetails {

    white-space: pre-line;

    text-align: left;

    line-height: 1.9;

    margin: 0 auto;

    max-width: 400px;

    color: #ddd;

}

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

.before-after {

    padding: 100px 10%;

    text-align: center;

}

.before-after h2 {

    color: #D4AF37;

    margin-bottom: 40px;

}


.before-after-slider {

    position: relative;

    width: 100%;

    max-width: 900px;

    height: 500px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 20px;

    user-select: none;

}


.before-after-slider > .after-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.before-image-wrapper {

    position: absolute;

    top: 0;

    left: 0;

    width: 50%;

    height: 100%;

    overflow: hidden;

    z-index: 2;

}


.before-image-wrapper img {

    position: absolute;

    top: 0;

    left: 0;

    width: 900px;

    max-width: none;

    height: 100%;

    object-fit: cover;

}


/* DIVIDER */

.slider-line {

    position: absolute;

    top: 0;

    left: 50%;

    width: 2px;

    height: 100%;

    background: #fff;

    z-index: 3;

    pointer-events: none;

}


/* HANDLE */

.slider-handle {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border: 2px solid #fff;

    background: #D4AF37;

    color: #111;

    font-size: 22px;

    cursor: ew-resize;

    z-index: 4;

}

/* =========================================================
   SIGNATURE SERVICES
========================================================= */

.signature-services {
    width: 100%;
    padding: 80px 8%;
    box-sizing: border-box;
    background: #101010;
}

.signature-services-header {
    text-align: center;
    margin-bottom: 45px;
}

.signature-services-header .section-label {
    display: block;
    margin-bottom: 10px;

    color: #e6b936;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.signature-services-header h2 {
    margin: 0 0 12px;

    color: #e6b936;

    font-size: 38px;
    font-weight: 700;
}

.signature-services-header p {
    max-width: 600px;
    margin: 0 auto;

    color: #b8b8b8;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   SERVICE GRID
========================================================= */

.signature-service-grid {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;

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

    gap: 22px;
}


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

.signature-service-card {
    position: relative;

    min-height: 280px;

    padding: 28px 24px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #191919,
            #111111
        );

    border: 1px solid #6e5717;

    border-radius: 18px;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.signature-service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: #e6b936;
}

.signature-service-card:hover {
    transform: translateY(-6px);

    border-color: #d8ae2d;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.4);
}


/* =========================================================
   ICON
========================================================= */

.signature-service-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 20px;

    color: #e6b936;

    background: rgba(230, 185, 54, 0.08);

    border: 1px solid rgba(230, 185, 54, 0.3);

    border-radius: 14px;

    font-size: 25px;
}


/* =========================================================
   CONTENT
========================================================= */

.signature-service-card h3 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size: 19px;
    font-weight: 700;
}

.signature-service-card p {
    margin: 0;

    color: #a9a9a9;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   PRICE
========================================================= */

.signature-service-price {
    margin-top: 20px;

    color: #e6b936;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   BUTTONS
========================================================= */

.signature-service-actions {
    display: flex;

    gap: 9px;

    margin-top: 20px;
}

.signature-service-actions a,
.signature-service-actions button {
    flex: 1;

    height: 40px;

    display: flex;

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

    box-sizing: border-box;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition: 0.2s ease;
}

.signature-view-btn {
    color: #e6b936;

    background: transparent;

    border: 1px solid #80691f;
}

.signature-view-btn:hover {
    background: rgba(230, 185, 54, 0.08);

    border-color: #e6b936;
}

.signature-book-btn {
    color: #111111;

    background: #e6b936;

    border: 1px solid #e6b936;
}

.signature-book-btn:hover {
    background: #f1ca4c;

    transform: translateY(-1px);
}


/* =========================================================
   LOADING
========================================================= */

.signature-loading {
    grid-column: 1 / -1;

    padding: 50px 20px;

    text-align: center;

    color: #999999;

    font-size: 13px;
}


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

.signature-empty {
    grid-column: 1 / -1;

    padding: 50px 20px;

    text-align: center;

    color: #999999;

    background: #151515;

    border: 1px solid #333333;

    border-radius: 16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .signature-service-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .signature-services {
        padding: 60px 5%;
    }

    .signature-services-header h2 {
        font-size: 30px;
    }

    .signature-service-grid {
        grid-template-columns: 1fr;
    }

}