/*!
Theme Name: CleanCo Energy
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cleanco-energy
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

CleanCo Energy is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

@font-face {
    font-family: 'Bebas Neue';
    src: local('Bebas Neue Regular'), local('BebasNeue-Regular'),
    url('fonts/BebasNeue-Regular.woff2') format('woff2'),
    url('fonts/BebasNeue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Heavy'), local('Lato-Heavy'),
    url('fonts/Lato-Heavy.woff2') format('woff2'),
    url('fonts/Lato-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Bold'), local('Lato-Bold'),
    url('fonts/Lato-Bold.woff2') format('woff2'),
    url('fonts/Lato-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Light'), local('Lato-Light'),
    url('fonts/Lato-Light.woff2') format('woff2'),
    url('fonts/Lato-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Regular'), local('Lato-Regular'),
    url('fonts/Lato-Regular.woff2') format('woff2'),
    url('fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Medium'), local('Lato-Medium'),
    url('fonts/Lato-Medium.woff2') format('woff2'),
    url('fonts/Lato-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Semibold'), local('Lato-Semibold'),
    url('fonts/Lato-Semibold.woff2') format('woff2'),
    url('fonts/Lato-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Semibold Italic'), local('Lato-SemiboldItalic'),
    url('fonts/Lato-SemiboldItalic.woff2') format('woff2'),
    url('fonts/Lato-SemiboldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}


.BebusNeue-Regular {
    font-family: "Bebas Neue", serif;
}


/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0 !important;
    font-weight: 400;
    font-family: "Lato", serif;
    background-color: #fff6ee !important;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    font-kerning: none;
    text-rendering: optimizespeed;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */


h1,
h2,
h3,
h4,
h5,
h6 {
    color: #1F4F33;
}

p {
    font-size: 15px;
    font-family: "Lato", serif;
    font-weight: 500;
}

button {
    background: #5290c1;
    color: #1F4F33;
    border-radius: 5px;
    font-size: 16px;
    font-family: "Bebas Neue Regular", serif;
    border: 0;
    line-height: 1;
    width: 225px;
    height: 55px;
    padding: 0;
}

button:hover {
    background: #1F4F33;
    color: #fff;
}

a {
    text-decoration: none;
    color: #2d2d2d;
    background: transparent;
}

a:hover {
    color: #5290c1;
    text-decoration: none;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
    background: #fff;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}


ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

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

figure {
    margin: 1em 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

/* Links
--------------------------------------------- */
a {
    color: #4169e1;
}


a:hover,
a:focus,
a:active {
    color: #191970;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    /*background: #e6e6e6;*/
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #111;
}

select {
    border: 1px solid #ccc;
}

textarea {
    width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
    display: block;
    width: 100%;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    display: block;
    left: auto;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {

    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: flex;
    }
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
    margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
    display: block;
}

.post,
.page {
    margin: 0 0 1.5em;
}

.updated:not(.published) {
    display: none;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
    margin: 0 0 1.5em;
}

.widget select {
    max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

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

/* Galleries
--------------------------------------------- */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
    outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

    /*rtl:ignore*/
    float: left;

    /*rtl:ignore*/
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {

    /*rtl:ignore*/
    float: right;

    /*rtl:ignore*/
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}


/* paragraphs: Lato Medium ~500 */
p {
    font-size: 15px;
    font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
}

/* links */
a {
    text-decoration: none;
    color: #2D2D2D;
}

a:hover {
    color: #5290c1;
    text-decoration: none;
}

/* buttons: .wp-block-button / .wp-element-button */
.wp-block-button .wp-element-button,
.wp-element-button,
button[type="button"],
button[type="submit"],
input[type="submit"] {
    background: #5290c1;
    color: #1F4F33;
    border-radius: 5px;
    font-size: 16px;
    font-family: "Bebas Neue", sans-serif;
    border: 0;
    width: 225px;
    height: 55px !important;
    line-height: 1;
    text-align: center;
    display: inline-block;
    cursor: pointer;

}

.wp-block-button:before .wp-element-button:before,
.wp-element-button:before,
button[type="button"]:before,
button[type="submit"]:before,
input[type="submit"]:before {
    content: "";
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 0%;
    height: 100%;
    position: absolute;
    z-index: -1;
    background-color: black;
    border-radius: 20%;
    transition: all .12s ease-out;
}

.wp-block-button:hover .wp-element-button:hover,
.wp-element-button:hover,
button[type="button"]:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    font-weight: 100 !important;
    transition: .5s ease-in-out;
}


.wp-block-button:hover::before .wp-element-button:hover::before,
.wp-element-button:hover::before,
button[type="button"]:hover::before,
button[type="submit"]:hover::before,
input[type="submit"]:hover::before {
    height: 100%;
    width: 100%;
    background-color: white;
    transition: all .19s ease-in-out;
}


/* responsive button size */
@media (max-width: 768px) {
    .wp-block-button .wp-element-button,
    .wp-element-button,
    button[type="button"],
    button[type="submit"],
    input[type="submit"] {
        width: 145px;
        height: 40px;
        font-size: 14px !important;
        line-height: 40px;
    }
}

/* utility button colors */
.btn-orange, .has-brand-orange-background-color {
    background-color: #5290c1;
    color: #1F4F33;
}

.btn-orange:hover {
    background: #1F4F33;
    color: #fff;
}

.btn-blue, .has-brand-blue-background-color {
    background: #1F4F33;
    color: #fff;
}

.btn-blue:hover {
    background: #5290c1;
    color: #1F4F33;
}

/* container width (matches theme.json) */
@media (min-width: 1400px) {
    section .container, .footer .container {
        max-width: 1320px;
    }
}

/* ---------- BACK TO TOP (optional custom HTML block) ---------- */
.back-to-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #5FCF80;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .4s;
}

.back-to-top.active {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: #7ED899;
}

/* ---------- PRELOADER (if you add the markup) ---------- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #5FCF80;
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

/* ---------- HEADER / NAV (Core Navigation block) ---------- */
.wp-block-navigation__container a {
    padding: 10px 18px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #1F4F33;
    border-radius: 5px;
}

.wp-block-navigation__container a:hover,
.wp-block-navigation__container .wp-block-navigation-item__content:where(:hover, :focus) {
    background: #FFE1CC;
    color: #1F4F33;
    transition: .5s;
    font-weight: 800;
}

/* dropdowns */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    background: #fff;
    box-shadow: 0 0 30px rgba(127, 137, 161, .25);
    border-radius: 4px;
}

.wp-block-navigation__submenu-container a {
    padding: 5px 20px;
    font-size: 14px;
    font-weight: 300;
}

.wp-block-navigation__submenu-container a:hover {
    background: #1F4F33;
    color: #fff;
    margin: 5px;
}

/* mobile toggle (core nav adds its own, but color it) */
.wp-block-navigation__responsive-container-open {
    color: #5290c1;
    font-size: 25px;
    background: #FFF6EE;
    padding: 5px;
    border-radius: 5px;
    box-shadow: rgba(60, 64, 67, .3) 0 1px 2px, rgba(60, 64, 67, .15) 0 2px 6px 2px;
}

/* ---------- HERO (use Group with background) ---------- */
.hero--blue {
    background: #1F4F33;
    padding-top: 120px;
    padding-bottom: 0;
}

.hero--blue h1 {
    margin: 0;
    font-size: 55px;
    color: #fff;
    font-weight: 300;
    font-family: "Lato", sans-serif;
}

.hero--blue h1 > span {
    font-weight: 600;
    font-size: 70px;
    color: #5290c1;
}

@media (max-width: 768px) {
    .hero--blue h1 {
        font-size: 28px;
    }

    .hero--blue h1 > span {
        font-size: 34px;
    }
}

