/* =========================================================
   EVTROL GLOBAL WEBSITE SYSTEM
   Responsive + User Friendly + Device Friendly
========================================================= */


/* =========================================================
   1. ROOT VARIABLES
========================================================= */

:root {

    --evtrol-green: #52a900;
    --evtrol-green-dark: #438d00;
    --evtrol-green-light: #edf7e8;

    --evtrol-black: #111111;
    --evtrol-text: #303030;
    --evtrol-muted: #686868;

    --evtrol-white: #ffffff;
    --evtrol-light: #f7f9f6;
    --evtrol-border: #e3e7e1;

    --evtrol-container: 1480px;

    --evtrol-side-space: 60px;

    --evtrol-radius: 4px;

    --evtrol-transition:
        0.25s ease;

    --evtrol-shadow:
        0 15px 40px rgba(0,0,0,.08);
}


/* =========================================================
   2. RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

}


body {

    margin: 0;

    padding: 0;

    width: 100%;

    min-height: 100vh;

    background: #ffffff;

    color: var(--evtrol-text);

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}


img {

    display: block;

    max-width: 100%;

    height: auto;

}


svg {

    max-width: 100%;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


a {

    color: inherit;

}


p,
h1,
h2,
h3,
h4,
h5,
h6 {

    overflow-wrap: break-word;

}


p {

    margin-top: 0;

}


ul,
ol {

    margin-top: 0;

}


/* =========================================================
   3. ACCESSIBILITY
========================================================= */

:focus-visible {

    outline: 3px solid rgba(82,169,0,.45);

    outline-offset: 4px;

}


::selection {

    background: var(--evtrol-green);

    color: #ffffff;

}


/* =========================================================
   4. GLOBAL CONTAINER
========================================================= */

.evtrol-container {

    width: min(
        calc(100% - (var(--evtrol-side-space) * 2)),
        var(--evtrol-container)
    );

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   5. GLOBAL SECTION
========================================================= */

.evtrol-section {

    width: 100%;

    padding-top: 110px;

    padding-bottom: 110px;

}


.evtrol-section-light {

    background: var(--evtrol-light);

}


.evtrol-section-white {

    background: #ffffff;

}


/* =========================================================
   6. GLOBAL SECTION LABEL
========================================================= */

.evtrol-section-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #686868;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    line-height: 1.2;

    text-transform: uppercase;

}


.evtrol-section-label span {

    width: 28px;

    height: 2px;

    flex: 0 0 28px;

    background: var(--evtrol-green);

}


/* =========================================================
   7. GLOBAL HEADINGS
========================================================= */

.evtrol-section-title {

    margin: 18px 0 0;

    color: var(--evtrol-black);

    font-size: clamp(
        38px,
        4.5vw,
        68px
    );

    line-height: 1.04;

    font-weight: 400;

    letter-spacing: -2.5px;

}


.evtrol-section-title span {

    color: var(--evtrol-green);

    font-weight: 600;

}


.evtrol-section-description {

    max-width: 650px;

    margin: 22px 0 0;

    color: var(--evtrol-muted);

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================================
   8. BUTTON SYSTEM
========================================================= */

.evtrol-btn {

    min-height: 50px;

    padding:
        0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: 1px solid transparent;

    border-radius: var(--evtrol-radius);

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background var(--evtrol-transition),
        color var(--evtrol-transition),
        border-color var(--evtrol-transition),
        transform var(--evtrol-transition),
        box-shadow var(--evtrol-transition);

}


.evtrol-btn:hover {

    transform: translateY(-2px);

}


.evtrol-btn-primary {

    background: var(--evtrol-green);

    color: #ffffff;

}


.evtrol-btn-primary:hover {

    background: var(--evtrol-green-dark);

    box-shadow:
        0 8px 20px rgba(82,169,0,.16);

}


.evtrol-btn-outline {

    background: #ffffff;

    border-color: #d6d6d6;

    color: #222222;

}


.evtrol-btn-outline:hover {

    border-color: var(--evtrol-green);

    color: var(--evtrol-green);

}


/* =========================================================
   9. RESPONSIVE GRID
========================================================= */

.evtrol-grid-2 {

    display: grid;

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

    gap: 60px;

}


.evtrol-grid-3 {

    display: grid;

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

    gap: 30px;

}


.evtrol-grid-4 {

    display: grid;

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

    gap: 25px;

}


/* =========================================================
   10. GLOBAL IMAGE
========================================================= */

.evtrol-image {

    width: 100%;

    overflow: hidden;

}


.evtrol-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   11. FORMS
========================================================= */

.evtrol-form {

    width: 100%;

}


.evtrol-form-row {

    display: grid;

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

    gap: 18px;

}


.evtrol-form-group {

    width: 100%;

    margin-bottom: 18px;

}


.evtrol-form-group label {

    display: block;

    margin-bottom: 7px;

    color: #292929;

    font-size: 13px;

    font-weight: 500;

}


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

    width: 100%;

    min-height: 50px;

    padding:
        0 15px;

    background: #ffffff;

    border: 1px solid #d9ded7;

    border-radius: 3px;

    color: #222222;

    font-size: 14px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.evtrol-form-group textarea {

    min-height: 130px;

    padding-top: 14px;

    padding-bottom: 14px;

    resize: vertical;

}


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

    border-color: var(--evtrol-green);

    box-shadow:
        0 0 0 3px rgba(82,169,0,.10);

}


