/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    /* =====================================================
           PRIMARY COLORS
        ===================================================== */

    --primary-gold: rgb(245, 198, 69);

    /* =====================================================
           BASIC COLORS
        ===================================================== */

    --black: #000000;

    --white: #ffffff;

    --text-dark: #000000;

    --body-color: #000000;

    --body-bg: #ffffff;

    /* =====================================================
           LIGHT COLORS
        ===================================================== */

    --light-bg: #f6f8fb;

    --light-text: #172033;

    --light-text-secondary: #5f6878;

    --light-label: #263247;

    --light-border: #d9dee8;

    /* =====================================================
           GRADIENTS
        ===================================================== */

    --gradient-start: #171717;

    --gradient-middle: #0d0d0d;

    --gradient-end: #050505;

    --gradient-dark-start: #1b1e23;

    --gradient-dark-middle: #15171b;

    --gradient-dark-end: #101114;

    /* =====================================================
           BORDERS
        ===================================================== */

    --border-color: rgb(228, 170, 13);

    --border-gold-light: rgba(255, 196, 0, 0.87);

    --border-gold-medium: rgba(212, 175, 55, 0.45);

    --border-gold-strong: rgba(212, 175, 55, 0.65);

    --box-shadow: rgba(25, 35, 60, 0.1);

    /* =====================================================
           BLACK / OVERLAY
        ===================================================== */

    --black-overlay-darker: rgba(0, 0, 0, 0.78);

    --black-overlay-heavy: rgba(0, 0, 0, 0.88);

    --shadow-black-medium: rgba(0, 0, 0, 0.30);

    /* =====================================================
           WHATSAPP
        ===================================================== */

    --whatsapp-bg: #2c665f;

    --whatsapp-hover: #499990;

    /* =====================================================
           SHADOWS
        ===================================================== */

    --focus-gold-shadow:
            0 0 0 4px rgba(212, 160, 23, 0.14);

    /* =====================================================
           TYPOGRAPHY SCALE
        ===================================================== */

    --font-size-sm: 0.875rem;

    /* =====================================================
           FONT WEIGHTS
        ===================================================== */

    --font-weight-normal: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    --font-weight-extrabold: 800;

    --font-weight-black: 900;

    /* =====================================================
           LINE HEIGHTS
        ===================================================== */

    --line-height-tight: 1;

    --line-height-heading: 1.2;

    --line-height-normal: 1.5;

    --line-height-loose: 1.7;

    --line-height-content: 1.8;

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

    --space-1: 0.25rem;

    --space-2: 0.5rem;

    --space-4: 1.5rem;

    /* =====================================================
           RADIUS
        ===================================================== */

    --radius-md: 6px;

    --radius-circle: 50%;

    /* =====================================================
           TRANSITIONS
        ===================================================== */

    --transition-fast: 0.2s ease;

    --transition-normal: 0.3s ease;

    --transition-medium: 0.4s ease;

    --transition-slow: 0.5s ease;

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

    --divider-width: 400px;

    --divider-height: 5px;

    /* =====================================================
          About
        ===================================================== */

    --about-muted-size : 25px;

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

    --service-card-border-width: 3px;

    --service-card-radius: 20px;

    --service-card-hover-y: -6px;

    --service-card-image-height: 250px;

    --service-card-body-min-height: 250px;

    --service-card-body-padding: 20px 18px 22px;

    --service-card-top-line-left: 18px;

    --service-card-top-line-width: 45px;

    --service-card-top-line-height: 2px;

    --service-card-subcategory-size: 11px;

    --service-card-title-size: 22px;

    --service-card-description-size: 16px;

    --service-card-button-padding: 10px 22px;

    --service-card-button-radius: 4px;

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

    --service-decoration-top: -80px;

    --service-decoration-right: -90px;

    --service-decoration-width: 230px;

    --service-decoration-height: 300px;

    --service-decoration-rotation: 22deg;

    --service-decoration-bottom: -100px;

    --service-decoration-left: -100px;

    --service-decoration-bottom-height: 260px;

    --service-decoration-border-width: 2px;

    --service-decoration-bottom-rotation: -28deg;

    /* =====================================================
           SERVICE DETAIL
        ===================================================== */

    --service-detail-padding-y: 100px;

    --service-main-row-margin-bottom: 45px;

    --main-media-height: 675px;

    --service-short-padding: 25px 10px;

    --service-short-title-size: 30px;

    --service-short-description-size: 20px;

    --service-full-description-margin-top: 25px;

    --service-full-description-margin-bottom: 50px;

    --service-full-description-title-size: 28px;

    /* =====================================================
           SERVICE MEDIA
        ===================================================== */

    --service-media-section-margin-y: 55px;

    --service-media-heading-margin-bottom: 20px;

    --service-media-heading-size: 40px;

    --service-media-card-height: 250px;

    --service-media-card-radius: 20px;

    --service-media-decoration-top: -70px;

    --service-media-decoration-right: -80px;

    --service-media-decoration-width: 180px;

    --service-media-decoration-height: 230px;

    --service-media-decoration-rotation: 22deg;

    --service-media-bottom-line-height: 3px;

    /* =====================================================
           VIDEO
        ===================================================== */

    --video-play-button-size: 62px;

    --video-play-button-border-width: 2px;

    --main-video-play-size: 70px;

    --video-overlay-light: rgba(0, 0, 0, 0.08);

    --video-overlay-hover: rgba(0, 0, 0, 0.25);

    /* =====================================================
           VIDEO MODAL
        ===================================================== */

    --video-modal-padding: 30px;

    --video-modal-content-width: min(1000px, 95vw);

    --video-modal-content-padding: 12px;

    --video-modal-radius: 20px;

    --video-modal-wrapper-radius: 12px;

    --video-modal-close-size: 38px;

    --video-modal-close-top: -45px;

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

    --category-filter-margin-bottom: 35px;

    --category-filter-gap: 10px;

    --filter-button-min-height: 42px;

    --filter-button-padding: 9px 20px;

    --filter-button-border-width: 2px;

    --filter-button-radius: 30px;

    --filter-button-font-size: 14px;

    --category-button-padding: 10px 22px;

    --category-button-radius: 22px;

    --category-button-font-size: 15px;

    /* =====================================================
           SLICK
        ===================================================== */

    --slick-arrow-left: -28px;

    --slick-arrow-right: -28px;

    --slick-icon-size: 36px;

    --slick-mobile-arrow-size: 40px;

    --slick-mobile-icon-size: 30px;

    /* =====================================================
           REVIEWS
        ===================================================== */

    --reviews-wrapper-padding: 10px 5px 20px;

    --review-slide-padding: 12px;

    --review-card-min-height: 330px;

    --review-card-padding: 28px 26px;

    --review-card-radius: 14px;

    --review-card-border-width: 3px;

    --review-avatar-size: 52px;

    --review-author-gap: 13px;

    --review-author-margin-bottom: 18px;

    --review-stars-margin-bottom: 18px;

    --review-text-size: 15px;

    --review-text-line-height: 1.75;

    --review-quote-size: 110px;

    /* =====================================================
           FACTS
        ===================================================== */

    --facts-padding-y: 90px;

    --facts-heading-margin-bottom: 55px;

    --facts-heading-size: 46px;

    --fact-item-padding: 15px 35px 10px;

    --fact-number-size: 64px;

    --fact-number-min-height: 85px;

    --fact-suffix-size: 40px;

    --fact-title-size: 22px;

    --fact-description-size: 15px;

    --fact-line-width: 35px;

    --fact-line-height: 3px;

    /* =====================================================
           SUBCATEGORY
        ===================================================== */

    --subcategory-grid-gap: 30px;

    --subcategory-image-height: 300px;

    --subcategory-body-padding: 15px;

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

    --contact-section-padding: 80px 20px;

    --contact-max-width: 1120px;

    --contact-gap: 48px;

    --contact-title-size: 42px;

    --contact-description-size: 17px;

    --contact-form-padding: 34px;

    --contact-form-radius: 8px;

    --contact-input-padding: 13px 14px;

    --contact-input-radius: 6px;

    --contact-button-padding: 14px 18px;

    /* =====================================================
        CONTACT VALIDATION / STATUS
        ===================================================== */

    --contact-loader-size: 18px;

    --contact-loader-border-width: 2px;

    --contact-loader-border-color: rgba(255, 255, 255, 0.45);

    --contact-loader-top-color: #ffffff;

    --contact-loader-margin-left: 8px;

    --contact-loader-vertical-align: -4px;

    --contact-loader-animation-duration: 0.75s;

    --contact-status-margin-bottom: 20px;

    --contact-status-padding: 12px 15px;

    --contact-status-radius: 4px;

    --contact-status-font-size: 14px;

    --contact-status-line-height: 1.5;

    --contact-status-success-bg: #e8f7ee;

    --contact-status-success-color: #198754;

    --contact-status-success-border: #b7e4c7;

    --contact-status-error-bg: #fdecec;

    --contact-status-error-color: #dc3545;

    --contact-status-error-border: #f5c2c7;

    /* =====================================================
        CONTACT FIELD ERRORS
        ===================================================== */

    --contact-error-color: #dc3545;

    --contact-error-font-size: 14px;

    --contact-error-line-height: 1.4;

    --contact-error-margin-top: 5px;

    /* =====================================================
        CONTACT BUTTON LOADING
        ===================================================== */

    --contact-button-loading-opacity: 0.9;

    --contact-button-disabled-opacity: 0.8;

    /* =====================================================
           WHATSAPP
        ===================================================== */

    --whatsapp-right: 20px;

    --whatsapp-bottom: 20px;

    --whatsapp-padding: 10px 20px;

    --whatsapp-radius: 50px;

    --whatsapp-icon-size: 40px;

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

    --footer-padding-top: 50px;

    --footer-padding-bottom: 25px;

    /* =====================================================
        NAVBAR
        ===================================================== */

    --navbar-height: 60px;

    --navbar-padding: 15px 30px;

    --navbar-hover-color: var(--primary-gold);

    --navbar-dropdown-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    --navbar-transition: var(--transition-normal);

    --navbar-hover-transition: var(--transition-fast);

    --navbar-logo-width: 300px;

    --navbar-menu-gap: 25px;

    --navbar-menu-link-padding: 8px 0;

    --navbar-menu-font-size: 25px;

    --navbar-menu-font-weight: var(--font-weight-medium);

    --navbar-underline-width: 0;

    --navbar-underline-height: 2px;

    --navbar-language-margin-left: 20px;

    --navbar-language-gap: 7px;

    --navbar-language-padding: 8px 0;

    --navbar-language-font-size: 20px;

    --navbar-language-arrow-size: 10px;

    --navbar-dropdown-min-width: 130px;

    --navbar-dropdown-radius: 4px;

    --navbar-dropdown-padding: 6px 0;

    --navbar-dropdown-offset: 8px;

    --navbar-dropdown-z-index: 2000;

    --navbar-dropdown-text: #333333;

    --navbar-dropdown-hover-bg: var(--primary-gold);

    --navbar-dropdown-hover-text: var(--black);

    --navbar-dropdown-active-bg: #f3f3f3;

    --navbar-dropdown-active-text: var(--primary-gold);

    --mobile-navbar-height: 50px;

    --mobile-navbar-padding: 10px 20px;

    --mobile-menu-button-size: 26px;

    --mobile-menu-button-padding: 5px;

    --mobile-menu-width: 82%;

    --mobile-menu-max-width: 360px;

    --mobile-menu-padding: 90px 25px 30px;

    --mobile-menu-transition: 0.35s ease;

    --mobile-menu-link-padding: 15px 5px;

    --mobile-menu-link-font-size: 17px;

    --mobile-menu-link-font-weight: var(--font-weight-medium);

    --mobile-menu-link-hover-padding-left: 15px;

    --mobile-menu-underline-bottom: 7px;

    --mobile-menu-underline-height: 2px;

    --mobile-language-margin-top: 10px;

    --mobile-language-border: 1px solid rgba(255, 255, 255, 0.15);

    --mobile-language-padding-top: 10px;

    --mobile-language-gap: 9px;

    --mobile-language-dropdown-padding: 5px 0 8px 15px;

    --mobile-language-option-padding: 11px 10px;

    --mobile-language-option-font-size: 15px;

    --navbar-1400-padding-x: 25px;

    --navbar-1400-menu-gap: 20px;

    --navbar-1400-menu-font-size: 15px;

    --navbar-1400-language-margin-left: 15px;

    --navbar-1200-padding-x: 20px;

    --navbar-1200-menu-gap: 15px;

    --navbar-1200-menu-font-size: 14px;

    --navbar-1200-language-margin-left: 10px;

    --navbar-1200-language-font-size: 14px;

    --navbar-1000-padding-x: 15px;

    --navbar-1000-menu-gap: 12px;

    --navbar-1000-menu-font-size: 13px;

    --navbar-1000-language-margin-left: 8px;

    --navbar-1000-language-font-size: 13px;

    --navbar-900-menu-gap: 10px;

    --navbar-900-menu-font-size: 12px;

    --navbar-900-language-font-size: 12px;

    --mobile-576-height: 30px;

    --mobile-576-padding: 8px 15px;

    --mobile-576-logo-width: 200px;

    --mobile-576-menu-button-size: 24px;

    --mobile-576-menu-width: 85%;

    --mobile-576-menu-horizontal-padding: 20px;

    --mobile-576-link-font-size: 16px;

    --mobile-576-link-padding-y: 14px;

    --mobile-400-height: 20px;

    --mobile-400-padding: 8px 12px;

    --mobile-400-logo-width: 200px;

    --mobile-400-menu-button-size: 22px;

    --mobile-400-menu-width: 88%;

    --mobile-400-menu-horizontal-padding: 18px;

    --mobile-400-link-font-size: 15px;

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

    --hero-height-min: 380px;

    --hero-height-vh: 70vh;

    --hero-height-max: 85vh;

    /* =====================================================
        HERO TABLET
        577px - 992px
        ===================================================== */

    --hero-tablet-height-min: 320px;

    --hero-tablet-height-vh: 65vh;

    --hero-tablet-height-max: 560px;

    /* =====================================================
        HERO MOBILE
        577px - 768px
        ===================================================== */

    --hero-mobile-height-min: 320px;

    --hero-mobile-height-vh: 65vh;

    --hero-mobile-height-max: 560px;

    /* =====================================================
        HERO MOBILE 576px
        ===================================================== */

    --hero-mobile-sm-height-min: 280px;

    --hero-mobile-sm-height-vh: 60vh;

    --hero-mobile-sm-height-max: 480px;

    /* =====================================================
        HERO MOBILE 500px
        ===================================================== */

    --hero-mobile-xs-height-min: 280px;

    --hero-mobile-xs-height-vh: 58vh;

    --hero-mobile-xs-height-max: 450px;

}