/* ---------- SECTIONS ---------- */
.section-bg {
    background: #F6F7F6;
}

/* ---------- FOOTER ---------- */
.footer {
    margin-top: 60px;
}

.footer hr {
    border: 1px solid #000;
    opacity: .3;
    margin-bottom: 80px;
    width: 98%;
}

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

.footer ul li {
    font-size: 13px;
    margin: 8px 0;
    font-family: "Lato", sans-serif;
    font-weight: 500;
}

.footer input[type="email"], .footer input[type="text"] {
    height: 55px;
    border: 1px solid #707070;
    font-size: 13px;
}

.footer .subscribe-btn {
    margin-left: 20px;
}

.footer .social-links img {
    width: 30px;
    height: 30px;
    margin-left: 35px;
}

.footer .copyright {
    background: #2D2D2D;
    color: #fff;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    font-weight: 600;
}

@media (max-width: 768px) {
    .footer hr {
        width: 92%;
        margin: 0 auto 35px;
    }

    .footer .social-links img {
        width: 40px;
        height: 40px;
        margin: 0;
    }
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

#header {
    background: #fff;
    transition: all 0.5s;
    z-index: 997;
    padding: 5px 0;
    box-shadow: 0px 0 18px rgba(55, 66, 59, 0.08);
    border-radius: 0px 0px 10px 10px;
}

#header .logo {
    font-size: 30px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
}

#header .logo img {
    max-height: 55px;
    width: auto;
}

/* .customer-login-btn {
    margin-left: 50px;
    color: #1F4F33;
    background: #5290c1;
    border-radius: 5px;
    padding: 12px 35px;
    white-space: nowrap;
    transition: 0.3s;
    font-size: 18px;
    display: inline-block;
    font-family: "BebusNeue-Regular";
    text-transform: uppercase;
}

.customer-login-btn:hover {
    background: #1F4F33;
    color: #fff;
} */

.animate-btn button {
    margin-left: 30px;
    width: 135px;
    position: relative;
    border-radius: 5px;
    transition: 2s all ease;
    z-index: 1;
    font-size: 16px !important;
    cursor: pointer;
    font-family: "BebusNeue Regular";
    background-color: #5290c1;
    color: #1F4F33;
    height: 40px;
}

.animate-btn button::before {
    content: "";
    position: absolute;
    z-index: -1;
    transform: translate(-50%, -50%);
    background-color: #1F4F33;
    border-radius: 5px;
    transition: all 0.3s;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 100%;
}

.animate-btn button:hover {
    color: white;
    transition: all 0.6s;
}

.animate-btn button:hover::before {
    height: 100%;
    width: 100%;
    border-radius: 5px;
}

@media screen and (max-width: 768px) {
    .animate-btn button {
        margin-left: 0px;
    }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

/**
* Desktop Navigation
*/

.navbar {
    padding: 0;
}

.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}

.navbar li {
    position: relative;
}

.navbar a,
.navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Lato";
    font-weight: bold;
    padding: 10px 18px 10px 18px;
    font-size: 13px;
    color: #1F4F33;
    white-space: nowrap;
    margin: 0px 5px;
}

.navbar ul a.active,
.navbar ul a:hover {
    text-decoration: none;
    background: #ffe1cc;
    border-radius: 5px;
    /* font-size: 14px !important; */
    transition: 0.5s;
    font-family: "Lato", serif;
    font-weight: 900;
    padding: 10px 18px 10px 17px;
}

.navbar a i,
.navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    margin: 20px 0px 0px 0px;
    padding: 0px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
}

.navbar .dropdown ul li {
    min-width: 200px;
}

.navbar .dropdown ul a {
    padding: 5px 20px;
    font-size: 14px;
    text-transform: none;
    font-family: "Lato";
    font-weight: 300;
}

.navbar .dropdown ul a i {
    font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
    color: white;
    background: #1F4F33;
    margin: 5px;
}

.navbar .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}

@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }

    .navbar .dropdown .dropdown:hover > ul {
        left: -100%;
    }
}

/**
* Mobile Navigation
*/

.mobile-nav-toggle {
    color: #5290c1;
    font-size: 25px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
    background: #fff6ee;
    padding: 5px;
    border-radius: 5px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.mobile-nav-toggle.bi-x {
    color: #fff;
    background: #1F4F33;
}

@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none;
    }
}

.navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: 0.3s;
    z-index: -1;
    height: 500px;
    border-radius: 5px;
}

.navbar-mobile.height-90 {
    height: 700px !important;
}

.navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 18px;
    right: 26px;
}

.navbar-mobile ul {
    display: block;
    position: absolute;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 25px 10px;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
}

.navbar-mobile ul.menu-list {
    border-top: 2px solid #1F4F33;
}

.navbar-mobile li {
    text-align: center;
}

.navbar-mobile a,
.navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 16px;
    color: #1F4F33;
    display: block;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
    margin: 15px;
}

.navbar-mobile .dropdown ul {
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
    min-width: 200px;
    text-align: left;
}

.navbar-mobile .dropdown ul a {
    padding: 2px 0px;
}

.navbar-mobile .dropdown ul a i {
    font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
    /* color: #5fcf80; */
}

.navbar-mobile .dropdown > .dropdown-active {
    display: block;
    background: none;
    box-shadow: none;
    margin: 0px 0px 0px 50px;
}

.navbar-mobile .dropdown:has(> .dropdown-active) {
    background: #f7f7f7;
    text-align: left;
    padding: 0px 0px 0px 50px;
}

.navbar-mobile .customer-login-btn {
    width: 200px;
    font-family: "BebusNeue Regular";
}

@media screen and (max-width: 768px) {
    #header {
        padding: 15px 0;
        border-radius: 0;
    }

    .navbar ul a.active,
    .navbar ul a:hover {
        background: none !important;
        color: #5290c1 !important;
        margin: 0 !important;
    }
}


/*---------------------------------------------------------
Footer
---------------------------------------------------------*/

.footer {
    margin-top: 60px;
    background-color: #fff6ee;

}

.footer hr {
    border: 1px solid black;
    opacity: 0.3;
    margin-bottom: 80px;
    width: 98%;
}

.footer ul li {
    list-style: none;
    font-size: 13px;
    margin: 8px 0px;
    font-weight: 500;
    font-family: "Lato";
}

.footer input.form-control {
    height: 55px;
    border: 1px solid #707070;
    font-size: 13px;
}

.footer .subscribe-btn {
    margin-left: 20px;
}

.footer .social-links img {
    width: 30px;
    height: 30px;
    margin: 0px 0px 0px 35px;
}

.footer .copyright,
.footer .copyright a {
    background-color: #2d2d2d;
    color: white;
    font-size: 12px;
    font-weight: 600;
    font-family: "Lato";
}

@media screen and (max-width: 768px) {
    .footer hr {
        width: 92%;
        margin: 0px auto 35px auto;
    }

    .footer .social-links img {
        width: 40px;
        height: 40px;
        margin: 0;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
    .copyright-text {
        width: 235px !important;
    }
}

.menu-bottom-menu-container {
    width: auto;
}

#menu-bottom-menu {
    display: flex;
    gap: 35px;
}

@media (max-width: 767px) {
    #menu-bottom-menu {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
}

.error-404 {
    padding: 150px 0 90px;
}

.form-control {
    border: 1px solid #AEAEAE;
    font-size: 14px;
    padding: 0 25px !important;
    font-family: 'Lato';
    height: 55px;
    font-weight: 300;
}

.form-control:focus {
    border-color: #86b7fe !important;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
}

