.elementor-481 .elementor-element.elementor-element-5acd261{width:var( --container-widget-width, 94.343% );max-width:94.343%;--container-widget-width:94.343%;--container-widget-flex-grow:0;}.elementor-481 .elementor-element.elementor-element-5acd261.elementor-element{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-5acd261 *//*==================================================
        PRIMO SHINE SERVICES PAGE
        FIXED MOBILE RESPONSIVE CSS
        PART 1 / 3
==================================================*/

/*==================================================
                GLOBAL SAFETY
==================================================*/

.services-hero,
.service-navigation,
.service-section,
.booking-section{

    width:100%;
    box-sizing:border-box;
    overflow:hidden;

}

.services-hero *,
.service-navigation *,
.service-section *,
.booking-section *{

    box-sizing:border-box;

}


/*==================================================
                SERVICES HERO
==================================================*/

.services-hero{

    position:relative;

    min-height:100vh;

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

    padding:140px 8% 100px;

    background:#111111;

    overflow:hidden;

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at top left,
        rgba(255,196,0,.08),
        transparent 35%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(255,196,0,.05),
        transparent 35%
    );

    z-index:1;

}

.services-hero-container{

    position:relative;

    z-index:10;

    width:100%;
    max-width:1100px;

    margin:0 auto;

    text-align:center;

}


/*==================================================
                HERO SUBTITLE
==================================================*/

.hero-subtitle{

    display:inline-flex;

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

    max-width:100%;

    padding:10px 26px;

    border-radius:50px;

    border:1px solid rgba(255,196,0,.35);

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

    color:#ffc400;

    letter-spacing:2px;

    font-size:.85rem;
    font-weight:700;

    margin-bottom:28px;

}


/*==================================================
                HERO HEADING
==================================================*/

.services-hero h1{

    color:#ffffff;

    font-size:4.4rem;

    line-height:1.1;

    font-weight:800;

    margin:0 0 28px;

    word-wrap:break-word;

}

.services-hero p{

    width:100%;
    max-width:820px;

    margin:0 auto;

    color:#bfbfbf;

    font-size:1.1rem;

    line-height:2;

}


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

.hero-buttons{

    display:flex;

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

    gap:20px;

    margin-top:50px;

    flex-wrap:wrap;

}

.hero-btn{

    display:inline-flex;

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

    min-height:56px;

    padding:17px 38px;

    border-radius:60px;

    font-size:1rem;
    font-weight:700;

    text-decoration:none;

    transition:.35s ease;

    cursor:pointer;

}

.hero-primary{

    background:#ffc400 !important;

    color:#111111 !important;

}

.hero-primary:hover{

    background:#ffc400 !important;

    color:#111111 !important;

    transform:translateY(-4px);

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

}

.hero-secondary{

    color:#ffffff !important;

    border:1px solid rgba(255,255,255,.15);

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

}

.hero-secondary:hover{

    background:#ffffff;

    color:#111111 !important;

}


/*==================================================
                HERO STATS
==================================================*/

.hero-stats{

    margin-top:80px;

    display:grid;

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

    gap:30px;

}

.hero-stat{

    min-width:0;

    background:#1b1b1b;

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:35px 20px;

    text-align:center;

    transition:.35s;

}

.hero-stat:hover{

    transform:translateY(-8px);

    border-color:#ffc400;

}

.hero-stat h3{

    color:#ffc400;

    font-size:2rem;

    margin:0 0 12px;

}

.hero-stat span{

    display:block;

    color:#cfcfcf;

    font-size:.95rem;

    line-height:1.5;

}


/*==================================================
                SCROLL INDICATOR
==================================================*/

.scroll-indicator{

    position:absolute;

    left:50%;
    bottom:35px;

    transform:translateX(-50%);

    text-align:center;

    z-index:10;

}

.scroll-indicator span{

    display:block;

    color:#bdbdbd;

    font-size:.8rem;

    letter-spacing:2px;

    margin-bottom:12px;

}

.mouse{

    width:30px;
    height:52px;

    border:2px solid rgba(255,255,255,.3);

    border-radius:30px;

    margin:auto;

    position:relative;

}