/* =========================================================
   02. GLOBAL RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    font-family: 'Patrick Hand', cursive;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: var(--bs-body-bg);
}


/* =========================================================
   03. GLOBAL FONT
========================================================= */

body,
button,
input,
textarea,
select,
option,
a,
p,
span,
label,
li,
small,
strong,
em,
div {
    font-family: 'Patrick Hand', cursive;
}


/* =========================================================
   04. HEADINGS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    font-family: 'Patrick Hand', cursive;

    color: var(--primary-gold);
}

h1 {
    font-size: 1.5rem;
}


/* =========================================================
   05. LINKS
========================================================= */

a {
    color: inherit;
    text-decoration: none;

    transition: color var(--transition-normal);
}

a:hover,
a:focus {
    text-decoration: none;
}


/* =========================================================
   06. IMAGES / SVG
========================================================= */

img,
svg {
    vertical-align: middle;
}

img {
    display: block;

    max-width: 100%;
    height: auto;
}


/* =========================================================
   07. FORM ELEMENTS
========================================================= */

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   08. TYPOGRAPHY
========================================================= */

.text-muted {
    color: var(--white);
}

.title-color {
    color: var(--primary-gold);

    text-align: center;

    font-size: 50px;
    font-weight: var(--font-weight-normal);
}