select {
    position: relative;
    display: inline-block;
    /* overflow: hidden; */
    cursor: pointer;
    white-space: nowrap;
    color: #000;
    padding: 0 25px;
    outline: none;
    /* border: 1px solid #1F4F33; */
    border: 1px solid #AEAEAE;
    border-radius: 5px;
    background: white;
    font-family: 'Lato-SemiBold';
    width: fit-content;
    margin-top: 20px;
    height: 70px;
}

.site-main {
    padding-top: 100px;
}

/*subscribe*/
.subscribe-div {
}

.tnp-subscription form {
    display: flex;
    max-width: 100% !important;
    margin-top: 1.5rem !important;
    gap: 20px;

}

@media (max-width: 767px) {
    .tnp-subscription form {
        flex-direction: column;
    }
}

.tnp-subscription input.tnp-submit, .tnp-profile input.tnp-submit, .tnp-unsubscribe button.tnp-submit, .tnp-reactivate button.tnp-submit {
    border-radius: 5px;
    font-size: 16px !important;
    font-family: "Bebas Neue", serif !important;
    border: 0;
    line-height: 1;
    width: 225px !important;
    height: 55px;
    padding: 0;
    background-color: #1F4F33 !important;
    color: #fff;
    text-transform: uppercase;
}

.tnp-subscription label {
    display: none !important;
}

.tnp-field {
    width: 100% !important;

}

.tnp-field-button.tnp-field {
    width: 225px !important;
    height: 55px;
}

div.tnp-subscription, form.tnp-subscription, form.tnp-profile {
    display: block;
    margin: 1em auto;
    max-width: 100% !important;
    width: 100%;
}

.tnp-subscription form input {
    height: 55px !important;
    border: 1px solid #707070 !important;
    font-size: 13px !important;
    display: block;
    width: 100% !important;
    padding: .375rem .75rem !important;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    appearance: none;
    border-radius: var(--bs-border-radius);
}

.tnp-subscription {
    margin: 0 !important;
}


/*Hero Section*/

#hero {
    background: #1F4F33;
    padding: 120px 0 0 0;
}

.main-banner {
    position: absolute !important;
    z-index: 9;
    background: transparent !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

.main-banner button {
    margin: 0;
    padding: 0;
}
.cleaner-text{
    display: inline-block;
    position: relative;
}
.main-banner h1::after {
    content: "";
    display: block;
    height: 3px;
    width: 120px;
    background: rgb(255, 255, 255);
    border-radius: 2px;
    margin: 1rem auto 0px;
}
.main-banner h1 span{
    color: white !important;
}
.cleaner-underline {
    bottom: 5px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 2px 8px;
    height: 8px;
    left: 0px;
    position: absolute;
    width: 0px;
    background: linear-gradient(90deg, rgb(255, 255, 255), rgb(144, 238, 144));
    border-radius: 4px;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.cleaner-underline.animate {
    width: 100%;
}
.main-banner .button-wrapper-main-banner {
    margin: 20px 0 0 !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    gap: 30px;

}
@media(max-width: 550px){
    .main-banner .button-wrapper-main-banner{
        gap: 10px;
        flex-direction: column;
        margin-top: 30px !important;
    }
}
.main-banner .row.justify-content-between {
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
    text-align: center;
}
.main-banner .get-start{
    background: white !important;
}

.main-banner .get-start.get-about{
    border: 1px solid white !important;
    color: white !important;
    background: transparent !important;
}
.main-banner .get-start:hover{
    background: #5290c1 !important;
    color: #1F4F33 !important;
}
.main-banner .responsive-video{
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.main-banner-image-custom img{
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}
.main-banner-image-custom{
    &:after{
        content: '';
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
    }
}
@media (max-width: 992px) {
    #hero .container {
        padding-top: 62px;
    }
}


#hero h1 {
    margin: 0;
    font-size: 55px;
    color: #fff;
    font-weight: 300;
    font-family: "Lato";
}

#hero h1 > span {
    font-family: "Lato";
    font-weight: 600;
    font-size: 70px;
    color: #5290c1;
}

#hero button:hover {
    background: #ffffff;
    color: #1F4F33;
}

@media (min-width: 1024px) {
}

@media (max-width: 768px) {
    #hero h1 {
        margin: 0;
        font-size: 28px;
        color: #fff;
        font-weight: 300;
        font-family: "Lato";
    }

    #hero h1 > span {
        font-family: "Lato";
        font-weight: 600;
        font-size: 34px;
        color: #5290c1;
    }

    #hero .btn-orange {
        position: initial !important;
    }
}


#hero h1 {
    margin: 0;
    font-size: 75px;
    color: #fff;
    font-family: "Bebas Neue", serif;

}

#hero h1 > span {
    font-size: 75px;
    font-family: "Bebas Neue", serif;

}


#video-container, .video-container {
    position: relative;
    margin-top: 100px;
}

#my-video {
    width: 100%;
    cursor: pointer;
}

#title, .title {
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
    color: white;
    background-color: black;
    padding: 5px;
    font-size: 12px;
}

#video-container:hover #title, .video-container:hover .title {
    display: block;
}


@media screen and (max-width: 769px) {
    #hero h1 {
        font-size: 45px;
    }

    #hero h1 > span {
        font-size: 45px;
    }

    .reveal {
        font-size: 28px !important;
        padding: 10px !important;
    }

    #hero .get-start {
        width: 140px;
        height: 35px;
        font-size: 12px;
    }

    #hero .container {
        margin-top: -60px;
    }

    #hero .container {
        margin-top: -60px;
    }
}

#pulse {
    width: 165px;
    left: 75%;
    bottom: 28%;
}

#hero .get-start {
    width: 225px;
    height: 50px;
    background-color: #5290c1;
    cursor: pointer !important;
    color: #2D2D2D;
    font-family: "Bebas Neue", serif;
    font-size: 20px;
    position: relative;
    transition: .2s all ease;
    z-index: 1;
    border: none;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background-color: #1F4F33;
}


.overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    /* width: 86%; */
    height: 100vh;
    opacity: 0;
    background: linear-gradient(179deg, #0000007D, #000000) no-repeat scroll center;
    transition: opacity 0.4s ease-in-out, width 0.8s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.reveal {
    position: relative;
    transform: translateY(20px);
    opacity: 0;
    color: white;
    transition: 3s ease-in-out;
    font-size: 50px;
    font-family: 'Lato', serif;
    font-weight: bold;
    text-align: center;
    padding-left: 60px !important;
    padding-right: 60px !important;
}

.reveal.active {
    transform: translateY(-150px) !important;
    opacity: 1;
}

.responsive-video {
    /* width: 86%; */
    height: 115%;
    transition: width 0.8s ease-in-out;
    object-fit: cover;
}

@media screen and (min-width: 319px) {

    .responsive-video,
    .overlay {
        width: 270px;
    }
}

@media screen and (min-width: 360px) {

    .responsive-video,
    .overlay {
        width: 307px;
    }
}

@media screen and (min-width: 375px) {

    .responsive-video,
    .overlay {
        width: 327px;
    }
}

@media screen and (min-width: 392px) {

    .responsive-video,
    .overlay {
        width: 350px;
    }
}

@media screen and (min-width: 411px) {

    .responsive-video,
    .overlay {
        width: 370px;
    }
}

@media screen and (min-width: 424px) {

    .responsive-video,
    .overlay {
        width: 380px;
    }
}

@media screen and (min-width: 576px) {

    .responsive-video,
    .overlay {
        width: 515px;
    }
}

@media screen and (min-width: 768px) {

    .responsive-video,
    .overlay {
        width: 695px;
    }
}

@media screen and (min-width: 992px) {

    .responsive-video,
    .overlay {
        width: 935px;
    }
}

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

    .responsive-video,
    .overlay {
        width: 1115px;
    }
}