.wheel{

    width:6px;
    height:10px;

    border-radius:50px;

    background:#ffc400;

    position:absolute;

    left:50%;
    top:10px;

    transform:translateX(-50%);

    animation:wheelMove 1.8s infinite;

}

@keyframes wheelMove{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

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

    }

}


/*==================================================
                GLOW CIRCLES
==================================================*/

.hero-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.18;

    pointer-events:none;

}

.hero-circle-1{

    width:340px;
    height:340px;

    background:#ffc400;

    top:-120px;
    left:-120px;

}

.hero-circle-2{

    width:420px;
    height:420px;

    background:#ffc400;

    right:-180px;
    bottom:-180px;

}


/*==================================================
                SERVICE NAVIGATION
==================================================*/

.service-navigation{

    padding:120px 8%;

    background:#181818;

    position:relative;

}

.service-navigation .container{

    width:100%;
    max-width:1400px;

    margin:0 auto;

}

.service-navigation .section-heading{

    text-align:center;

    margin:0 auto 70px;

    max-width:900px;

}

.service-navigation .section-heading span{

    display:inline-block;

    padding:10px 24px;

    border:1px solid rgba(255,196,0,.35);

    border-radius:50px;

    color:#ffc400;

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

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.service-navigation .section-heading h2{

    color:#ffffff;

    font-size:3rem;

    font-weight:800;

    line-height:1.2;

    margin:0 0 18px;

}

.service-navigation .section-heading p{

    width:100%;
    max-width:760px;

    margin:0 auto;

    color:#bdbdbd;

    line-height:1.9;

    font-size:1.05rem;

}


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

.service-navigation-grid{

    display:grid;

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

    gap:28px;

}


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

.service-nav-card{

    position:relative;

    min-width:0;

    background:#222222;

    border-radius:24px;

    padding:38px 28px;

    text-align:center;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.08);

    transition:.45s ease;

    overflow:hidden;

}

.service-nav-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        145deg,
        rgba(255,196,0,.12),
        transparent 60%
    );

    opacity:0;

    transition:.45s;

}

.service-nav-icon{

    width:80px;
    height:80px;

    margin:0 auto 28px;

    display:flex;

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

    border-radius:22px;

    background:#2d2d2d;

    border:1px solid rgba(255,196,0,.15);

    transition:.4s;

}

.service-nav-icon i{

    color:#ffc400;

    font-size:2rem;

}

.service-nav-card h3{

    color:#fff;

    font-size:1.45rem;

    line-height:1.3;

    margin:0 0 15px;

    font-weight:700;

}

.service-nav-card p{

    color:#bdbdbd;

    font-size:.95rem;

    line-height:1.8;

    margin:0 0 24px;

    min-height:62px;

}

.service-nav-card span{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

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

    color:#ffc400;

    font-size:.85rem;

    font-weight:700;

}


/*==================================================
                SERVICE NAV HOVER
==================================================*/

.service-nav-card:hover{

    transform:translateY(-12px);

    border-color:#ffc400;

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        0 0 30px rgba(255,196,0,.15);

}

.service-nav-card:hover::before{

    opacity:1;

}

.service-nav-card:hover .service-nav-icon{

    background:#ffc400;

    transform:rotate(-8deg) scale(1.08);

}

.service-nav-card:hover .service-nav-icon i{

    color:#111;

}

.service-nav-card:hover h3{

    color:#ffc400;

}


/*==================================================
                ACTIVE
==================================================*/

.service-nav-card.active{

    border:1px solid #ffc400;

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

}

.service-nav-card.active .service-nav-icon{

    background:#ffc400;

}

.service-nav-card.active .service-nav-icon i{

    color:#111;

}


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

@media(max-width:1200px){

    .services-hero{

        padding-left:6%;
        padding-right:6%;

    }

    .services-hero h1{

        font-size:3.8rem;

    }

    .hero-stats{

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

    }

    .service-navigation{

        padding-left:6%;
        padding-right:6%;

    }

    .service-navigation-grid{

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

    }

}


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

