/* =========================================================
   THE GLOW CANVAS
   COMMON SERVICES CSS
   MAKEUP / HAIR / NAILS / ALL SERVICE PAGES
========================================================= */


/* =========================================================
   GLOBAL RESET — ONLY INSIDE SERVICE SECTIONS
========================================================= */

.tgc2026x-services,
.tgc2026x-services *,
.tgc2026x-services *::before,
.tgc2026x-services *::after,

.tgc2026n-services,
.tgc2026n-services *,
.tgc2026n-services *::before,
.tgc2026n-services *::after {

    box-sizing: border-box;
}


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

.tgc2026x-services,
.tgc2026n-services {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 25px 80px !important;

    background: #ffffff !important;

    position: relative !important;

    overflow: visible !important;

    isolation: isolate !important;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.tgc2026x-container,
.tgc2026n-container {

    width: 100% !important;

    max-width: 1400px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    position: relative !important;

    overflow: visible !important;
}


/* =========================================================
   COMMON GRID
========================================================= */

.tgc2026x-grid,
.tgc2026n-grid {

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    column-gap: 55px !important;

    row-gap: 90px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    align-items: start !important;

    position: relative !important;

    overflow: visible !important;
}


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

.tgc2026x-card,
.tgc2026n-card {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 0 45px !important;

    position: relative !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.tgc2026x-photo,
.tgc2026n-photo {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    position: relative !important;

    overflow: visible !important;

    background: transparent !important;
}


/* =========================================================
   IMAGE
   IMPORTANT:
   NO CROP
   NO FIXED HEIGHT
   NO STRETCH
========================================================= */

.tgc2026x-photo img,
.tgc2026n-photo img {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    outline: none !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    object-position: center center !important;

    vertical-align: top !important;

    box-shadow: none !important;

    transform: none !important;

    transition:
        transform 0.5s ease !important;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.tgc2026x-card:hover
.tgc2026x-photo img,

.tgc2026n-card:hover
.tgc2026n-photo img {

    transform: scale(1.01) !important;
}


/* =========================================================
   COMMON CONTENT PANEL
========================================================= */

.tgc2026x-panel,
.tgc2026n-panel {

    position: relative !important;

    left: auto !important;

    right: auto !important;

    top: auto !important;

    bottom: auto !important;

    z-index: 10 !important;

    display: block !important;

    width: calc(100% - 32px) !important;

    min-height: 390px !important;

    margin-top: -75px !important;

    margin-left: 0 !important;

    margin-right: auto !important;

    padding: 30px 28px 27px !important;

    background:
        linear-gradient(
            145deg,
            rgba(198,126,83,0.97),
            rgba(181,106,66,0.97)
        ) !important;

    border: 0 !important;

    border-radius:
        0 58px 0 58px !important;

    box-shadow:
        0 20px 40px
        rgba(70,38,22,0.16) !important;

    overflow: hidden !important;

    transform: translateZ(0);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}


/* =========================================================
   PANEL HOVER
========================================================= */

.tgc2026x-card:hover
.tgc2026x-panel,

.tgc2026n-card:hover
.tgc2026n-panel {

    transform:
        translateY(-5px)
        translateZ(0) !important;

    box-shadow:
        0 25px 46px
        rgba(70,38,22,0.22) !important;
}


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

.tgc2026x-number,
.tgc2026n-number {

    display: block !important;

    margin: 0 0 12px !important;

    padding: 0 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 18px !important;

    line-height: 1 !important;

    font-style: italic !important;

    font-weight: 400 !important;

    letter-spacing: 1px !important;

    color:
        rgba(255,255,255,0.78) !important;
}


/* =========================================================
   TITLE
========================================================= */

.tgc2026x-panel h3,
.tgc2026n-panel h3 {

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 26px !important;

    line-height: 1.18 !important;

    font-weight: 500 !important;

    letter-spacing: -0.2px !important;

    color: #ffffff !important;

    background: transparent !important;

    text-align: left !important;
}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.tgc2026x-line,
.tgc2026n-line {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    gap: 9px !important;

    margin: 19px 0 16px !important;

    padding: 0 !important;
}


.tgc2026x-line i,
.tgc2026n-line i {

    display: block !important;

    flex: 1 1 auto !important;

    height: 1px !important;

    margin: 0 !important;

    padding: 0 !important;

    background:
        rgba(255,255,255,0.38) !important;
}


.tgc2026x-line b,
.tgc2026n-line b {

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 13px !important;

    line-height: 1 !important;

    font-weight: 400 !important;

    color: #ffffff !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.tgc2026x-panel p,
.tgc2026n-panel p {

    display: block !important;

    width: 100% !important;

    min-height: 48px !important;

    margin: 0 !important;

    padding: 0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

    font-weight: 400 !important;

    color:
        rgba(255,255,255,0.94) !important;

    text-align: left !important;

    background: transparent !important;
}


/* =========================================================
   PRICE BOX
   COMMON FOR ALL SERVICES
========================================================= */

.tgc2026x-price,
.tgc2026n-price {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-direction: column !important;

    width: 100% !important;

    margin: 21px 0 19px !important;

    padding: 13px 12px 14px !important;

    background:
        rgba(255,255,255,0.055) !important;

    border:
        1px solid
        rgba(255,220,190,0.62) !important;

    border-radius: 10px !important;

    text-align: center !important;

    transition:
        background 0.3s ease,
        border-color 0.3s ease !important;
}


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

.tgc2026x-card:hover
.tgc2026x-price,

.tgc2026n-card:hover
.tgc2026n-price {

    background:
        rgba(255,255,255,0.09) !important;

    border-color:
        rgba(255,230,205,0.85) !important;
}


/* =========================================================
   FROM / START FROM
   ONLY USE IF NEEDED
========================================================= */

.tgc2026x-price span,
.tgc2026n-price span {

    display: block !important;

    margin: 0 0 4px !important;

    padding: 0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 10px !important;

    line-height: 1.2 !important;

    font-weight: 600 !important;

    letter-spacing: 1.8px !important;

    text-transform: uppercase !important;

    color:
        rgba(255,255,255,0.88) !important;
}


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

.tgc2026x-price strong,
.tgc2026n-price strong {

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 34px !important;

    line-height: 1 !important;

    font-weight: 500 !important;

    letter-spacing: -0.5px !important;

    color: #ffffff !important;
}


/* =========================================================
   BOOK NOW BUTTON
========================================================= */

.tgc2026x-button,
.tgc2026n-button {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    height: 52px !important;

    margin: 0 !important;

    padding:
        0 19px 0 21px !important;

    background: #ffffff !important;

    color: #3c2211 !important;

    border: 0 !important;

    border-radius: 2px !important;

    outline: none !important;

    box-shadow: none !important;

    text-decoration: none !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 12px !important;

    line-height: 1 !important;

    font-weight: 600 !important;

    letter-spacing: 0.7px !important;

    text-transform: uppercase !important;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease !important;
}


/* =========================================================
   BUTTON ARROW
========================================================= */

.tgc2026x-button b,
.tgc2026n-button b {

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 22px !important;

    line-height: 1 !important;

    font-weight: 300 !important;

    color: #b66a42 !important;

    transition:
        transform 0.3s ease,
        color 0.3s ease !important;
}


/* =========================================================
   BOOK BUTTON HOVER
========================================================= */

.tgc2026x-button:hover,
.tgc2026n-button:hover {

    background: #3c2211 !important;

    color: #ffffff !important;

    transform:
        translateY(-2px) !important;
}


.tgc2026x-button:hover b,
.tgc2026n-button:hover b {

    color: #ffffff !important;

    transform:
        translateX(4px) !important;
}


/* =========================================================
   VIEW ALL SERVICES
========================================================= */

.tgc2026x-view-wrap,
.tgc2026n-view-wrap {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    margin: 10px 0 0 !important;

    padding: 0 !important;

    position: relative !important;

    z-index: 5 !important;
}


.tgc2026x-view-button,
.tgc2026n-view-button {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 20px !important;

    min-width: 235px !important;

    height: 54px !important;

    padding: 0 24px !important;

    background: #b66a42 !important;

    color: #ffffff !important;

    border: 1px solid #b66a42 !important;

    border-radius: 0 !important;

    text-decoration: none !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 12px !important;

    line-height: 1 !important;

    font-weight: 600 !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    box-shadow:
        0 10px 25px
        rgba(70,38,22,0.14) !important;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}


.tgc2026x-view-button b,
.tgc2026n-view-button b {

    display: block !important;

    font-size: 22px !important;

    font-weight: 300 !important;

    line-height: 1 !important;

    color: #ffffff !important;

    transition:
        transform 0.3s ease !important;
}


/* =========================================================
   VIEW ALL HOVER
========================================================= */

.tgc2026x-view-button:hover,
.tgc2026n-view-button:hover {

    background: #3c2211 !important;

    border-color: #3c2211 !important;

    color: #ffffff !important;

    transform:
        translateY(-3px) !important;

    box-shadow:
        0 15px 30px
        rgba(70,38,22,0.20) !important;
}


.tgc2026x-view-button:hover b,
.tgc2026n-view-button:hover b {

    transform:
        translateX(5px) !important;
}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {

    .tgc2026x-grid,
    .tgc2026n-grid {

        column-gap: 40px !important;

        row-gap: 80px !important;
    }

    .tgc2026x-panel,
    .tgc2026n-panel {

        width: calc(100% - 25px) !important;

        min-height: 380px !important;

        margin-top: -68px !important;

        padding:
            27px 24px 25px !important;
    }

    .tgc2026x-panel h3,
    .tgc2026n-panel h3 {

        font-size: 24px !important;
    }

    .tgc2026x-price strong,
    .tgc2026n-price strong {

        font-size: 31px !important;
    }
}


/* =========================================================
   TABLET — 2 COLUMNS
========================================================= */

@media (max-width: 1100px) {

    .tgc2026x-services,
    .tgc2026n-services {

        padding:
            0 25px 80px !important;
    }

    .tgc2026x-grid,
    .tgc2026n-grid {

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

        column-gap: 45px !important;

        row-gap: 70px !important;
    }

    .tgc2026x-panel,
    .tgc2026n-panel {

        width: calc(100% - 25px) !important;

        min-height: 370px !important;

        margin-top: -62px !important;

        padding:
            27px 25px 24px !important;
    }
}


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

@media (max-width: 850px) {

    .tgc2026x-grid,
    .tgc2026n-grid {

        column-gap: 30px !important;

        row-gap: 60px !important;
    }

    .tgc2026x-panel,
    .tgc2026n-panel {

        width: calc(100% - 18px) !important;

        min-height: 350px !important;

        margin-top: -52px !important;

        padding:
            24px 21px 22px !important;
    }

    .tgc2026x-panel h3,
    .tgc2026n-panel h3 {

        font-size: 22px !important;
    }

    .tgc2026x-panel p,
    .tgc2026n-panel p {

        font-size: 13px !important;
    }
}


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

@media (max-width: 767px) {

    .tgc2026x-services,
    .tgc2026n-services {

        padding:
            0 20px 60px !important;
    }

    .tgc2026x-grid,
    .tgc2026n-grid {

        grid-template-columns: 1fr !important;

        gap: 35px !important;

        width: 100% !important;

        max-width: 520px !important;

        margin: 0 auto !important;
    }

    .tgc2026x-card,
    .tgc2026n-card {

        padding-bottom: 20px !important;
    }

    .tgc2026x-photo,
    .tgc2026n-photo {

        width: 100% !important;

        height: auto !important;
    }

    .tgc2026x-photo img,
    .tgc2026n-photo img {

        width: 100% !important;

        height: auto !important;

        max-width: 100% !important;

        object-fit: contain !important;

        aspect-ratio: auto !important;
    }

    .tgc2026x-panel,
    .tgc2026n-panel {

        width: 94% !important;

        min-height: 0 !important;

        margin-top: -52px !important;

        margin-left: 0 !important;

        padding:
            25px 22px 23px !important;

        border-radius:
            0 45px 0 45px !important;
    }

    .tgc2026x-number,
    .tgc2026n-number {

        font-size: 16px !important;

        margin-bottom: 10px !important;
    }

    .tgc2026x-panel h3,
    .tgc2026n-panel h3 {

        font-size: 25px !important;

        line-height: 1.18 !important;
    }

    .tgc2026x-line,
    .tgc2026n-line {

        margin:
            16px 0 14px !important;
    }

    .tgc2026x-panel p,
    .tgc2026n-panel p {

        min-height: 0 !important;

        font-size: 13px !important;

        line-height: 1.45 !important;
    }

    .tgc2026x-price,
    .tgc2026n-price {

        margin:
            18px 0 16px !important;

        padding:
            12px 10px !important;
    }

    .tgc2026x-price strong,
    .tgc2026n-price strong {

        font-size: 29px !important;
    }

    .tgc2026x-button,
    .tgc2026n-button {

        height: 49px !important;
    }

    .tgc2026x-view-wrap,
    .tgc2026n-view-wrap {

        margin-top: 5px !important;
    }

    .tgc2026x-view-button,
    .tgc2026n-view-button {

        min-width: 220px !important;

        height: 51px !important;

        gap: 14px !important;

        font-size: 11px !important;
    }
}


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

@media (max-width: 480px) {

    .tgc2026x-services,
    .tgc2026n-services {

        padding:
            0 15px 50px !important;
    }

    .tgc2026x-grid,
    .tgc2026n-grid {

        gap: 25px !important;
    }

    .tgc2026x-card,
    .tgc2026n-card {

        padding-bottom: 8px !important;
    }

    .tgc2026x-panel,
    .tgc2026n-panel {

        width: 94% !important;

        margin-top: -45px !important;

        padding:
            22px 19px 20px !important;

        border-radius:
            0 40px 0 40px !important;
    }

    .tgc2026x-panel h3,
    .tgc2026n-panel h3 {

        font-size: 23px !important;
    }

    .tgc2026x-panel p,
    .tgc2026n-panel p {

        font-size: 12.5px !important;

        line-height: 1.45 !important;
    }

    .tgc2026x-price,
    .tgc2026n-price {

        margin:
            16px 0 14px !important;

        padding:
            11px 9px !important;
    }

    .tgc2026x-price strong,
    .tgc2026n-price strong {

        font-size: 27px !important;
    }

    .tgc2026x-button,
    .tgc2026n-button {

        height: 47px !important;

        padding:
            0 16px 0 18px !important;

        font-size: 11px !important;
    }

    .tgc2026x-button b,
    .tgc2026n-button b {

        font-size: 20px !important;
    }

    .tgc2026x-view-button,
    .tgc2026n-view-button {

        width: 100% !important;

        max-width: 250px !important;

        min-width: 0 !important;

        height: 50px !important;

        gap: 14px !important;

        font-size: 10.5px !important;
    }
}


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

@media (max-width: 360px) {

    .tgc2026x-services,
    .tgc2026n-services {

        padding-left: 12px !important;

        padding-right: 12px !important;

        padding-bottom: 45px !important;
    }

    .tgc2026x-grid,
    .tgc2026n-grid {

        gap: 20px !important;
    }

    .tgc2026x-panel,
    .tgc2026n-panel {

        width: 94% !important;

        margin-top: -40px !important;

        padding:
            20px 17px 18px !important;

        border-radius:
            0 36px 0 36px !important;
    }

    .tgc2026x-panel h3,
    .tgc2026n-panel h3 {

        font-size: 21px !important;
    }

    .tgc2026x-panel p,
    .tgc2026n-panel p {

        font-size: 12px !important;
    }

    .tgc2026x-price strong,
    .tgc2026n-price strong {

        font-size: 26px !important;
    }

    .tgc2026x-button,
    .tgc2026n-button {

        height: 45px !important;
    }

    .tgc2026x-view-button,
    .tgc2026n-view-button {

        height: 48px !important;

        font-size: 10px !important;
    }
}


/* =========================================================
   FINAL WORDPRESS / ELEMENTOR IMAGE PROTECTION
========================================================= */

.tgc2026x-services .tgc2026x-photo img,
.tgc2026n-services .tgc2026n-photo img {

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    object-position: center center !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    vertical-align: top !important;
}


/* =========================================================
   ELEMENTOR HEADING PROTECTION
========================================================= */

.tgc2026x-services .tgc2026x-panel h3,
.tgc2026n-services .tgc2026n-panel h3 {

    color: #ffffff !important;

    margin-top: 0 !important;

    margin-right: 0 !important;

    margin-bottom: 0 !important;

    margin-left: 0 !important;
}


/* =========================================================
   LINK PROTECTION
========================================================= */

.tgc2026x-services .tgc2026x-button,
.tgc2026n-services .tgc2026n-button {

    text-decoration: none !important;

    color: #3c2211 !important;
}


.tgc2026x-services .tgc2026x-button:hover,
.tgc2026n-services .tgc2026n-button:hover {

    color: #ffffff !important;
}


.tgc2026x-services .tgc2026x-view-button,
.tgc2026n-services .tgc2026n-view-button {

    text-decoration: none !important;

    color: #ffffff !important;
}


/* =========================================================
   FINAL OVERFLOW
========================================================= */

.tgc2026x-services,
.tgc2026x-container,
.tgc2026x-grid,
.tgc2026x-card,
.tgc2026x-photo,

.tgc2026n-services,
.tgc2026n-container,
.tgc2026n-grid,
.tgc2026n-card,
.tgc2026n-photo {

    overflow: visible !important;
}