.title-color a {
    color: var(--white);
}

.title-color span {
    color: var(--dark);
}

.about-block .title-color span {
    color: var(--white);
}


/* =========================================================
   09. CONTAINER
========================================================= */

.container,
.container-fluid {
    width: 100%;

    padding-right: calc(1.5rem * 0.5);
    padding-left: calc(1.5rem * 0.5);

    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}


/* =========================================================
   10. GRID
========================================================= */

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;

    display: flex;
    flex-wrap: wrap;

    margin-top: calc(-1 * 0);
    margin-right: calc(-0.5 * 1.5rem);
    margin-left: calc(-0.5 * 1.5rem);
}

.row > * {
    width: 100%;
    max-width: 100%;

    padding-right: calc(1.5rem * 0.5);
    padding-left: calc(1.5rem * 0.5);

    margin-top: 0;
}


/* =========================================================
   11. BASIC COLUMNS
========================================================= */

.col {
    flex: 1 0 0%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.333333%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}


/* =========================================================
   12. RESPONSIVE COLUMNS
========================================================= */

@media (min-width: 576px) {

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (min-width: 768px) {

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (min-width: 992px) {

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (min-width: 1200px) {

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}


/* =========================================================
   13. DISPLAY UTILITIES
========================================================= */

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}


/* =========================================================
   14. FLEX UTILITIES
========================================================= */

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}


/* =========================================================
   15. TEXT UTILITIES
========================================================= */

.text-start {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: right;
}

.fw-normal {
    font-weight: var(--font-weight-normal);
}

.fw-medium {
    font-weight: var(--font-weight-medium);
}

.fw-semibold {
    font-weight: var(--font-weight-semibold);
}

.fw-bold {
    font-weight: var(--font-weight-bold);
}

.text-white {
    color: var(--white);
}

.text-dark {
    color: var(--body-color);
}

.text-decoration-none {
    text-decoration: none;
}


/* =========================================================
   16. SPACING UTILITIES
========================================================= */

.m-0 {
    margin: 0;
}

.mt-0 {
    margin-top: 0;
}

.me-0 {
    margin-right: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.ms-0 {
    margin-left: 0;
}

.mt-1 {
    margin-top: var(--space-1);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-5 {
    margin-top: 6rem;
}

.mb-1 {
    margin-bottom: var(--space-1);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-5 {
    margin-bottom: 6rem;
}

.ms-auto {
    margin-left: auto;
}

.me-auto {
    margin-right: auto;
}

.mx-auto {
    margin-right: auto;
    margin-left: auto;
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: var(--space-1);
}

.p-2 {
    padding: var(--space-2);
}

.p-3 {
    padding: 1rem;
}

.p-4 {
    padding: var(--space-4);
}

.p-5 {
    padding: 6rem;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.py-5 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.px-3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.px-5 {
    padding-left: 6rem;
    padding-right: 6rem;
}


/* =========================================================
   17. VISIBILITY / SIZING
========================================================= */

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.overflow-hidden {
    overflow: hidden;
}


/* =========================================================
   18. RESPONSIVE DISPLAY
========================================================= */

@media (min-width: 576px) {

    .d-sm-none {
        display: none;
    }

    .d-sm-block {
        display: block;
    }

    .d-sm-flex {
        display: flex;
    }
}

@media (min-width: 768px) {

    .d-md-none {
        display: none;
    }

    .d-md-block {
        display: block;
    }

    .d-md-flex {
        display: flex;
    }
}

@media (min-width: 992px) {

    .d-lg-none {
        display: none;
    }

    .d-lg-block {
        display: block;
    }

    .d-lg-flex {
        display: flex;
    }
}

@media (min-width: 1200px) {

    .d-xl-none {
        display: none;
    }

    .d-xl-block {
        display: block;
    }

    .d-xl-flex {
        display: flex;
    }
}


/* =========================================================
   19. LIST UTILITIES
========================================================= */

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline {
    padding-left: 0;
    margin-left: -0.5rem;
    list-style: none;
}

.list-inline-item {
    display: inline-block;
}

.list-inline-item:not(:last-child) {
    margin-right: var(--space-2);
}


/* =========================================================
   20. COMMON BUTTON
========================================================= */

.btn {
    display: inline-block;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   21. COMMON DIVIDER
========================================================= */

.divider-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider {
    width: var(--divider-width);
    height: var(--divider-height);
    background-color: var(--primary-gold);
    margin: 1rem;
}


/* =========================================================
   22. VIDEO / IFRAME
========================================================= */

.video-wrapper {
    position: relative;

    width: 100%;

    padding-top: 56.25%;

    overflow: hidden;
}

.responsive-iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   23. GENERAL SECTIONS
========================================================= */
.section-3 {
    background-color: var(--text-dark);
}
.section-3 .title-color {
    color: var(--white);
}

.section-8 {
    overflow: hidden;
}

.section-8 .image-red-background {
    margin-bottom: 1.5rem;
}

.section-8 .image-wrapper {
    position: relative;

    width: 100%;

    overflow: hidden;
}

.section-8 .image-wrapper img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: cover;

    border-radius: 8px;
}

.section-8 .title-color span {
    color: var(--white);
}


/* =========================================================
   24. COMMON CARD
========================================================= */

.card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    padding: 1rem;

    word-wrap: break-word;

    background-color: var(--text-dark);
    background-clip: border-box;

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

    border-radius: 0.25rem;
}

.card-body {
    text-align: center;
}

.card-title a {
    display: block;

    height: 2.5em;

    text-align: center;

    font-weight: var(--font-weight-bold);
    font-size: 25px;

    color: var(--white);

    white-space: normal;
    word-wrap: break-word;
}

.card-text {
    height: 6em;

    overflow: hidden;

    font-size: 18px;
    line-height: var(--line-height-normal);

    color: var(--white);

    text-align: center;

    white-space: normal;
    word-wrap: break-word;
}

.card-one ul li a,
.call-now a {
    color: var(--white);
}


/* =========================================================
   25. ACCORDION
========================================================= */

.accordion-item {
    margin-bottom: 5px;
}

.accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.accordion-item:not(:first-of-type) {
    border-top: 1px solid var(--border-color);
}

.accordion-button {
    background: var(--text-dark);
    color: var(--white);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--white);
    background-color: var(--text-dark);
}

.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image:
        url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}




/* =========================================================
   27. SLICK SLIDER - CORE
========================================================= */

.slick-slider {
    position: relative;

    display: block;

    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;

    touch-action: pan-y;

    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;

    display: block;

    overflow: hidden;

    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;

    top: 0;
    left: 0;

    display: block;

    margin-left: auto;
    margin-right: auto;
}

.slick-track::before,
.slick-track::after {
    display: table;

    content: "";
}

.slick-track::after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;

    float: left;

    height: 100%;

    min-height: 1px;
}

[dir="rtl"] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
    width: 100%;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;

    height: auto;

    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}