@media(max-width:768px){

    .services-hero{

        min-height:auto;

        padding:120px 20px 90px;

    }

    .services-hero h1{

        font-size:2.5rem;

        line-height:1.15;

        margin-bottom:20px;

    }

    .services-hero p{

        font-size:.95rem;

        line-height:1.75;

    }

    .hero-subtitle{

        padding:8px 18px;

        font-size:.72rem;

        letter-spacing:1.5px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

        gap:14px;

        margin-top:35px;

    }

    .hero-btn{

        width:100%;

        max-width:360px;

        padding:15px 25px;

        font-size:.95rem;

    }

    .hero-stats{

        grid-template-columns:1fr 1fr;

        gap:15px;

        margin-top:55px;

    }

    .hero-stat{

        padding:25px 15px;

        border-radius:16px;

    }

    .hero-stat h3{

        font-size:1.5rem;

    }

    .hero-stat span{

        font-size:.82rem;

    }

    .scroll-indicator{

        display:none;

    }

    .hero-circle-1{

        width:220px;
        height:220px;

    }

    .hero-circle-2{

        width:260px;
        height:260px;

    }


    /* SERVICE NAVIGATION */

    .service-navigation{

        padding:75px 20px;

    }

    .service-navigation .section-heading{

        margin-bottom:45px;

    }

    .service-navigation .section-heading h2{

        font-size:2rem;

        line-height:1.2;

    }

    .service-navigation .section-heading p{

        font-size:.92rem;

        line-height:1.7;

    }

    .service-navigation .section-heading span{

        font-size:.7rem;

        padding:8px 18px;

    }


    /* ONE CARD PER ROW */

    .service-navigation-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .service-nav-card{

        width:100%;

        padding:30px 22px;

        border-radius:20px;

    }

    .service-nav-icon{

        width:70px;
        height:70px;

        margin-bottom:22px;

    }

    .service-nav-icon i{

        font-size:1.7rem;

    }

    .service-nav-card h3{

        font-size:1.25rem;

    }

    .service-nav-card p{

        font-size:.9rem;

        min-height:auto;

        line-height:1.7;

    }

}


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

@media(max-width:480px){

    .services-hero{

        padding:105px 16px 75px;

    }

    .services-hero h1{

        font-size:2rem;

    }

    .services-hero p{

        font-size:.88rem;

    }

    .hero-subtitle{

        font-size:.65rem;

        padding:7px 15px;

    }

    .hero-stats{

        grid-template-columns:1fr;

        gap:12px;

    }

    .hero-stat{

        padding:22px 15px;

    }

    .service-navigation{

        padding:65px 16px;

    }

    .service-navigation .section-heading h2{

        font-size:1.8rem;

    }

    .service-navigation .section-heading p{

        font-size:.86rem;

    }

    .service-nav-card{

        padding:28px 20px;

    }

}


/*==================================================
                VERY SMALL MOBILE
==================================================*/

@media(max-width:360px){

    .services-hero h1{

        font-size:1.8rem;

    }

    .services-hero p{

        font-size:.84rem;

    }

    .service-navigation .section-heading h2{

        font-size:1.65rem;

    }

    .service-nav-card h3{

        font-size:1.15rem;

    }

}

/*==================================================
                PRIMO SHINE
                SERVICE PAGE
                PART 2 / 3
==================================================*/


/*==================================================
                SERVICE SECTION
==================================================*/

.service-section{

    padding:110px 8%;

    background:#111111;

}

.service-container{

    max-width:1450px;

    margin:auto;

}


/*==================================================
                SERVICE HEADING
==================================================*/

.service-heading{

    margin-bottom:60px;

}

.service-title{

    display:flex;

    align-items:center;

    gap:22px;

}

.service-title-icon{

    width:80px;
    height:80px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #ffc400,
        #ffb300
    );

    display:flex;

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

    flex-shrink:0;

}

.service-title-icon i{

    color:#111;

    font-size:2rem;

}

.service-title h2{

    color:#fff;

    font-size:2.8rem;

    margin:0 0 8px;

    line-height:1.2;

}