@media screen and (min-width: 1400px) {

    .responsive-video,
    .overlay {
        width: 1295px;
    }
}

.animate {
    opacity: 1;
    transform: translateY(0);
}

.description-lg .top-left {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 3;
}

.reveal {
    position: relative;
    transform: translateY(20px);
    opacity: 0;
    color: white;
    transition: 3s ease-in-out;
    font-size: 50px;
    font-weight: bold;
    font-family: 'Lato', serif;
    text-align: center;
    padding-left: 60px !important;
    padding-right: 60px !important;
}

.description-lg {
    background: #fff6ee no-repeat scroll center;
    background-size: cover;
    background-attachment: scroll;
    width: 100%;
    align-items: center !important;
}


.description p.large-text {
    font-size: 14px;
    color: #424242;
}

.description p.bold {
    color: #1F4F33 !important;
}

.description .img {
    background: url("./assets/images/homie/video.png") no-repeat scroll center;
    height: 260px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 18px;
}

.description .wrapper {
    background: linear-gradient(180deg, #5290c124, #471d00);
    height: 260px;
    z-index: -1;
}

.description .watch {
    width: 160px;
    height: 45px;
    position: relative;
    background: transparent !important;
    left: 30%;
    top: 35%;
    border: 2px solid whitesmoke !important;
    color: white;
    font-family: "Bebas Neue", sans-serif;
}

.description .watch:hover {
    color: #fff !important;
    background-color: #5290c1 !important;
    border-radius: 2% !important;
    font-weight: 100 !important;
    border: none !important;
    transition: -2s ease-in-out;
}

.description .watch::before {
    content: "";
    position: absolute;
    z-index: -1;
    transform: translate(-50%, -50%);
    border-radius: 2% !important;
    top: 50%;
    left: 50%;
}

.description .watch i {
    font-size: 14px;
    position: relative;
    color: white;
}

.description .watch:hover i {
    font-size: 16px !important;
    transition: 0.4s ease-in-out;
    margin-left: 0px !important;
}

.description .watch:hover span {
    color: white;
    margin-left: 2px;
    transition: 0.8s ease;
    text-align: center;
}

.description img {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.description .img-box {
    position: absolute;
    left: 50px;
    top: 50px;
}

.description .img-box p {
    font-size: 14px;
}

#puls {
    width: 70px;
    left: 80%;
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .description .img-box {
        left: 15px;
        top: 15px;
    }
}

@media screen and (max-width: 768px) {
    .description .img-box {
        left: 15px;
        top: 15px;
    }

    .description .img-box h3 {
        font-size: 18px;
        margin-bottom: 0;
    }

    .description .img-box p {
        font-size: 12px;
    }

    .description .img {
        height: 175px;
    }

    .description .wrapper {
        height: 175px;
    }

    .description .watch {
        left: auto;
    }

    #puls {
        left: 80% !important;
    }
}


#description .readmore {
    width: 130px;
    height: 40px;
}


.description-lg {
    background: #fff6ee no-repeat scroll center;
    background-size: cover;
    background-attachment: scroll;
    width: 100%;
    align-items: center !important;
}

.description-lg p {
    font-size: 18px;
    font-weight: 300;
    font-family: "Lato" !important;
}

.description-lg .lead {
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    font-family: "Lato" !important;
    color: #1F4F33 !important;
}

.description-lg .img {
    background: url("../images/homie/video.png") no-repeat scroll center;
    margin-top: 100px;
    height: 260px;
    box-shadow: 5px 10px 20px 0 #00000029;
}

.description-lg .wrapper {
    background: linear-gradient(180deg, #5290c124, #471d00);
    height: 260px;
    z-index: -1;
}

.description-lg .watch {
    width: 180px;
    height: 65px;
    position: relative;
    background: transparent !important;
    left: 30%;
    top: 35%;
    border: 2px solid whitesmoke !important;
    color: white;
    font-family: "Bebas Neue", sans-serif;
}

.description-lg .watch:hover {
    color: #fff !important;
    background-color: #5290c1 !important;
    border-radius: 2% !important;
    font-weight: 100 !important;

    border: none !important;

    transition: -2s ease-in-out;
}

.description-lg .watch::before {
    content: "";
    position: absolute;
    z-index: -1;
    transform: translate(-50%, -50%);
    border-radius: 2% !important;
    top: 50%;
    left: 50%;
}

.description-lg .watch i {
    padding: auto;
    font-size: 14px;
    position: relative;
    color: white;
}

.description-lg .watch:hover i {
    font-size: 16px !important;
    transition: 0.4s ease-in-out;
    margin-left: 0px !important;
}

.description-lg .watch:hover span {
    color: white;
    margin-left: 2px;
    transition: 0.8s ease;
    text-align: center;
}

.description-lg .sticky {
    position: sticky;
    top: 100px;

    height: 100px;
}

.description-lg .card {
    box-shadow: none !important;
}

img {
    position: relative;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 40px;
    left: 40px;
}

.description-lg h4 {
    font-family: "Bebas Neue", serif;
    color: #ffffff;
    font-size: 35px !important;
    margin-top: 10px !important;
}

.description-lg h5 {
    font-family: "Lato";
    font-weight: 300;
    font-size: 15px !important;
    color: #ffffff;
}

.solar {
    position: relative;
    left: 50px;
    width: 100px;
    height: 100px;
}

#solar {
    width: 169px;
    height: 169px;
    margin-left: 690px;
    margin-top: 330px;
}

.line1 {
    height: 3px;
    width: 85%;
    margin-top: 2px;
    margin-left: 8%;
    background: #5290c1;
    margin-bottom: 50px;
}


.description-lg .btn {
    position: relative;
    transition: 2s all ease;
    z-index: 1;
    font-size: 16px !important;
    box-shadow: none !important;
    background-color: #1F4F33 !important;
    color: white !important;
    letter-spacing: 0.22px;
    cursor: pointer !important;
}


.description-lg img {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 18px !important;
    width: 90%;
}

.description-lg .card:after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.23);
    z-index: 0;
    width: 90%;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    position: relative;

}

/*for mobiel*/

.vibrant-edge .vrg-list h1 {
    font-size: 75px;
    border-bottom: 3px solid #5290c1;
}

.vibrant-edge ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-left: 0px;
}

.vibrant-edge ul li {
    list-style: none;
    margin: auto;
    text-align: center;
}

.vibrant-edge ul li p {
    font-size: 12px;
    text-align: left;
    color: #1F4F33;
    font-weight: 300;
    font-family: 'Lato', serif;
}

.vibrant-edge ul li p > span {
    color: #AEAEAE;
    font-weight: 500;
    font-family: 'Lato' !important;
}

@media screen and (max-width: 992px) {
    .vibrant-edge {
        padding-top: 0;
    }

    .vibrant-edge .container {
        position: relative !important;
    }

    .vibrant-edge .container .row {
        margin-left: -24px;
        margin-right: -24px;
    }

    .vibrant-edge .vrg-list h1 {
        font-size: 45px;
        text-align: center;
    }

    .vibrant-edge ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

#description .readmore {
    width: 130px;
    height: 40px;
    font-family: "Bebas Neue", serif;

}


#watch-button, .description-lg .watch-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: #5290c1 !important;
}


.Solution h1 {
    font-family: "Bebas Neue", serif !important;
    color: white;
    font-size: 70px;
}

.Solution h1 > span {
    color: #5290c1;
}