/* =========================================================
   28. SLICK SLIDER - COMMON
========================================================= */

.services-slider,
.companies-slider,
.reviews-slider,
.service-gallery-slider,
.additional-videos-slider {
    position: relative;
    width: 100%;
}

.slick-prev::before,
.slick-next::before {
    display: none;
    content: "";
}

.slick-prev,
.slick-next {
    position: absolute;

    top: 50%;
    z-index: 50;

    display: flex;

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

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    transform: translateY(-50%);

    cursor: pointer;
}

.slick-prev {
    left: var(--slick-arrow-left);
}

.slick-next {
    right: var(--slick-arrow-right);
}

.slick-prev i,
.slick-next i {
    display: block;

    color: var(--primary-gold);

    font-size: var(--slick-icon-size);
    line-height: var(--line-height-tight);

    transition:
        color var(--transition-normal),
        transform var(--transition-normal);
}

.slick-prev:hover i {
    color: var(--border-gold-light);

    transform: translateX(-3px);
}

.slick-next:hover i {
    color: var(--border-gold-light);
    transform: translateX(3px);
}

.slick-prev:focus-visible,
.slick-next:focus-visible {
    outline: 2px solid var(--primary-gold);
    outline-offset: 4px;
}

.slick-disabled {
    opacity: 0.35;
}