.service-title p{

    color:#bfbfbf;

    line-height:1.8;

    margin:0;

}


/*==================================================
                PACKAGE GRID
==================================================*/

.packages-grid{

    display:grid;

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

    gap:35px;

    align-items:stretch;

}


/*==================================================
                PACKAGE CARD
==================================================*/

.package-card{

    position:relative;

    background:#1d1d1d;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    transition:.45s;

    display:flex;

    flex-direction:column;

    min-width:0;

    width:100%;

    height:100%;

    box-sizing:border-box;

}

.package-card:hover{

    transform:translateY(-14px);

    border-color:#ffc400;

    box-shadow:

    0 20px 50px rgba(0,0,0,.45),

    0 0 35px rgba(255,196,0,.18);

}


/*==================================================
                PACKAGE TOP
==================================================*/

.package-top{

    padding:35px 35px 25px;

}

.package-level{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

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

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

    color:#ffc400;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:18px;

}

.package-top h3{

    color:#fff;

    font-size:2rem;

    margin:0 0 12px;

    line-height:1.2;

}

.package-top p{

    color:#bfbfbf;

    line-height:1.8;

    margin:0;

}


/*==================================================
            MOST POPULAR BADGE
==================================================*/

.package-badge{

    position:absolute;

    top:20px;

    right:-42px;

    background:#ffc400;

    color:#111;

    font-weight:700;

    font-size:.78rem;

    padding:10px 48px;

    transform:rotate(45deg);

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

}


/*==================================================
                PRICING TABLE
==================================================*/

.package-pricing{

    width:100%;

    padding:0 35px;

    box-sizing:border-box;

    overflow:visible;

}


/*
==================================================
IMPORTANT PRICING FIX

Vehicle Category and Price are kept in
separate fixed columns.

The table will NOT collapse into each other.
==================================================
*/

.package-pricing table{

    width:100%;

    max-width:100%;

    border-collapse:collapse;

    border-spacing:0;

    table-layout:fixed;

}


/*==================================================
                TABLE COLUMNS
==================================================*/

/*
    60% = Vehicle Category
    40% = Price
*/

.package-pricing th:first-child,
.package-pricing td:first-child{

    width:60%;

}

.package-pricing th:last-child,
.package-pricing td:last-child{

    width:40%;

}


/*==================================================
                TABLE ROW
==================================================*/

.package-pricing tr{

    border-bottom:1px solid rgba(255,255,255,.08);

}

.package-pricing tr:last-child{

    border-bottom:none;

}


/*==================================================
                TABLE CELLS
==================================================*/

.package-pricing td{

    padding:14px 0;

    color:#d9d9d9;

    font-size:.95rem;

    line-height:1.5;

    vertical-align:middle;

    box-sizing:border-box;

}


/*==================================================
        VEHICLE CATEGORY COLUMN
==================================================*/

.package-pricing td:first-child{

    text-align:left;

    padding-right:18px;

    white-space:normal;

    overflow-wrap:break-word;

    word-break:normal;

}


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

.package-pricing td:last-child{

    text-align:right;

    padding-left:12px;

    color:#ffc400;

    font-weight:700;

    font-size:1rem;

    white-space:nowrap;

}


/*==================================================
                DIVIDER
==================================================*/

.package-divider{

    width:calc(100% - 70px);

    height:1px;

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

    margin:28px auto;

}


/*==================================================
                FEATURES
==================================================*/

.package-features{

    list-style:none;

    padding:0 35px;

    margin:0;

}

.package-features li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#d7d7d7;

    line-height:1.8;

    margin-bottom:16px;

}

.package-features li i{

    color:#ffc400;

    margin-top:5px;

    flex-shrink:0;

}


/*==================================================
            EQUAL HEIGHT SPACER
==================================================*/

.package-spacer{

    flex:1;

}


/*==================================================
                PACKAGE FOOTER
==================================================*/

.package-footer{

    padding:35px;

    margin-top:auto;

}


/*==================================================
                BOOK PACKAGE BUTTON
==================================================*/