/* =========================================================
   12. TABLES
========================================================= */

.evtrol-table-wrap {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}


.evtrol-table {

    width: 100%;

    min-width: 650px;

    border-collapse: collapse;

}


.evtrol-table th,
.evtrol-table td {

    padding: 14px 16px;

    border-bottom: 1px solid var(--evtrol-border);

    text-align: left;

}


.evtrol-table th {

    background: var(--evtrol-light);

    color: #222222;

    font-size: 13px;

    font-weight: 600;

}


/* =========================================================
   13. CARDS
========================================================= */

.evtrol-card {

    min-width: 0;

    padding: 28px;

    background: #ffffff;

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

    border-radius: var(--evtrol-radius);

    transition:
        transform var(--evtrol-transition),
        box-shadow var(--evtrol-transition),
        border-color var(--evtrol-transition);

}


.evtrol-card:hover {

    transform: translateY(-4px);

    border-color: #cfdcc8;

    box-shadow: var(--evtrol-shadow);

}


/* =========================================================
   14. MOBILE SAFE TEXT
========================================================= */

.evtrol-no-overflow {

    max-width: 100%;

    overflow-wrap: anywhere;

}


/* =========================================================
   15. HORIZONTAL SCROLL PREVENTION
========================================================= */

html,
body {

    max-width: 100%;

}


/* =========================================================
   16. LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    :root {

        --evtrol-side-space: 80px;

    }

}


/* =========================================================
   17. LAPTOP
========================================================= */

@media (max-width: 1250px) {

    :root {

        --evtrol-side-space: 40px;

    }

    .evtrol-section {

        padding-top: 90px;

        padding-bottom: 90px;

    }

    .evtrol-grid-2 {

        gap: 45px;

    }

    .evtrol-grid-3 {

        gap: 22px;

    }

    .evtrol-grid-4 {

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

    }

}


/* =========================================================
   18. TABLET
========================================================= */

@media (max-width: 950px) {

    :root {

        --evtrol-side-space: 30px;

    }

    .evtrol-section {

        padding-top: 75px;

        padding-bottom: 75px;

    }

    .evtrol-grid-2 {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .evtrol-grid-3 {

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

    }

    .evtrol-section-title {

        letter-spacing: -1.8px;

    }

}


/* =========================================================
   19. MOBILE
========================================================= */

@media (max-width: 600px) {

    :root {

        --evtrol-side-space: 18px;

    }

    body {

        font-size: 15px;

    }

    .evtrol-section {

        padding-top: 60px;

        padding-bottom: 60px;

    }

    .evtrol-container {

        width:
            calc(100% - 36px);

    }

    .evtrol-section-title {

        margin-top: 15px;

        font-size:
            clamp(36px, 11vw, 48px);

        line-height: 1.05;

        letter-spacing: -1.7px;

    }

    .evtrol-section-description {

        margin-top: 18px;

        font-size: 14px;

        line-height: 1.65;

    }

    .evtrol-grid-2,
    .evtrol-grid-3,
    .evtrol-grid-4 {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .evtrol-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

    .evtrol-btn {

        width: 100%;

        min-height: 50px;

    }

    .evtrol-card {

        padding: 22px;

    }

}


/* =========================================================
   20. SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    :root {

        --evtrol-side-space: 14px;

    }

    .evtrol-container {

        width:
            calc(100% - 28px);

    }

    .evtrol-section {

        padding-top: 50px;

        padding-bottom: 50px;

    }

    .evtrol-section-title {

        font-size: 35px;

        letter-spacing: -1.4px;

    }

    .evtrol-section-label {

        font-size: 9px;

        letter-spacing: 1.5px;

    }

}


/* =========================================================
   21. REDUCED MOTION
========================================================= */

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

    html {

        scroll-behavior: auto;

    }

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

}


/* =========================================================
   22. TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .evtrol-card:hover,
    .evtrol-btn:hover {

        transform: none;

        box-shadow: none;

    }

}


/* =========================================================
   23. VERY WIDE IMAGES
========================================================= */

.evtrol-full-width-image {

    width: 100%;

    max-height: 750px;

    object-fit: cover;

}


/* =========================================================
   24. MOBILE IMAGE SAFETY
========================================================= */

@media (max-width: 600px) {

    .evtrol-full-width-image {

        min-height: 280px;

        max-height: 500px;

    }

}


/* =========================================================
   25. VIDEO / IFRAME
========================================================= */

iframe,
video {

    max-width: 100%;

}


.evtrol-video {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

}


.evtrol-video iframe,
.evtrol-video video {

    width: 100%;

    height: 100%;

    border: 0;

    object-fit: cover;

}


/* =========================================================
   26. SAFE ICON
========================================================= */

.evtrol-icon {

    flex-shrink: 0;

}


/* =========================================================
   27. HIDDEN MOBILE / DESKTOP
========================================================= */

.evtrol-desktop-only {

    display: block;

}


.evtrol-mobile-only {

    display: none;

}


@media (max-width: 600px) {

    .evtrol-desktop-only {

        display: none;

    }

    .evtrol-mobile-only {

        display: block;

    }

}