.Solution {
    /*margin-top: -230px;*/
    margin-top: -50px;
    position: relative;
    z-index: 0;
}

.Solution h3 {
    font-family: "Bebas Neue", serif;
    color: white;
    margin-top: 0px;
    margin-left: 40%;
    font-size: 60px;
}

.Solution .card {
    margin-top: 20px;
    height: 375px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    border-radius: 10px;
}

.Solution img {
    width: inherit;
    height: inherit;
    transition: all 0.8s;
}

.Solution .card:hover img {
    scale: 1.3;
}

.landing-section1 section .card:hover img {
    transform: scale(1.2, 1.2);
}

.Solution .overlayy {
    position: absolute;
    background: rgba(233, 226, 226, 0.976);
    bottom: -40px;
    left: 0;
    right: 0;
    width: 100%;
    height: 35px;
    transition: 0.2s ease-out;
}

.Solution .card:hover .overlayy {
    height: 100%;
    bottom: 0px;
    background: rgba(255, 255, 255, 0.8);
}

.Solution h2 {
    width: 100%;
    margin-top: -70px !important;
    margin-left: 5px !important;
    color: white;
    position: absolute;
    left: 20px;
    font-family: "Bebas Neue", serif;
    font-weight: 100 !important;
    font-size: 28px;
    transition: 0.2s ease;
}

.Solution .card:hover h2 {
    margin-top: 40px !important;
    transition: 0.1s ease-out;
    margin-left: 5px !important;
    color: #1F4F33;
    font-size: 30px;
    font-family: "Bebas Neue", serif;

    font-weight: 400;
}

.Solution p {
    margin-left: 20px !important;
    margin-right: 15px !important;
    position: absolute;
    overflow: hidden;
    font-size: 13px;
    line-height: 1rem;
    margin: 35% 0 0 16%;
    color: #2d2d2d;
    font-width: 500;
    font-family: "Lato";
}

.Solution h5 {
    margin-top: 306px !important;
    margin-left: 30px;
    font-family: "Bebas Neue", serif;
    color: #2d2d2d;
    font-size: 23px;
}

.Solution .arrow1,
.Solution .arrow2,
.Solution .arrow3,
.Solution .arrow4,
.Solution .arrow5 {
    position: sticky;
    margin-top: -62px !important;
}

.Solution .arrow1 {
    margin-left: 155px;
}

.Solution .arrow2 {
    margin-left: 80px !important;
}

.Solution .arrow3 {
    margin-left: 290px;
}

.Solution .arrow4 {
    margin-left: 180px;
}

.Solution .arrow5 {
    margin-left: 185px;
}

.Solution .card:hover .arrow1,
.Solution .card:hover .arrow2,
.Solution .card:hover .arrow3,
.Solution .card:hover .arrow4,
.Solution .card:hover .arrow5 {
    color: #1F4F33 !important;
    margin-top: -68px !important;
    margin-left: 125px !important;
    transition: .2s ease-in;
}