.book-package-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:#ffc400 !important;

    color:#111111 !important;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.35s ease;

    appearance:none;

    -webkit-appearance:none;

    box-shadow:none;

    outline:none;

}


/*==================================================
        GOLD HOVER — NO PINK
==================================================*/

.book-package-btn:hover{

    background:#ffc400 !important;

    background-color:#ffc400 !important;

    color:#111111 !important;

    border-color:#ffc400 !important;

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(255,196,0,.28);

}


/*==================================================
            FOCUS / ACTIVE
==================================================*/

.book-package-btn:focus,
.book-package-btn:focus-visible,
.book-package-btn:active{

    background:#ffc400 !important;

    background-color:#ffc400 !important;

    color:#111111 !important;

    border-color:#ffc400 !important;

    outline:none !important;

    box-shadow:

    0 0 0 3px rgba(255,196,0,.18);

}


/*
    Elementor / Theme hover override
*/

.package-card .book-package-btn:hover,
.package-card .book-package-btn:focus,
.package-card .book-package-btn:active{

    background:#ffc400 !important;

    color:#111111 !important;

}


/*==================================================
            PACKAGE COLORS
==================================================*/

.silver-package{

    border-top:4px solid #bfc5cc;

}

.gold-package{

    border-top:4px solid #ffc400;

    transform:scale(1.03);

}

.gold-package:hover{

    transform:translateY(-14px) scale(1.03);

}

.premium-package{

    border-top:4px solid #ff8c00;

}


/*==================================================
            IMPORTANT NOTE
==================================================*/

.important-note{

    margin-top:45px;

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#1d1d1d;

    border-left:4px solid #ffc400;

    border-radius:18px;

    padding:30px;

}

.important-note-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#ffc400;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:1.3rem;

}

.important-note h4{

    color:#fff;

    margin:0 0 10px;

}

.important-note p{

    color:#cfcfcf;

    line-height:1.9;

    margin:0;

}


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

@media(max-width:1100px){

    .packages-grid{

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

    }

    /*
        Slightly reduce table padding so
        both columns remain comfortable.
    */

    .package-pricing{

        padding:0 28px;

    }

    .package-pricing td{

        font-size:.92rem;

    }

}


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

@media(max-width:768px){

    .service-section{

        padding:80px 20px;

    }


    /* SERVICE TITLE */

    .service-title{

        flex-direction:column;

        text-align:center;

        gap:15px;

    }

    .service-title-icon{

        width:65px;

        height:65px;

        border-radius:18px;

    }

    .service-title-icon i{

        font-size:1.6rem;

    }

    .service-title h2{

        font-size:2rem;

        line-height:1.2;

    }

    .service-title p{

        font-size:.95rem;

        line-height:1.7;

    }


    /*================================================
            ONE PACKAGE PER ROW
    =================================================*/

    .packages-grid{

        grid-template-columns:1fr;

        gap:25px;

    }


    /* PACKAGE */

    .package-card{

        width:100%;

        min-width:0;

    }


    /* REMOVE DESKTOP GOLD SCALE */

    .gold-package{

        transform:none;

    }

    .gold-package:hover{

        transform:translateY(-10px);

    }


    /* PACKAGE TOP */

    .package-top{

        padding:30px 25px 22px;

    }

    .package-top h3{

        font-size:1.7rem;

    }


    /*================================================
            MOBILE PRICING FIX
    =================================================*/

    .package-pricing{

        width:100%;

        padding:0 25px;

        box-sizing:border-box;

        overflow:visible;

    }

    .package-pricing table{

        width:100%;

        max-width:100%;

        table-layout:fixed;

        border-collapse:collapse;

    }


    /*
        KEEP 60 / 40 SEPARATION
    */

    .package-pricing th:first-child,
    .package-pricing td:first-child{

        width:60%;

    }

    .package-pricing th:last-child,
    .package-pricing td:last-child{

        width:40%;

    }


    .package-pricing td{

        font-size:.9rem;

        padding:13px 0;

        line-height:1.5;

        vertical-align:middle;

        box-sizing:border-box;

    }


    /* VEHICLE CATEGORY */

    .package-pricing td:first-child{

        padding-right:12px;

        text-align:left;

        white-space:normal;

        overflow-wrap:break-word;

        word-break:normal;

    }


    /* PRICE */

    .package-pricing td:last-child{

        padding-left:8px;

        text-align:right;

        white-space:nowrap;

        font-size:.95rem;

    }


    /* DIVIDER */

    .package-divider{

        width:calc(100% - 50px);

        margin:25px auto;

    }


    /* FEATURES */

    .package-features{

        padding:0 25px;

    }

    .package-features li{

        font-size:.92rem;

        gap:10px;

        line-height:1.7;

    }


    /* FOOTER */

    .package-footer{

        padding:25px;

    }

    .book-package-btn{

        height:55px;

        font-size:.95rem;

    }


    /* IMPORTANT NOTE */

    .important-note{

        flex-direction:column;

        padding:25px;

        gap:15px;

    }

}


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