.slick-dots {
    display: none;
}


/* =========================================================
   68. TABLET 1000px - 1200px
========================================================= */

@media (min-width: 1000px) and (max-width: 1200px) {

    .title-color {
        font-size: 40px;
    }

    .card-title a {
        font-size: 20px;
    }

    .card-text {
        font-size: 20px;
    }

    .slick-prev {
        left: -20px;
    }

    .slick-next {
        right: -20px;
    }
}


/* =========================================================
   69. TABLET 700px - 999px
========================================================= */

@media (min-width: 700px) and (max-width: 999px) {

    .title-color {
        font-size: 30px;
    }

    .section-4 .help-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .about-block {
        font-size: 1.1rem;
    }

    .card-title a {
        height: 3.5em;

        font-size: 25px;
    }

    .card-text {
        height: 4.8em;

        font-size: 23px;
    }

    .slick-prev,
    .slick-next {
        width: var(--slick-mobile-arrow-size);
        height: var(--slick-mobile-arrow-size);
    }
}


/* =========================================================
   70. TABLET / MOBILE SERVICE MEDIA
========================================================= */

@media (max-width: 1024px) {

    .service-gallery-slider .slick-prev,
    .additional-videos-slider .slick-prev {
        left: -20px;
    }

    .service-gallery-slider .slick-next,
    .additional-videos-slider .slick-next {
        right: -20px;
    }
}