@media screen and (min-width: 576px) and (max-width: 991px) {
    .Solution .card {
        height: 250px;
        position: relative;
        overflow: hidden;
        background-color: transparent;
    }

    .Solution p {
        display: none;
    }

    .Solution h5 {
        margin-top: 158px !important;
        margin-left: 30px;
        font-family: "Bebas Neue", serif;
        color: #2d2d2d;
        font-size: 18px;
    }

    .Solution h2 {
        color: white !important;
        margin-left: 0px !important;
        font-size: 28px;
        bottom: 40px;
    }

    .Solution .arrow1 {
        margin-top: -36px !important;
    }

    .Solution .arrow2 {
        margin-top: -35px !important;
        font-size: 16px !important;
    }

    .Solution .arrow3 {
        margin-left: 182px;
        margin-top: -33px !important;
        font-size: 16px !important;
    }

    .Solution .arrow4 {
        margin-top: -33px !important;
        font-size: 16px !important;
    }

    .Solution .arrow5 {
        color: white !important;
        margin-top: -33px !important;
        font-size: 16px !important;
    }

    .Solution .overlayy {
        background: linear-gradient(180deg, #00000000, #000000) !important;
        height: 150px;
    }

    .Solution h5 {
        margin-top: 205px !important;
        margin-left: 20px;
        font-size: 21px;
        color: white !important;
    }

    .Solution .card:hover .arrow1 {
        color: white !important;
        margin-top: -40px !important;
    }

    .Solution .card:hover .arrow2 {
        color: white !important;
        margin-top: -40px !important;
    }

    .Solution .card:hover .arrow3 {
        color: white !important;
        margin-top: -40px !important;
    }

    .Solution .card:hover .arrow4 {
        color: white !important;
        margin-top: -40px !important;
    }

    .Solution .card:hover .arrow5 {
        color: white !important;
        margin-top: -40px !important;
    }
}

@media screen and (min-width: 429px) and (max-width: 575px) {
    .Solution h2 {
        margin-left: 0px !important;
        font-size: 28px;
        bottom: 40px;
        color: white !important;
    }

    .Solution .arrow1 {
        margin-top: -36px !important;
    }

    .Solution .arrow2 {
        margin-top: -36px !important;
    }

    .Solution .arrow3 {
        margin-left: 150px;
        margin-top: -36px !important;
    }

    .Solution .arrow4 {
        margin-top: -36px !important;
    }

    .Solution .arrow5 {
        margin-top: -36px !important;
        color: white !important;
    }

    .Solution .overlayy {
        background: linear-gradient(180deg, #00000000, #000000) !important;
        height: 150px;

    }

    .Solution h5 {
        margin-top: 108px !important;
        margin-left: 5px;
        font-size: 14px;
        color: white !important;
    }

    .Solution .card:hover .arrow1,
    .Solution .card:hover .arrow2,
    .Solution .card:hover .arrow3,
    .Solution .card:hover .arrow4,
    .Solution .card:hover .arrow5 {
        color: white !important;
        margin-top: -40px !important;
    }
}

@media screen and (max-width: 575px) {
    .Solution p {
        display: none;
    }

    .Solution .card {
        height: 200px;
        position: relative;
        overflow: hidden;
        background-color: transparent;
    }

    .Solution p {
        display: none;
    }

    .Solution h5 {
        margin-top: 158px !important;
        margin-left: 30px;
        font-family: "Bebas Neue", serif;

        color: #2d2d2d;
        font-size: 18px;
    }
}

#industry h1 {
    font-family: "Bebas Neue", serif;

}

@media screen and (max-width: 429px) {
    .Solution .card {
        height: 150px !important;
    }

    .Solution h1 {
        font-size: 40px !important;
        margin-top: 100px !important;
    }

    .Solution h2 {
        margin-left: 5px !important;
        left: 1px;
        font-size: 15px;
        bottom: 42px;
        color: white !important;
        width: 100px;
    }

    .Solution .card:hover h2 {
        font-size: 18px !important;
        padding-right: 5px;
    }

    .Solution .arrow1,
    .Solution .arrow2,
    .Solution .arrow3,
    .Solution .arrow4,
    .Solution .arrow5 {
        margin-left: 105px !important;
        margin-top: -28px !important;
        font-size: 13px !important;
    }

    .Solution .arrow5 {
        color: white !important;
    }

    .Solution .overlayy {
        background: linear-gradient(180deg, #00000000, #000000) !important;
        height: 150px;

    }

    .Solution h5 {
        margin-top: 125px !important;
        margin-left: 5px;
        font-size: 12px;
        color: white;
        font-weight: bold;
        font-family: 'Lato';
    }

    .Solution .card:hover .arrow1,
    .Solution .card:hover .arrow2,
    .Solution .card:hover .arrow3,
    .Solution .card:hover .arrow4,
    .Solution .card:hover .arrow5 {
        color: white !important;
        margin-top: -22px !important;
        margin-left: 75px !important;
    }
}

@media screen and (max-width: 768px) {
    .Solution {
        padding-bottom: 0 !important;
    }
}


.carouselTicker__item {
    margin: 0 0 0 0px;
    float: left;
    background: #ffddc5;
    width: 200px;
    height: 200px;
    text-align: center;
    border-radius: 5px;
    margin-right: 40px;
    transition: transform 0.5s;
}


.carouselTicker .carouselTicker__item:hover {
    /* Scale down the size of the icon-box on hover */
    transform: scale(0.8);
    z-index: 1;
    cursor: pointer;
}


.carouselTicker .carouselTicker__item .lottie-player {
    width: 180px;
    z-index: -1 !important;
    margin: auto;
    padding: 30px;

}

.carouselTicker .carouselTicker__item:hover .lottie-player {
    width: 200px;
    position: relative;


}

.carouselTicker .carouselTicker__item p {
    visibility: inherit;
    font-weight: bold;
    font-family: "Lato" !important;
}


.carouselTicker .carouselTicker__item:hover p {
    visibility: hidden;
}

.carouselTicker__list {
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    display: flex;
}

/* @media screen and (min-width: 408px) and (max-width:422px) {
    .carouselTicker .carouselTicker__item {
        background: #ffddc5;
        width: 174px !important;
        height: 125px !important;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 8px;
    }
} */


@media screen and (max-width: 768px) {

    .carouselTicker .carouselTicker__item {
        background: #ffddc5;
        width: 100px;
        height: 100px;
        text-align: center;
        border-radius: 5px;
        margin-right: 37px;


    }


    .carouselTicker .carouselTicker__item .lottie-player {
        width: 94px;

        padding: 20px !important;

    }


    .carouselTicker .carouselTicker__item:hover .lottie-player {
        width: 110px;
        position: relative;


    }

    .carouselTicker .carouselTicker__item p {
        font-size: 10px !important;
    }


}


.custom-assessment {
    background: #fff6ee;
    height: 685px;
    bottom: -60px;

    @media(max-width: 767px){
        height: auto !important;
        background: #5290c1 !important;
        .container{
            position: relative !important;
        }
        .bottom-bg{
            display: none !important;
        }
    }
}

.custom-assessment lottie-player {
    width: 100%;
    position: relative;
    bottom: -60px;
    @media(max-width: 767px){
        bottom: 0px !important;
    }


}

.custom-assessment .lottie-player {
    width: 689px !important;
    position: relative;
    bottom: -60px;
    left: -97px;
}

.custom-assessment h1 {
    font-family: "Bebas Neue", serif;
    font-size: 65px;
    margin: 0;
}

.custom-assessment h5 {
    color: #aeaeae !important;
}

.custom-assessment hr {
    margin-top: 0px;
}

.custom-assessment ::placeholder {
    color: #aeaeae;
    font-size: 14px;
    margin: auto;
}

.custom-assessment input.form-control {
    height: 65px;
    border-radius: 5px;
}

.custom-assessment button {
    background-color: #5290c1;
    color: #FFFF;
}

.custom-assessment button:hover {
    color: #1F4F33;
    background-color: white;
}

.custom-assessment .bottom-bg {
    background-color: #5290c1;
    height: 595px;
}

@media screen and (max-width: 374px) {
    .custom-assessment {
        height: 645px;
    }

    .custom-assessment .bottom-bg {
        height: 650px;
    }
}

@media screen and (min-width: 375px) and (max-width: 426px) {
    .custom-assessment {
        height: 710px;
    }

    .custom-assessment .bottom-bg {
        height: 690px;
    }
}

@media screen and (min-width: 427px) and (max-width: 992px) {
    .custom-assessment {
        height: 850px;
    }

    .custom-assessment .bottom-bg {
        height: 835px;
    }

    .custom-assessment h1 {
        font-size: 65px !important;

    }
}

@media screen and (max-width: 768px) {
    .custom-assessment lottie-player {
        bottom: -20px !important;
    }

    .custom-assessment h1 {
        font-size: 32px;
    }

    .custom-assessment h5 {
        font-size: 14px;
    }

    .custom-assessment hr {
        margin-top: 0px;
    }

    .custom-assessment input.form-control {
        height: 50px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    #custom-assessment h1 {
        font-size: 55px;
    }

    .custom-assessment .lottie-player {
        width: 574px !important;
        position: relative;
        bottom: -91px;
        left: -77px;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .custom-assessment lottie-player {
        width: 100%;
        position: relative;
        bottom: 20px;

    }
}

.custom-assessment .wpcf7-response-output {
    color: white;
}

.custom-assessment .wpcf7 form .wpcf7-response-output {
    color: white;

}

/*custom assesment*/


/*solution*/


/* @media screen and (min-width: 412px) and (max-width: 768px) {
.Tab .tab_btn {
font-size: 27px !important;}
}
@media screen and (min-width: 390px) and (max-width: 411px) {
.Tab .tab_btn {
font-size: 25px !important;}

}
@media screen and (min-width: 360px) and (max-width: 390px) {
.Tab .tab_btn {
font-size: 22px !important;}

}
@media screen and (min-width: 320px) and (max-width: 360px) {
.Tab .tab_btn {
font-size: 18px !important;}

} */
@media screen and (max-width: 768px) {
    .Tab img {
        border-radius: 15px;

    }

    .tab_box {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .tab_btn {
        flex: 1;
        padding: 10px;
        /* Adjust as needed */
        text-align: center;

        border: none;
        cursor: pointer;
    }


    .Tab .tab_btn {

        height: 58px !important;

    }

    .Tab p {
        font-size: 16px !important;
    }

}


.Tab lottie-player {
    width: 36px !important;
    height: 33px !important;
}

#rippl {
    width: 100% !important;
    height: 1000px !important;
    justify-content: center !important;
    align-items: center !important;
    bottom: 50px;
    position: absolute;
}

.line {
    position: absolute;
    top: 56px;
    left: 0px;
    width: 50%;
    height: 5px;
    background-color: #5290c1;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.content_box .content.active {
    display: block;
    transition: all 0.3s ease;
}

.text1 {
    color: white !important;
}

.reveal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform: translateY(100px);
    opacity: 0;
    transition: all 4s ease;

}

.reveal.active {
    transform: translateY(0px);
    opacity: 1;
}

#first h3 {
    top: 400px !important;
    width: 700px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 300;
    font-family: 'Lato';
    text-align: left;
}

.text-container {

    justify-content: center;
    align-items: center;
    display: inline !important;
    justify-content: left;
    align-items: left;
    height: 100vh;
    /* Set a fixed height for the text container */
    background-color: transparent !important;
    /* Add a background color for the container */
    position: sticky;
    top: 30;
    /*transform: translateX(-50%);*/
    z-index: 3;
    margin-left: 100px !important;
    transition: top 1s ease;
    /* Add a smooth transition for the text scroll effect */


}

.text {

    display: inline !important;
    justify-content: left;
    align-items: left;
    max-width: 80%;
    transition: transform 0.9s ease;
    /* Add a smooth transition for the text scroll effect */
    font-family: "Bebas Neue", serif;


}

.text1 {
    color: white;
}

.text h1 {
    color: #AEAEAE;
    font-size: 30px;
}

.text span {
    color: #5290c1;
    font-size: 100px !important;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative !important;
    z-index: 2 !important;
    /* Adjust the z-index to place the image container above the Lottie player */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 900px !important;
    overflow: hidden;
}

.responsive-image {
    width: 85%;
    height: 900px !important;
    transition: width 0.8s ease-in-out;
    /* Add a smooth transition for width changes */
}

.overlay {
    position: absolute;
    width: 85%;
    height: 900px !important;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
    transition: opacity 0.4s ease-in-out, width 0.8s ease-in-out;
    pointer-events: none;
    z-index: 1;
    padding-top: 30px;
}

.content_box {
    padding: 0px;
}

@media (max-width: 1023px) and (min-height: 1365px) {
    #first h3 {
        top: -200px !important;
        width: 704px;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 300;
        font-family: 'Lato';

    }

    #rippl {

        height: 1200px !important;

        bottom: 200px !important;

    }
}