@media(max-width:480px){

    .service-section{

        padding:65px 15px;

    }


    .service-title-icon{

        width:58px;

        height:58px;

    }

    .service-title-icon i{

        font-size:1.4rem;

    }


    .service-title h2{

        font-size:1.75rem;

    }


    .service-title p{

        font-size:.9rem;

    }


    .package-top{

        padding:25px 20px 20px;

    }


    .package-level{

        font-size:.72rem;

        padding:7px 14px;

    }


    .package-top h3{

        font-size:1.5rem;

    }


    .package-top p{

        font-size:.9rem;

    }


    /*================================================
            SMALL MOBILE PRICING
    =================================================*/

    .package-pricing{

        padding:0 20px;

    }

    .package-pricing table{

        width:100%;

        max-width:100%;

        table-layout:fixed;

    }


    /*
        58% CATEGORY
        42% PRICE
        Gives price enough room on very
        small screens.
    */

    .package-pricing th:first-child,
    .package-pricing td:first-child{

        width:58%;

    }

    .package-pricing th:last-child,
    .package-pricing td:last-child{

        width:42%;

    }


    .package-pricing td{

        font-size:.84rem;

        padding:12px 0;

        line-height:1.45;

    }


    .package-pricing td:first-child{

        padding-right:10px;

        white-space:normal;

        overflow-wrap:break-word;

        word-break:normal;

    }


    .package-pricing td:last-child{

        padding-left:6px;

        font-size:.9rem;

        white-space:nowrap;

    }


    .package-divider{

        width:calc(100% - 40px);

    }


    .package-features{

        padding:0 20px;

    }


    .package-features li{

        font-size:.87rem;

    }


    .package-footer{

        padding:20px;

    }


    .important-note{

        padding:20px;

    }

}

/*==================================================
                PRIMO SHINE
                SERVICE PAGE
                PART 3 / 3
==================================================*/


/*==================================================
                BOOKING SECTION
==================================================*/

.booking-section{

    padding:120px 8%;

    background:#0a0a0a;

    position:relative;

    overflow:hidden;

}

.booking-container{

    max-width:1400px;

    margin:auto;

    background:#111;

    border:1px solid rgba(255,196,0,.15);

    border-radius:30px;

    padding:70px;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 60px rgba(255,196,0,.06);

}


/*==================================================
                GLOW EFFECTS
==================================================*/

.booking-container::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:#ffc400;

    opacity:.05;

    filter:blur(120px);

    top:-120px;
    left:-120px;

    border-radius:50%;

}

.booking-container::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:#ffc400;

    opacity:.05;

    filter:blur(120px);

    bottom:-120px;
    right:-120px;

    border-radius:50%;

}


/*==================================================
                BOOKING HEADING
==================================================*/

.booking-heading{

    text-align:center;

    margin-bottom:70px;

    position:relative;

    z-index:2;

}

.booking-heading span{

    display:inline-block;

    color:#ffc400;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.booking-heading h2{

    color:#fff;

    font-size:clamp(2.2rem,5vw,3.4rem);

    font-weight:800;

    margin:0 0 18px;

    line-height:1.2;

}