@media (max-width: 999px) {

    .facts-section {
        padding: 70px 0;
    }

    .facts-heading h2 {
        font-size: 38px;
    }

    .fact-item {
        padding: 15px 20px;
    }

    .fact-number {
        font-size: 52px;
    }

    .counter-suffix {
        font-size: 32px;
    }

    .subcategory-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 25px;
    }

    .subcategory-service-item .card-img-top {
        height: 280px;
    }

    .review-slide {
        padding: 10px;
    }

    .google-review-card {
        min-height: 320px;

        padding: 24px 22px;
    }

    .google-review-card p {
        font-size: 14px;

        line-height: 1.65;
    }
}


/* =========================================================
   SERVICE DETAIL TABLET / SMALL DESKTOP MEDIA
========================================================= */

@media (max-width: 1199px) and (min-width: 769px) {

    .main-video-thumbnail,
    .main-service-image img {
        height: 540px;
    }
}


/* =========================================================
   71. MOBILE 768px
========================================================= */

@media (max-width: 768px) {

    .service-detail-section {
        padding: 35px 0;
    }

    .main-video-thumbnail,
    .main-service-image img {
        height: 405px;
    }

    .service-gallery-slider .slick-prev,
    .additional-videos-slider .slick-prev {
        left: -8px;
    }

    .service-gallery-slider .slick-next,
    .additional-videos-slider .slick-next {
        right: -8px;
    }

    .service-gallery-slider .slick-prev i,
    .service-gallery-slider .slick-next i,
    .additional-videos-slider .slick-prev i,
    .additional-videos-slider .slick-next i {
        font-size: var(--slick-mobile-icon-size);
    }

    .reviews-slider-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .review-slide {
        padding: 8px;
    }

    .google-review-card {
        min-height: 315px;

        padding: 23px 20px;
    }

    .google-review-author {
        margin-bottom: 16px;
    }

    .google-review-stars {
        margin-bottom: 16px;
    }

    .facts-section {
        padding: 60px 0;
    }

    .facts-heading {
        margin-bottom: 35px;
    }

    .facts-heading h2 {
        font-size: 30px;
    }

    .facts-row {
        display: block;
    }

    .fact-item {
        padding: 25px 20px 30px;

        border-right: 0 !important;

        border-bottom: 2px solid var(--border-gold-light);
    }

    .facts-row > div:last-child .fact-item {
        border-bottom: 0;
    }

    .fact-number {
        min-height: 65px;

        font-size: 48px;
    }

    .counter-suffix {
        font-size: 28px;
    }

    .fact-item h3 {
        font-size: 19px;
    }

    .fact-item p {
        font-size: 14px;
    }
}