@media screen and (min-width: 768px) and (max-width: 992px) {
    .text span {
        line-height: 69.9px;

        font-size: 75px !important;
    }

    .text h1 {
        line-height: 42.9px;
        font-size: 24px;
    }


    .text-container {
        top: 50px !important;
        left: 2% !important;

    }


    .sub-container {
        margin-top: -230px;
    }
}


@media screen and (max-width: 768px) {
    .text span {
        line-height: 69.9px;

        font-size: 75px !important;
    }

    .text h1 {

        line-height: 42.9px;
        font-size: 24px;
    }

    .text-container {
        top: 100px !important;
        left: -1% !important;

    }

    #first h3 {
        width: fit-content !important;
        font-size: 16px;
    }

    .sub-container {
        margin-top: -200px;
    }
}


.solution-details .overlay {
    position: absolute;
    width: 85%;
    height: 900px !important;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
    transition: opacity 0.4s ease-in-out, width 0.8s ease-in-out;
    pointer-events: none;
    z-index: 1;
    padding-top: 30px;
    justify-content: flex-start;
}

.Tab {
    padding: 60px 0px;
    background-color: #1F4F33;
    width: 100%;
}

.tab_box {
    width: fit-content;
    align-items: center;
    border-bottom: 2px solid #aeaeae;
    font-size: 18px;
    position: relative;
}

.tab_box .tab_btn {
    font-size: 18px;
    font-weight: 600px;
    color: white;
    background: none;
    padding: 18px;
    cursor: pointer;
    width: max-content;
    border: none !important;
    font-family: "Bebas Neue", serif;

    justify-content: space-around;
}

.tab_box .tab_btn.active {
    color: #5290c1;
    font-size: 22px;
}

.content_box .content {
    display: none;
    animation: moving 0.5s ease;
}