.booking-heading p{

    color:#bdbdbd;

    font-size:1.05rem;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}


/*==================================================
                FORM
==================================================*/

.booking-form{

    position:relative;

    z-index:2;

}

.form-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:25px;

}

.form-group{

    display:flex;

    flex-direction:column;

    min-width:0;

}

.full-width{

    width:100%;

}


/*==================================================
                FORM SPACING
==================================================*/

.booking-form .form-grid + .form-grid{

    margin-top:10px;

}


/*==================================================
                LABELS
==================================================*/

.form-group label{

    color:#ffffff;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:12px;

    letter-spacing:.5px;

}


/*==================================================
            INPUT / SELECT / TEXTAREA
==================================================*/

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

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    background:#181818;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    border-radius:14px;

    padding:17px 20px;

    font-size:15px;

    outline:none;

    transition:.35s ease;

    font-family:inherit;

}


/*==================================================
                PLACEHOLDER
==================================================*/

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

    color:#8a8a8a;

}


/*==================================================
                SELECT
==================================================*/

.form-group select{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M2 5.5 8 11l6-5.5' stroke='%23ffc400' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    padding-right:50px;

}

.form-group select option{

    background:#181818;

    color:#fff;

}


/*==================================================
                TEXTAREA
==================================================*/

.form-group textarea{

    resize:vertical;

    min-height:170px;

    line-height:1.8;

}


/*==================================================
                FOCUS
==================================================*/

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#ffc400;

    box-shadow:

    0 0 0 4px rgba(255,196,0,.10),

    0 0 20px rgba(255,196,0,.15);

    background:#1d1d1d;

}


/*==================================================
                READONLY
==================================================*/

.form-group input[readonly]{

    background:#121212;

    border:1px solid rgba(255,196,0,.20);

    color:#ffc400;

    font-weight:700;

    cursor:not-allowed;

}


/*==================================================
                HOVER INPUTS
==================================================*/

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover{

    border-color:rgba(255,196,0,.35);

}


/*==================================================
                NUMBER INPUT
==================================================*/

.form-group input[type=number]::-webkit-inner-spin-button,
.form-group input[type=number]::-webkit-outer-spin-button{

    -webkit-appearance:none;

    margin:0;

}

.form-group input[type=number]{

    appearance:textfield;

    -moz-appearance:textfield;

}


/*==================================================
                DATE INPUT
==================================================*/

.form-group input[type=date]{

    color:#fff;

}

.form-group input[type=date]::-webkit-calendar-picker-indicator{

    filter:
    invert(82%)
    sepia(92%)
    saturate(923%)
    hue-rotate(1deg);

    cursor:pointer;

}


/*==================================================
                BOOKING BOTTOM
==================================================*/

.booking-bottom{

    margin-top:50px;

    display:flex;

    flex-direction:column;

    gap:30px;

}


/*==================================================
                TERMS
==================================================*/

.terms-check{

    display:flex;

    align-items:flex-start;

    gap:15px;

    color:#bfbfbf;

    font-size:15px;

    line-height:1.8;

    cursor:pointer;

}

.terms-check input{

    width:20px;

    height:20px;

    flex-shrink:0;

    accent-color:#ffc400;

    cursor:pointer;

    margin-top:3px;

}


/*==================================================
                SUBMIT BUTTON
==================================================*/

.submit-booking-btn{

    width:100%;

    min-height:60px;

    padding:18px 20px;

    border:none !important;

    border-radius:15px;

    background:#ffc400 !important;

    color:#000000 !important;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    overflow:hidden;

    position:relative;

    appearance:none;

    -webkit-appearance:none;

}


/*==================================================
        BUTTON HOVER — GOLD ONLY
==================================================*/

.submit-booking-btn:hover{

    background:#ffc400 !important;

    color:#000000 !important;

    border:none !important;

    transform:translateY(-4px);

    box-shadow:

    0 15px 40px rgba(255,196,0,.35);

}


/*==================================================
                BUTTON FOCUS
==================================================*/