/* =========================================================
   72. MOBILE 767px
========================================================= */

@media (max-width: 767px) {

    .title-color {
        font-size: 40px;
    }

    .footer-menu a:active {
        color: var(--primary-gold);
    }

    .footer-menu a:active::after {
        width: 100%;
    }
}


/* =========================================================
   73. MOBILE 576px
========================================================= */

@media (max-width: 576px) {

    .title-color {
        font-size: 32px;
    }

    .service-media-slide {
        padding: 8px;
    }

    .service-media-card,
    .service-video-thumbnail,
    .service-media-image,
    .service-video-thumbnail .service-media-image {
        height: 250px;
    }

    .service-video-play {
        width: 58px;
        height: 58px;
    }

    .service-video-play i {
        font-size: 18px;
    }

    .main-video-thumbnail,
    .main-service-image img {
        height: 320px;
    }

    .video-modal {
        padding: 15px;
    }

    .video-modal-content {
        width: 100%;

        padding: 7px;
    }

    .video-modal-close {
        top: -42px;
    }

    .service-action-btn {
        padding: 9px 18px;

        font-size: 14px;
    }

    .service-action-btn i {
        font-size: 12px;
    }

    .subcategory-services-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .subcategory-service-item .card-img-top {
        height: 300px;
    }

    .review-slide {
        padding: 7px;
    }

    .google-review-card {
        min-height: 300px;

        padding: 22px 19px;

        border-radius: 12px;
    }

    .google-review-author img,
    .google-review-avatar {
        width: 46px;
        height: 46px;
    }

    .google-review-avatar {
        font-size: 17px;
    }

    .google-review-author strong {
        font-size: 15px;
    }

    .google-review-author small {
        font-size: 11px;
    }

    .google-review-stars {
        font-size: 14px;

        gap: 3px;
    }

    .google-review-card p {
        font-size: 14px;

        line-height: 1.65;

        -webkit-line-clamp: 6;
    }

    .google-review-card::after {
        font-size: 85px;

        top: 8px;
        right: 15px;
    }
}

/* =========================================================
   76. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .google-review-card,
    .services-slider .slick-slide img,
    .reviews-slider .slick-slide img,
    .companies-slider .slick-slide img,
    .service-card-image-link .card-img-top,
    .case-study-service-card,
    .whatsapp-button,
    .footer-menu a,
    .footer-menu a::after,
    .filter-btn,
    .category-page-btn,
    .service-action-btn,
    .service-media-card,
    .service-media-image,
    .service-video-play,
    .main-video-card,
    .main-video-thumbnail img {
        transition: none;
    }

    .google-review-card:hover,
    .case-study-service-card:hover,
    .whatsapp-button:hover,
    .service-media-card:hover,
    .service-card:hover,
    .main-video-card:hover,
    .fact-item:hover {
        transform: none;
    }

    .services-slider .slick-slide img,
    .reviews-slider .slick-slide img,
    .companies-slider .slick-slide img,
    .service-card-image-link .card-img-top,
    .service-media-image,
    .main-video-thumbnail img {
        transform: none;
    }
}