@keyframes moving {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

.content_box .content.active {
    display: block;
    transition: all 0.3s ease;
}

.content_box .content h2 {
    margin-bottom: 10px;
}

.line {
    position: absolute;
    top: 55px;
    left: 0px;
    width: fit-content;
    height: 5px;
    background-color: #5290c1;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.Tab p,
h5,
h6 {
    font-weight: 300;
    font-family: "Lato" !important;
    color: #ffffff;
}

.benefits h6 {
    font-family: "Lato" !important;
    margin-top: -25px !important;
    margin-left: 50px !important;
}

.Tab h5 {
    font-weight: 400;
    font-family: "Lato" !important;
}

.anim-btn button {
    margin-left: 0px;
    width: 200px;
    position: relative;
    border-radius: 5px;
    transition: 2s all ease;
    z-index: 1;
    font-size: 18px !important;
    cursor: pointer;
    font-family: "Bebas Neue", serif;

    background-color: #ffffff;
    color: #1F4F33;
    height: 45px;
    margin-top: 50px;
}

.anim-btn button::before {
    content: "";
    position: absolute;
    z-index: -1;
    transform: translate(-50%, -50%);
    background-color: #5290c1;
    border-radius: 5px;
    transition: all 0.3s;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 100%;
}

.anim-btn button:hover {
    color: white;
    transition: all 0.6s;
}

.anim-btn button:hover::before {
    height: 100%;
    width: 100%;
    border-radius: 5px;
}

@media screen and (max-width: 321px) {
    .Tab .tab_btn {
        font-size: 16px !important;
    }
}

@media screen and (min-width: 321px) and (max-width: 768px) {
    .Tab .tab_btn {
        font-size: 20px !important;
    }
}

@media screen and (max-width: 768px) {
    .Tab img {
        border-radius: 15px;

    }

    .tab_box {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .tab_btn {
        flex: 1;
        padding: 10px;
        /* Adjust as needed */
        text-align: center;

        border: none;
        cursor: pointer;
    }


    .Tab .tab_btn {

        height: 58px !important;

    }

    .Tab p {
        font-size: 16px !important;
    }

}


.Tab lottie-player {
    width: 36px !important;
    height: 33px !important;
}

.Tab h1,
span {
    font-family: "Bebas Neue", serif;
    position: relative;
    color: #FFFF;
}

.Tab h1 {
    font-size: 30px;
    color: #AEAEAE;
}

.Tab span {
    color: #5290c1;
    font-size: 95px;
}

.Tab .sub-image {
    min-height: 650px;
}


/*contact page*/
.contact .title, .enquiry-form .title {
    font-family: "Bebas Neue", serif;
    font-size: 75px;
    color: #2D2D2D;
    padding: 0;
    display: block;
    background: transparent;
    position: relative;
    inset: unset;
    margin: 0 0 30px;
}

.enquiry-form h5 {
    color: #1F4F33;
    font-weight: 500;
}

.contact .title > span {
    color: #5290c1;
}

@media screen and (max-width: 768px) {
    .contact .title {
        font-size: 55px;
    }

    .contact iframe {
        height: 100% !important;
    }
}

@media screen and (max-width: 767px) {
    .contact .query-text {
        position: relative !important;
        font-size: 15px;
    }
}

.contact .location {
    font-family: "Bebas Neue", serif;
    font-size: 15px;
    width: 95px;
    text-align: center;
    padding-bottom: 10px;
    color: #7B7B7B;
    cursor: pointer;
}

.contact .location.active {
    color: #1F4F33;
    /* border-bottom: 5px solid #1F4F33; */
    font-size: 18px;
}

.contact .location.active hr {
    border-top: 5px solid black;
    width: 100%;
    position: relative;
    opacity: 1;
    top: 12px;
    display: block;
    margin: 0;
}

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

.enquiry-form input[type="submit"] {
    background-color: #1F4F33;
    color: white;
}

.enquiry-form input.form-control, .enquiry-form select.form-control,
textarea.form-control {
    height: 70px;
    margin-top: 20px;
    border: 1px solid #AEAEAE;
    font-size: 14px;
    padding: 25px !important;
    font-weight: 300;
    font-family: 'Lato';
}

.enquiry-form textarea.form-control {
    height: 200px;
    padding: 25px;
}

.enquiry-form select.form-select {
    height: 70px;
    margin-top: 20px;
    border: 1px solid #ffffff;
    font-size: 14px;
    padding-left: 25px;
    background: transparent;
    color: white;
}

.enquiry-form select.form-select option {
    background-color: white;
    color: black;
}

.enquiry-animate-btn button {
    position: relative;
    border-radius: 5px;
    transition: 2s all ease;
    z-index: 1;
    font-size: 16px;
    cursor: pointer;
    font-family: "Bebas Neue", serif;
    background-color: #1F4F33;
    color: white;
}

.enquiry-animate-btn button::before {
    content: "";
    position: absolute;
    z-index: -1;
    transform: translate(-50%, -50%);
    background-color: #2D2D2D;
    border-radius: 5px;
    transition: all 0.3s;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 100%;
}

.enquiry-animate-btn button:hover {
    color: #fff;
    transition: all 0.6s;
    /* border: 1px solid #1F4F33; */
    background: #2D2D2D;
}

.enquiry-animate-btn button:hover::before {
    height: 100%;
    width: 100%;
    border-radius: 5px;
}

.enquiry-form .blue-box {
    background-color: #1F4F33;
    height: 100%;
    position: relative;
    margin-top: 200px;
}

.enquiry-form .blue-box .container {
    background: #5290c1;
    position: relative;
    top: -200px;
    border-radius: 5px;
}

@media (max-width: 768px) {

    .enquiry-form input.form-control,
    textarea.form-control {
        height: 45px;
        margin-top: 10px;
        font-size: 12px;
        padding: 12px 20px !important;
    }

    .enquiry-form textarea.form-control {
        height: 150px;
        padding: 25px;
    }

    .enquiry-form select.form-select {
        height: 45px;
        margin-top: 10px;
        border: 1px solid #ffffff;
        font-size: 12px;
    }

    .enquiry-form .blue-box {
        background-color: #1F4F33;
        height: 455px;
        position: relative;
        margin-top: 200px;
    }

    .enquiry-form .blue-box .container {
        background: #5290c1;
        position: relative;
        top: -200px;
        left: 0px;
    }
}

@media(max-width: 767px){
    .enquiry-form{
        .position-absolute{
            position: relative !important;
        }
        .blue-box {
            background-color: inherit;
            height: auto !important;
            position: relative;
            margin-top: 0;
            .container{
                position: relative !important;
                top: 0 !important;
                left: 0 !important;
                .position-absolute{
                    position: relative !important;
                    top: 0 !important;
                    left: 0 !important;
                }
            }
        }
    }
}
/*---------------------------------
 Select StyleSheet
 ----------------------------------*/

.dropdown-el {
    position: relative;
    display: inline-block;
    /* overflow: hidden; */
    cursor: pointer;
    white-space: nowrap;
    color: #fff;
    outline: none;
    /* border: 1px solid #1F4F33; */
    border: 1px solid white;
    border-radius: 5px;
    background: transparent;
    font-family: 'Lato-SemiBold';
    width: 100%;
    margin-top: 20px;
    height: 70px;
}

.dropdown-el input:focus + label {
    background: #def;
}

.dropdown-el input {
    display: inline-block;
    position: absolute;
    opacity: 0.01;
}

.dropdown-el label {
    /* border-top: 1px solid #AEAEAE; */
    font-family: 'Lato-SemiBold';
    display: block;
    line-height: 2em;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    top: 0px;
    display: none;
}

.dropdown-el label.active {
    display: block;
    /* border-top: none; */
    position: relative;
    width: 100%;
    margin-top: 20px;
    padding-left: 20px;
    /* color: #1F4F33; */
    color: white;
    margin-bottom: 20px;
    font-family: 'Lato-SemiBold';
}

.dropdown-el::after {
    content: "";
    position: absolute;
    right: 30px;
    top: 30px;
    border: 0.3em solid white;
    border-color: white transparent transparent transparent;
    transition: 0.4s all ease-in-out;
}

.dropdown-el.expanded {
    /* border: 1px solid #1F4F33; */
    background: #fff;
    border-radius: 0.25em;
    padding: 0;
    color: #4e4e4e;
    margin-top: 25px;
    padding: 20px 30px 15px 25px;
    position: absolute;
    width: 360px;
    top: 150px;
    height: auto;
    max-height: fit-content;
}

.dropdown-el.expanded .first-label {
    margin-bottom: 8px !important;
    border-bottom: 0;
    font-family: 'Lato-SemiBold';
}

.dropdown-el.expanded label {
    border-bottom: 1px solid #AEAEAE;
    font-family: 'Lato-Light';
    padding-left: 0px !important;
    margin-top: 0;
    margin-bottom: 0;
    display: block;
}

.dropdown-el.expanded label:hover {
    color: #5290c1;
}

.dropdown-el.expanded label.active {
    margin-top: 0;
    margin-bottom: 0;
}

.dropdown-el.expanded::after {
    transform: rotate(-180deg);
    top: 25px;
    border-color: #1F4F33 transparent transparent transparent !important;
}

.dropdown-el.selected::after {
    border-color: #1F4F33 transparent transparent transparent;
}

.enquiry-animate-btn button.hide {
    position: inherit !important;
}

@media screen and (max-width: 768px) {

    .dropdown-el {
        max-height: 45px;
        margin-top: 10px;
    }

    .dropdown-el.expanded {
        position: relative;
        width: 100%;
        top: 0;
        margin-top: 10px;
    }

    .dropdown-el.expanded .first-label {
        margin-bottom: 0px !important;
    }

    .dropdown-el label {
        font-size: 12px;
    }

    .dropdown-el label.active {
        margin-top: 8px;
    }

    .dropdown-el::after {
        top: 18px;
    }

    img.map {
        height: 100% !important;
    }
}

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

    .dropdown-el.expanded {
        width: 272px;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1399px) {

    .dropdown-el.expanded {
        width: 300px;
    }
}


/*page banner*/
.page-banner-elementor h1 > span {
    font-family: "Bebas Neue", serif;
    color: #5290c1;
    line-height: 1;
}

.page-banner-elementor h1 {
    font-size: 75px !important;
    font-family: "Bebas Neue", serif;
    color: #1F4F33;
    margin: 0;
    line-height: 1;
}

.page-banner-elementor h3 {
    font-size: 1.75rem;
    line-height: 1 !important;
}

.page-banner-elementor .text-lg-end.position-relative {
    text-align: right !important;
    position: relative !important;
}

.page-banner-elementor .text-lg-end.position-relative button {
    position: absolute;
    bottom: 15px;
    right: 12px;
    transition: 1s all ease;
    z-index: 1;
    background-color: #5290c1;
    color: #1F4F33;
    font-family: "Bebas Neue", serif;
}

.page-banner-elementor.image-container {
    background-color: transparent;
}


.get-in-touch .heading-title {
    position: relative;
    font-family: "Bebas Neue", serif;
    font-size: 75px !important;
    margin: 0 !important;
}

.get-in-touch .heading-title > span {
    color: #1F4F33;
}

.get-in-touch .heading-title:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 350px;
    right: 0;
    height: 30px;
    border-top: 2px solid #707070;
}

.get-in-touch .apply-form input.form-control {
    height: 70px;
    margin-top: 35px;
    border: 1px solid #aeaeae;
    font-size: 14px;
    padding-left: 25px;
    font-weight: 300;
    font-family: "Lato";
    border-radius: 0;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
}
.get-in-touch .apply-form .read-more-btn button {
    background-color: #1F4F33;
    right: 12px;
}
input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) {
    overflow-clip-margin: 0px !important;
    overflow: clip !important;
}
.get-in-touch .apply-form .read-more-btn button:hover {
    color: #1F4F33;
}
.get-in-touch input[type="file" i] {
    text-overflow: ellipsis;
    white-space: pre;
    padding-top: 24px !important;
}
.get-in-touch .apply-form .read-more-btn button::before {
    background-color: #5290c1;
}

@media screen and (max-width: 768px) {
    .get-in-touch {
        padding-bottom: 40px;
    }

    .get-in-touch lottie-player {
        width: 105px !important;
        height: 105px !important;
        margin: -20px 0px 0px -25px;
        margin-left: -28px !important;
    }

    .get-in-touch h2 {
        font-size: 15px;
    }

    .get-in-touch .apply-form input.form-control {
        height: 45px;
        margin-top: 12px;
        font-size: 12px;
        border-radius: 5px;
        padding: 12px 20px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .browse-jobs .content {
        padding: 30px 15px;
    }

    .browse-jobs .image-caption p {
        font-size: 12px;
    }
}