.submit-booking-btn:focus{

    background:#ffc400 !important;

    color:#000000 !important;

    border:none !important;

    outline:none !important;

    box-shadow:

    0 0 0 4px rgba(255,196,0,.18);

}


/*==================================================
                BUTTON ACTIVE
==================================================*/

.submit-booking-btn:active{

    background:#ffc400 !important;

    color:#000000 !important;

    border:none !important;

    transform:translateY(0);

}


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

.submit-booking-btn i{

    color:#000000 !important;

    transition:.35s ease;

}

.submit-booking-btn:hover i{

    color:#000000 !important;

    transform:translateX(8px);

}


/*==================================================
                SHINE EFFECT
==================================================*/

.submit-booking-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

    pointer-events:none;

}

.submit-booking-btn:hover::before{

    left:140%;

}


/*==================================================
                SECURE PAYMENT
==================================================*/

.secure-payment{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    color:#8f8f8f;

    font-size:14px;

    text-align:center;

}

.secure-payment i{

    color:#ffc400;

}


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

@media(max-width:991px){

    .booking-section{

        padding:90px 30px;

    }

    .booking-container{

        padding:50px 30px;

        border-radius:25px;

    }

    .form-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .booking-heading{

        margin-bottom:50px;

    }

    .booking-heading h2{

        font-size:2.6rem;

    }

}


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

@media(max-width:768px){

    .booking-section{

        padding:70px 15px;

    }

    .booking-container{

        width:100%;

        box-sizing:border-box;

        padding:40px 20px;

        border-radius:20px;

    }


    /* HEADING */

    .booking-heading{

        margin-bottom:40px;

    }

    .booking-heading span{

        font-size:.78rem;

        letter-spacing:1.5px;

    }

    .booking-heading h2{

        font-size:1.9rem;

        line-height:1.25;

    }

    .booking-heading p{

        font-size:.9rem;

        line-height:1.7;

    }


    /* FORM */

    .form-grid{

        grid-template-columns:1fr;

        gap:18px;

        margin-bottom:18px;

    }

    .booking-form .form-grid + .form-grid{

        margin-top:0;

    }


    /* INPUTS */

    .form-group label{

        font-size:.9rem;

        margin-bottom:9px;

    }

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

        padding:15px 16px;

        font-size:14px;

        border-radius:12px;

    }


    .form-group textarea{

        min-height:140px;

    }


    /* BOOKING BOTTOM */

    .booking-bottom{

        margin-top:35px;

        gap:25px;

    }


    /* TERMS */

    .terms-check{

        gap:10px;

        font-size:13px;

        line-height:1.7;

    }

    .terms-check input{

        width:18px;

        height:18px;

    }


    /* BUTTON */

    .submit-booking-btn{

        min-height:55px;

        padding:16px;

        font-size:15px;

        border-radius:13px;

    }


    /* SECURE PAYMENT */

    .secure-payment{

        flex-direction:column;

        gap:7px;

        font-size:12px;

    }

}


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

@media(max-width:480px){

    .booking-section{

        padding:60px 12px;

    }

    .booking-container{

        padding:32px 16px;

        border-radius:18px;

    }


    .booking-heading{

        margin-bottom:35px;

    }

    .booking-heading span{

        font-size:.72rem;

    }

    .booking-heading h2{

        font-size:1.65rem;

    }

    .booking-heading p{

        font-size:.85rem;

    }


    .form-group label{

        font-size:.85rem;

    }

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

        padding:14px;

        font-size:13.5px;

    }


    .form-group textarea{

        min-height:130px;

    }


    .terms-check{

        font-size:12.5px;

    }


    .submit-booking-btn{

        min-height:52px;

        font-size:14px;

        padding:15px;

    }


    .secure-payment{

        font-size:11.5px;

    }

}


/*==================================================
            VERY SMALL MOBILE
==================================================*/

@media(max-width:360px){

    .booking-section{

        padding:50px 10px;

    }

    .booking-container{

        padding:28px 13px;

    }

    .booking-heading h2{

        font-size:1.5rem;

    }

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

        font-size:13px;

    }

    .submit-booking-btn{

        font-size:13.5px;

    }

}/* End custom CSS */