/* =========================================================
   HCEL CHILD THEME
   Custom CSS
   ========================================================= */


/* ---------------------------------------------------------
   Global Variables
--------------------------------------------------------- */

:root {
    /* Brand colours */
    --primary-color: #00AEEF;
    --article-heading-color: #ffffff;
    --secondary-grey: #58595b;

    /* Typography */
    --font-rift: 'Rift', sans-serif;
    --font-helvetica: 'HelveticaNeue', Arial, sans-serif;

    /*
     * Client supplied sizes converted approximately:
     *
     * 108pt = 144px
     * 50pt  = 67px
     * 34pt  = 45px
     * 24pt  = 32px
     *
     * clamp() allows these to scale down responsively.
     */

    --font-size-main-heading: clamp(72px, 9vw, 108px);
    --font-size-heading-2: clamp(40px, 4.5vw, 67px);
    --font-size-subheading: clamp(30px, 3vw, 45px);
    --font-size-body: clamp(16px, 1.6vw, 18px);
}



/* =========================================================
   FONTS
   ========================================================= */


/* ---------------------------------------------------------
   Rift
--------------------------------------------------------- */

@font-face {
    font-family: 'Rift';
    src: url('../fonts/Rift/RiftMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* ---------------------------------------------------------
   Helvetica Neue
--------------------------------------------------------- */


/* Regular / Roman */

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Roman.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* Italic */

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-It.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


/* Bold */

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Bd.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* Bold Italic */

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BdIt.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}



/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */


/*
 * Body Copy
 *
 * Client:
 * Helvetica Neue Roman
 * Sentence case
 * 24pt
 */

body {
    font-family: var(--font-helvetica);
    font-weight: 400;
    font-style: normal;
}


/*
 * Optional body-copy class.
 *
 * Use this where the client's larger body-copy treatment
 * is specifically required.
 */

.hcel-body {
    font-family: var(--font-helvetica);
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size-body);
    line-height: 1.45;
    text-transform: none;
}



/* =========================================================
   CLIENT TYPOGRAPHY STYLES
   ========================================================= */


/* ---------------------------------------------------------
   Main Heading
--------------------------------------------------------- */

/*
 * Examples:
 * MAKE IT COUNT
 * SERVICES
 *
 * Client:
 * Rift Demi
 * ALL CAPS
 * 108pt
 *
 * NOTE:
 * Current font file is RiftMedium.otf.
 * If the actual Rift Demi font is supplied later,
 * replace the font file / weight accordingly.
 */

.hcel-main-heading {
    font-family: var(--font-rift);
    font-weight: 500;
    font-style: normal;
    font-size: var(--font-size-main-heading);
    line-height: 0.9;
    text-transform: uppercase;
}
.hcel-main-heading-article-title {
    color: var(--article-heading-color);
    font-size: calc(var(--font-size-main-heading)* 0.7);
}

/* ---------------------------------------------------------
   Heading 2
--------------------------------------------------------- */

/*
 * Examples:
 * OUR SERVICES
 * OUR TEAM
 * GET A FREE QUOTE
 *
 * Client:
 * Helvetica Neue Bold
 * ALL CAPS
 * 50pt
 */

.hcel-heading-2 {
    font-family: var(--font-helvetica);
    font-weight: 700;
    font-style: normal;
    font-size: var(--font-size-heading-2);
    line-height: 1;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Sub Heading / Services Heading
--------------------------------------------------------- */

/*
 * Examples:
 * any project, from start to finish
 *
 * Residential & New Construction Electrical
 * Data & CCTV
 *
 * Client:
 * Helvetica Neue Bold
 * 34pt
 *
 * No text-transform is applied here.
 * Enter the required Sentence Case / Title Case
 * directly in YOOtheme.
 */

.hcel-subheading {
    font-family: var(--font-helvetica);
    font-weight: 700;
    font-style: normal;
    font-size: var(--font-size-subheading);
    line-height: 1.15;
    text-transform: none;
}
.hcel-subheading-primary {
    color: var(--primary-color);
}

.hcel-subheading h3.el-title {
    font-size: calc(var(--font-size-subheading)* 0.6);
    width: 80%;
}

/* =========================================================
   TICK LIST
   ========================================================= */

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

.hcel-tick-list > li {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 0.5em;
}

.hcel-tick-list > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color);
    font-weight: 700;
}


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

.uk-navbar-nav > li > a::before {
    background-color: var(--primary-color);
}



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

.el-link.uk-button-default {
    background: var(--primary-color);
    color: #fff;
    text-transform: uppercase;
    padding-top: 7px;
    font-weight: 900;
}

.hcel-button > a.uk-button.uk-button-default {
    background: var(--primary-color);
    color: #fff;
    text-transform: uppercase;
}
.hcel-button {
    padding-top: 7px;
    font-weight: 900;
}

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

.fp-service-card .uk-position-top-left {
    inset: 0;
}

.fp-service-card .uk-position-top-left > .uk-panel {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.fp-service-card .uk-position-top-left > .uk-panel > .uk-margin-xlarge-top {
    margin-top: auto !important;
}


.fp-service-card .uk-inline-clip {
    border-radius: 20px;
}

.fp-service-card .el-image {
    
    aspect-ratio: 3 / 4;
}

/* =========================================================
   SOFT IMAGES
   ========================================================= */

.about img.el-image {
    border-radius: 20px;
}

.hcel-soft-image .uk-container {
    padding-right: 0 !important;
}

.hcel-soft-image > img.el-image {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 6%,
        rgba(0, 0, 0, 0.75) 12%,
        #000 20%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 6%,
        rgba(0, 0, 0, 0.75) 12%,
        #000 20%
    );
}

@media (max-width: 639px) {
    .copyright p {
        font-size: 80%;
        text-align: center;
    }
    .legal {
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    footer .uk-button-large {
        padding: 0 25px;
        line-height: 28px;
        font-size: 16px;
    }
}