@import './config';

html {
    /* Base Styles */
    --alpus-container-width: 1290px;
    --alpus-container-fluid-width: 1820px;
    --alpus-site-bg-color: #fff;
    --alpus-site-margin: 0;
    --alpus-site-gap: 0;

    /* Colors */
    --alpus-primary-color: #66ae4e;
    --alpus-primary-color-hover: #{lighten(#66ae4e, 5%)};
    --alpus-primary-color-dark: #{darken(#66ae4e, 3%)}; // Only using admin, unnecessary for dynamic_vars.php
    --alpus-primary-color-light: #{lighten(#66ae4e, 5%)}; // Only using admin, unnecessary for dynamic_vars.php
    --alpus-primary-color-op-80: rgba(102, 174, 78, 0.8);
    --alpus-secondary-color: #f93;
    --alpus-secondary-color-hover: #{lighten(#f93, 5%)};
    --alpus-link-color: #333;
    --alpus-dark-color: #222;
    --alpus-dark-color-hover: #{lighten(#222, 5%)};
    --alpus-light-color: #ccc;
    --alpus-light-color-hover: #{darken(#ccc, 5%)};
    --alpus-white-color: #fff;
    --alpus-grey-color: #999;
    
    --alpus-success-color: #{$success-color};
    --alpus-success-color-hover: #{lighten($success-color, 10%)};
    --alpus-success-color-light: #{lighten($success-color, 40%)};
    --alpus-alert-color: #{$alert-color};
    --alpus-alert-color-hover: #{lighten($alert-color, 10%)};
    --alpus-alert-color-light: #{lighten($alert-color, 40%)};
    --alpus-danger-color: #{$danger-color};
    --alpus-danger-color-hover: #{darken($danger-color, 10%)};
    --alpus-danger-color-light: #{lighten($danger-color, 40%)};

    /* Typography */
    --alpus-body-font-family: 'Poppins';
    --alpus-body-font-weight: 400;
    --alpus-body-font-size: 16px;
    --alpus-body-line-height: 1.86;
    --alpus-body-text-transform: none;
    --alpus-body-color: #777;

    --alpus-heading-font-family: var(--alpus-body-font-family);
    --alpus-heading-font-weight: 600;
    --alpus-heading-line-height: 1.2;
    --alpus-heading-text-transform: none;
    --alpus-heading-color: #111;

    --alpus-heading-h1-font-size: 5rem;
    --alpus-heading-h2-font-size: 3.8rem;
    --alpus-heading-h3-font-size: 2.8rem;
    --alpus-heading-h4-font-size: 2.2rem;
    --alpus-heading-h5-font-size: 1.8rem;
    --alpus-heading-h6-font-size: 1.6rem;


    /* Other Styles */
    --alpus-border-radius-form: 0;


    /* Colors that should be changed for light/dark skins */
    --alpus-change-border-color: #ccc;
    /* #444 */
    --alpus-change-light-border-color: #e1e1e1;
    /* #282828 */
    --alpus-change-color-light-1: #fff;
    /* #111 */
    --alpus-change-color-light-2: #aaa;
    /* #555 */
    --alpus-change-color-light-3: #ddd;
    /* #3a3a3a */
    --alpus-change-color-light-4: #999;
    /* #666 */
    --alpus-change-color-light-5: #f6f6f6;
    /* #181818 */
    --alpus-change-color-dark-1: #222;
    /* #ccc */
    --alpus-change-color-dark-2: #3a3a3a;
    /* #aaa */
    --alpus-change-color-dark-3: #555;
    /* #999 */
}

/* in _page-header.scss */
.page-wrapper {
    --alpus-page-wrapper-bg-color: #fff;
}

.page-header {
    --alpus-ptb-bg-color: #eee;

    .page-title {
        --alpus-ptb-title-font-size: 3.4rem;
        --alpus-ptb-title-text-transform: capitalize;
    }

    .page-subtitle {
        --alpus-ptb-subtitle-font-size: 1.8rem;
    }
}

.page-title-bar {
    --alpus-ptb-height: 180px;
}

/* in _type.scss */
.d-lazyload {
    --alpus-lazy-load-bg: #f4f4f4;
}

@media (max-width: 1289px) {
    .container-fluid .container {
        padding-left: 0;
        padding-right: 0;
    }

    .elementor-column-gap-no>.elementor-column>.col-half-section,
    .elementor-column-gap-no>.elementor-row>.elementor-column>.col-half-section {
        width: calc(100% - var(--alpus-gap) * 4);
        padding-left: calc(2 * var(--alpus-gap));
    }

    .elementor-column-gap-no>.elementor-column>.col-half-section-right,
    .elementor-column-gap-no>.elementor-row>.elementor-column>.col-half-section-right {
        padding-left: 0;
        padding-right: calc(2 * var(--alpus-gap));
    }

    .elementor-container>.elementor-column>.col-half-section,
    .elementor-container>.elementor-row>.elementor-column>.col-half-section {
        width: calc(100% - var(--alpus-gap) * 2 + var(--alpus-el-section-gap));
    }
}

@media (max-width: 1289px) and (min-width: 480px) {

    .elementor-top-section.elementor-section-boxed>.elementor-container,
    .elementor-section-full_width .elementor-section-boxed>.elementor-container {
        width: calc(100% - var(--alpus-gap) * 4 + 2 * var(--alpus-el-section-gap));
    }
}

@media (max-width: 1819px) and (min-width: 480px) {
    .elementor-top-section.elementor-section-boxed>.elementor-column-gap-no.container-fluid {
        width: calc(100% - var(--alpus-gap) * 4 + 2 * var(--alpus-el-section-gap));
    }
}