/*VARIABLES*/
:root {
    /*Colors*/
    --blue-2: #6AA8F1;
    --blue-1: #4492ED;
    --blue-0: #1F7CEA;
    --navy-0: #002354;
    --lb-5: #FAFCFE;
    --black-9: #191919;
    --black-8: #4C4C4C;
    --black-6: #8C8C8C;
    --black-5: #A9A9A9;
    --black-4: #CCCCCC;
    --black-3: #E6E6E6;
    --black-2: #F2F2F2;
    --black-1: #F7F7F7;
    --green: #23D17A;
    --green-1: #33DD88;
    --green-2: #60E5A2;
    --blue-gradient: linear-gradient(45deg, rgba(0,35,84,1) 0%, rgba(31,124,234,1) 100%);
    --blue-gradient-0: linear-gradient(180deg, rgba(0,35,84,1) 0%, rgba(31,124,234,1) 100%);
    /*Paddings*/
    --size-600: 8rem;
    --size-500: 6.25rem;
    --size-400: 4rem;
    --size-300: 3.25rem;
    --size-200: 2.25rem;
    --size-100: 1.5rem;
    --size-050: 1rem;
    --size-020: .5rem;
    /*Font size*/
    --fs-050: 0.875rem;
    --fs-100: 1rem;
    --fs-200: 1.125rem;
    --fs-300: 1.25rem;
    --fs-400: 1.5rem;
    --fs-500: 1.75rem;
    --fs-600: 2rem;
    --fs-700: 3rem;
    --fs-800: 3.5rem;
    --fs-900: 4.5rem;
    /* Font Family */
    --ff-primary: Sora;
    --ff-secondary: Figtree;
    --body-text: var(--ff-secondary);
    /* Border Radius */
    --border-radius-section:4px;
    --border-radius-element:2px;
}

@media only screen and (max-width: 1366px) {
    :root {
        --size-600: 7rem;
        --size-500: 5rem;
        --size-400: 3.25rem;
        --size-300: 2.75rem;
        --size-200: 2rem;
        --size-100: 1.25rem;
        --size-050: 0.875rem;
        /*Font Size*/
        --fs-700: 2.875rem;
        --fs-800: 3.5rem;
    }
}

@media only screen and (max-width: 1024px) {
    :root {
        --size-600: 6rem;
        --size-500: 4rem;
        --size-400: 2.75rem;
        --size-300: 2.25rem;
        --size-200: 1.75rem;
        --size-100: 1rem;
        --size-050: 0.75rem;
        /*Font Size*/
        --fs-700: 2.5rem;
        --fs-800: 3rem;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --size-600: 5rem;
        --size-500: 3.25rem;
        --size-400: 2.25rem;
        --size-300: 2rem;
        --size-200: 1.5rem;
        --size-100: .75rem;
        --size-050: 0.625rem;
        /*Fonts*/
        --fs-100: 0.75rem;
        --fs-200: 0.875rem;
        --fs-300: 1rem;
        --fs-400: 1.25rem;
        --fs-500: 1.375rem;
        --fs-600: 1.5rem;
        --fs-700: 1.625rem;
        --fs-800: 1.875rem;
        --fs-900: 3.25rem;
    }
}



/*Reset CSS*/

*{
    z-index: 1;
    padding: 0;
    margin: 0;
}

html {
    height: 100%
}
button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
    display:flex; 
}
ul,li{
    list-style:none;
}


/*Scrollbar*/
/* width */
::-webkit-scrollbar {
    width: 0;
}


/* Handle */
::-webkit-scrollbar-thumb {
    background: red;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    } 



/*Effects*/
.shadow{
    filter: drop-shadow(0 0 50px rgba(76, 76, 76, 0.1));
}

/* Positions */
.absolute{
    position:absolute;
}
.top{
    top:0;
}
.bottom{
    bottom:0;
}
.left{
    left:0;
}
.right{
    right:0;
}

/*Layouts*/

body {
    overflow-x: hidden;
}

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

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

.main-wrapper {
    width: 100vw;
    overflow-x: hidden;
    overflow-y: scroll;
}

section {
    width: 100%;
    position: relative;
}

.main-section {
    padding-inline: 100px;
    max-width: 1440px;
    margin: auto;
    z-index: 1;
    position: relative;
}
    @media only screen and (max-width: 1366px) {
        .main-section {
            padding-inline: 52px;
        }
    }
        @media only screen and (max-width: 768px) {
            .main-section {
                padding-inline: 24px;
            }
}


    .row-fluid {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.w-full{
    width:100vw;
}

.w-100{
    width:100%;
}
.h-100{
    height:100%;
}
.h-fit-content{
    height:fit-content;
}
.max-w-1440{
    max-width:1440px;
}
.max-w-500 {
    max-width: 500px;
}
.max-w-100%{
    max-width:100%;
}

.max-w-50 {
    max-width: 50%;
}

.max-h-640{
    max-height: 640px;
}

.link{
    color: var(--blue-0);
    text-decoration: underline;
}


/*Flexbox*/

.flex-col{
    display: flex;
    flex-direction: column;
    /*width: 100%;*/
    flex-shrink:1;
    position:relative;
}

.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-wrap{
    display:flex;
    flex-wrap:wrap;
}
.margin-auto{
    margin:auto;
}
.align-items-center{
    align-items:center;
}
.align-items-start{
    align-items:start;
}
.align-self-center {
    align-self: center;
}
.align-self-end {
    align-self: end;
}
.align-self-stretch {
    align-self: stretch;
}

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

/*Gap*/
.gap {
    gap: 24px;
}
.gap-050 {
    gap: var(--size-050);
}
.gap-100 {
    gap: var(--size-100);
}
.gap-100 {
    gap: var(--size-100);
}
.gap-200 {
    gap: var(--size-200);
}
.gap-300 {
    gap: var(--size-300);
}
.gap-400 {
    gap: var(--size-400);
}
.gap-500 {
    gap: var(--size-500);
}
@media only screen and (max-width: 1024px) {
    .m-flex-col{
        flex-direction:column;
    }
    .row-fluid {
        flex-direction: column;
    }
    .m-reverse{
        flex-direction: column-reverse;
    }
    .gap {
        gap:16px;
    }
}


/*Background Colors*/

.bg-gradient-90{
    background: var(--blue-gradient-0);
}
.bg-gradient-45 {
    background: var(--blue-gradient);
}
.bg-k-100{
    background: var(--black-1);
}
.bg-white{
    background:white;
}

/*Text Styles*/
p, li, a{
    font-family:var(--body-text);
}
.h0 {
    font-size: var(--fs-900);
    font-family: Sora;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
}
h1, .h1{
    font-size:var(--fs-800);
    font-family: Sora;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
}
h2, .h2{
    font-size: var(--fs-700);
    font-family: Sora;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
}
h3, .h3{
    font-size: var(--fs-600);
    line-height: 1;
    font-family: Sora;
    font-weight: 300;
    letter-spacing: -1px;
}
h4, .h4 {
    font-size: var(--fs-500);
    line-height: 1;
    font-family: Sora;
    font-weight: 300;
    letter-spacing: -1px;
}
h5, .h5 {
    font-size: var(--fs-400);
    font-family: Sora;
    font-weight: 300;
    line-height:1.1;
}
.title {
    font-size: var(--fs-400);
    font-family: Sora;
    line-height: 1;
    font-weight: 400;
}

.text-1 {
    font-family: Figtree;
    font-size: var(--fs-300);
    line-height: 1.3;
    font-weight: 100;
}
.text-1-bold {
    font-family: Figtree;
    font-size: var(--fs-300);
    line-height: 1.3;
    font-weight: 500;
}
.text-2 {
    font-family: Figtree;
    font-size: var(--fs-200);
    line-height: 1.3;
    font-weight: 100;
}
.text-2-bold {
    font-family: Figtree;
    font-size: var(--fs-200);
    line-height: 1.3;
    font-weight: 500;
}
.text-3 {
    font-family: Figtree;
    font-size: var(--fs-100);
    line-height: 1.3;
    font-weight: 100;
}
.text-3-bold {
    font-family: Figtree;
    font-size: var(--fs-100);
    line-height: 1.3;
    font-weight: 500;
}
.text-center {
    text-align: center;
}
.span-anywhere {
    display: block;
}



/*Text Color*/

.color-black-8{
    color: var(--black-8);
}
.color-black-6{
    color: var(--black-6);
}
.color-black-5{
    color: var(--black-5);
}
.color-blue-0{
    color: var(--blue-0);
}
.color-lb-5{
    color: var(--lb-5);
}
.color-white{
    color: white;
}
.color-blue-2{
    color:var(--blue-2);
}


/*Text Block*/
.text-wrapper {
    width:100%;
}
.text-cont {
    flex-shrink: 0;
    padding: var(--size-500) 0;
}
.text-cont-left{
    padding-right: 64px;
}
.text-cont-right {
    padding-left: 64px;
}
.text-block{
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    row-gap: var(--size-100);
}
.text-body{
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}
.text-p{
    padding-bottom: 24px;
    border-bottom: 1px solid var(--black-2);
}
.text-p:last-of-type{
    padding: 0;
    border: none;
}
.text-btn-cont{
    padding-top: 24px;
    border-top: 1px solid var(--black-2);
}
    .text-btn-cont > a{
        padding-bottom:var(--size-050);
    }
        .text-btn-cont > a:last-child{
            padding-bottom:0;
        }

    @media only screen and (max-width:1366px){
        .text-cont-left {
            padding-right: 52px;
        }

        .text-cont-right {
            padding-left: 52px;
        }
    }

    @media only screen and (max-width: 1024px) {
        .text-block {
            max-width: 500px;
            margin: auto;
        }
    }
/*Section Headline Block*/
.section-headline-cont {
    width: 100%;
    padding-bottom: var(--size-300);
}

.section-headline {
    padding-bottom: var(--size-100);
    border-bottom: 1px solid var(--black-3);
}


/*Text List*/

.text-list-cont{
    padding-left: 16px;
}
.text-list-item {
    display: flex;
    flex-direction: row;
    column-gap: 16px;
    padding-block:var(--size-100);
    border-bottom:1px solid var(--black-2);

    & > a{
        text-decoration:underline;
    }
}

@media only screen and (max-width: 1024px) {
    .text-list-cont {
        max-width:500px;
    }
}



/*CTA*/

/*CTA NEWNEWNEW*/

button {
    font-family: Sora;
    font-size: 16px;
    color: white;
    cursor: pointer;

    &.large{
        padding:16px 24px;
    }
    &.medium{

    }
}


/*CTA OLD*/
.cta-cont {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 24px;
    padding-top:var(--size-100)
}
.cta-cont-center{
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 24px;
    padding-top: 36px;
    justify-content: center;
}
.cta-main, .cta-main-blue {
    padding: 8px 12px;
    background-color: var(--green);
    font-family: Sora;
    font-size: 16px;
    color: white;
    cursor: pointer;
    align-self: flex-start;
    display: flex;
    flex-direction: row;
    column-gap:8px;
}
.cta-main:hover{
    background-color: var(--green-2);
}
.cta-main-blue {
    background-color: var(--blue-0);
    align-items: center;
}
.cta-main-blue:hover{
    background-color: var(--blue-1);
}
.cta-main-white{
    padding: 8px 12px;
    background-color: white;
    font-family: Sora;
    font-size: 16px;
    color: var(--black-8); 
    cursor: pointer;
    align-self: flex-start;
    justify-self: flex-start;
}
.cta-secondary{
    font-family: Sora;
    font-size: 16px;
    cursor: pointer;
    background-color: transparent;
}


.learn-more-cont {
    display: flex;
    font-size:var(--fs-300);
    color:var(--black-8);
    align-items: center;
    flex-direction: row;
    column-gap: 8px;
    padding-top: 16px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    border-top:1px solid var(--black-2);
}
    .learn-more-cont.white{
        color:white;
        border-color:var(--blue-0);
    }

        .learn-more-cont.white img{
            content:url(/img/cta-arrow-white.svg):
        }

    .learn-more-cont:hover, .industries-cta :hover {
        column-gap: 12px;
    }



/*PADDINGS*/

/*Full paddings*/
.padding-600 {
    padding: var(--size-600);
}

.padding-500 {
    padding: var(--size-500);
}

.padding-400 {
    padding: var(--size-400);
}

.padding-300 {
    padding: var(--size-300);
}

.padding-200 {
    padding: var(--size-200);
}

.padding-100 {
    padding: var(--size-100);
}
.padding-050 {
    padding: var(--size-050);
}

/*Vertical paddings*/
.padding-y-600 {
    padding-top: var(--size-600);
    padding-bottom: var(--size-600);
}

.padding-y-500 {
    padding-top: var(--size-500);
    padding-bottom: var(--size-500);
}

.padding-y-400 {
    padding-top: var(--size-400);
    padding-bottom: var(--size-400);
}

.padding-y-300 {
    padding-top: var(--size-300);
    padding-bottom: var(--size-300);
}
.padding-y-200 {
    padding-top: var(--size-200);
    padding-bottom: var(--size-200);
}
.padding-y-100 {
    padding-top: var(--size-100);
    padding-bottom: var(--size-100);
}

/*Horizontal paddings*/
.padding-x-600 {
    padding-inline: var(--size-600);
}

.padding-x-500 {
    padding-inline: var(--size-500);
}

.padding-x-400 {
    padding-inline: var(--size-400);
}

.padding-x-300 {
    padding-inline: var(--size-300);
}

.padding-x-200 {
    padding-inline: var(--size-200);
}

.padding-x-100 {
    padding-inline: var(--size-100);
}

/*Bottom paddings*/
.padding-b-600 {
    padding-bottom: var(--size-600);
}

.padding-b-500 {
    padding-bottom: var(--size-500);
}

.padding-b-400 {
    padding-bottom: var(--size-400);
}

.padding-b-300 {
    padding-bottom: var(--size-300);
}

.padding-b-200 {
    padding-bottom: var(--size-200);
}
.padding-b-100 {
    padding-bottom: var(--size-100);
}

/*Top paddings*/
.padding-t-600 {
    padding-top: var(--size-600);
}

.padding-t-500 {
    padding-top: var(--size-500);
}

.padding-t-400 {
    padding-top: var(--size-400);
}

.padding-t-300 {
    padding-top: var(--size-300);
}

.padding-t-200 {
    padding-top: var(--size-200);
}
.padding-t-100 {
    padding-top: var(--size-100);
}

/*Right paddings*/
.padding-r-600 {
    padding-right: var(--size-600);
}

.padding-r-500 {
    padding-right: var(--size-500);
}

.padding-r-400 {
    padding-right: var(--size-400);
}

.padding-r-300 {
    padding-right: var(--size-300);
}

.padding-r-200 {
    padding-right: var(--size-200);
}

.padding-r-100 {
    padding-right: var(--size-100);
}

.padding-r-050 {
    padding-right: var(--size-050);
}


/*Margins*/

/*Full margins*/
.margin-600 {
    margin-top: var(--size-600);
    margin-bottom: var(--size-600);
}

.margin-500 {
    margin: var(--size-500);
}

.margin-400 {
    margin: var(--size-400);
}

.margin-300 {
    margin: var(--size-300);
}

.margin-200 {
    margin: var(--size-200);
}

.margin-100 {
    margin: var(--size-100);
}

.margin-050 {
    margin: var(--size-050);
}

/*Vertical margins*/
.margin-y-600 {
    margin-top: var(--size-600);
    margin-bottom: var(--size-600);
}

.margin-y-500 {
    margin-top: var(--size-500);
    margin-bottom: var(--size-500);
}

.margin-y-400 {
    margin-top: var(--size-400);
    margin-bottom: var(--size-400);
}

.margin-y-300 {
    margin-top: var(--size-300);
    margin-bottom: var(--size-300);
}

.margin-y-200 {
    margin-top: var(--size-200);
    margin-bottom: var(--size-200);
}

.margin-y-100 {
    margin-top: var(--size-100);
    margin-bottom: var(--size-100);
}

/*Bottom margins*/
.margin-b-600 {
    margin-bottom: var(--size-600);
}

.margin-b-500 {
    margin-bottom: var(--size-500);
}

.margin-b-400 {
    margin-bottom: var(--size-400);
}

.margin-b-300 {
    margin-bottom: var(--size-300);
}

.margin-b-200 {
    margin-bottom: var(--size-200);
}

.margin-b-100 {
    margin-bottom: var(--size-100);
}

/*Top margins*/
.margin-t-600 {
    margin-top: var(--size-600);
}

.margin-t-500 {
    margin-top: var(--size-500);
}

.margin-t-400 {
    margin-top: var(--size-400);
}

.margin-t-300 {
    margin-top: var(--size-300);
}

.margin-t-200 {
    margin-top: var(--size-200);
}

.margin-t-100 {
    margin-top: var(--size-100);
}

/*Right margins*/
.margin-r-600 {
    margin-right: var(--size-600);
}

.margin-r-500 {
    margin-right: var(--size-500);
}

.margin-r-400 {
    margin-right: var(--size-400);
}

.margin-r-300 {
    margin-right: var(--size-300);
}

.margin-r-200 {
    margin-right: var(--size-200);
}

.margin-r-100 {
    margin-right: var(--size-100);
}





/*Navigation*/
/*Nav container*/
nav {
    position: fixed;
    z-index: 5;
    width: 100%;
    top: var(--size-100);
}
.nav-wrapper {
    position: relative;
    border-radius: var(--border-radius-section)
}
.nav-mob-toggle{
    display:none;
}
.nav-cont {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-inline: var(--size-100);
}

/*Desktop Nav*/
.nav-list {
    display: flex;
    align-items: center;
}
    .nav-list li {
        font-family: Sora;
        font-size: var(--fs-050);
        color: var(--black-8);
        display: flex;
        align-items: center;
        padding: var(--size-050);
        cursor: pointer;
        align-self:stretch;
    }
        .nav-list li button{
            font-size:var(--fs-050);
        }
    .nav-item{
        position:relative;
    }
    .nav-item:after {
        content: '';
        width: 0;
        height: 1px;
        background: var(--blue-0);
        position: absolute;
        display: block;
        transition:all .2s ease-in-out;
    }
    .nav-list li:hover .nav-item:after{
        width:100%;
    }
/*Desktop Nav Dropdown*/
.nav-dropdown {
    position: absolute;
    display: flex;
    padding: 0;
    width: 100%;
    background: white;
    display: flex;
    max-height: 0;
    overflow: hidden;
    transition: all .2s ease-in-out;
    gap: var(--size-050);
}
body:has(#solutions:hover) #solutions-dropdown,
#solutions-dropdown:hover{
    max-height: none;
    padding:var(--size-100);
    transition-delay: 0;
}
body:has(#solutions-dropdown:hover) #solutions a:after{
    width:100%;
}

.nav-dropdown li {
    width: 100%;
    cursor: pointer;
}
    .nav-dropdown li:hover {
        background: var(--black-1);
    }
    .nav-dropdown li:hover > .dropdown-item-h {
        padding-left:var(--size-100);
        transition: all .2s ease-in-out;
    }
    .nav-dropdown li:hover > .dropdown-img {
        background-size: 110%;
    }

.dropdown-img{
    width:100%;
    height:250px;
    background-size:100%;
    background-position:center;
    transition: all .2s ease-in-out;
}
.dropdown-item-h {
    font-family: Sora;
    font-size: var(--fs-300);
    padding-top: var(--size-050);
    color: var(--black-8);
    display: flex;
    justify-content: space-between;
    padding-inline: var(--size-050);
}

.dropdown-item-h:after{
    content:url(/img/cta-arrow.svg);
    display:block;
}


/*Desktop Language Cont*/
.language-cont {
    position: relative;
    padding-left:8px;
}
.language-dropdown {
    position: absolute;
    display: none;
    padding-top: 4px;
}
.language-cont:hover .language-dropdown{
    display:block;
}
.language-cont-mob {
    display: none;
}

/*Mob Navigation*/
.mob-nav-cont {
    display: none;
}

.nav-logo {
    cursor: pointer;
}

@media only screen and (max-width: 1200px) {
    .nav-logo{
            width:150px;
        }
        .nav-list {
            display: none;
        }
        .nav-mob-toggle{
            display:flex;
            padding-block: var(--size-100);
            cursor:pointer;
        }

        /*Mob Toggle*/
            #nav-toggle:checked ~ .mob-nav-cont {
                right:0;
                opacity:1;
            }
            .nav-mob-toggle a {
                content: url(/img/menu-mob.svg);
                height: 18px;
            }

                #nav-toggle:checked + .nav-cont label.nav-mob-toggle a {
                    content: url(/img/close-icon.svg);
                    height: 18px;
                }


        /*Mob Navigation*/
        .mob-nav-cont {
            display: block;
            padding: var(--size-200);
            background: white;
            position: absolute;
            width: 100%;
            max-width:500px;
            top: calc(100% + 8px);
            right: -110%;
            opacity: 0;
            transition: all .3s ease-in-out;
        }
        .mob-nav-cont li {
            font-family: Sora;
            font-size: var(--fs-300);
            color: var(--black-);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--black-2);
            cursor: pointer;
        }

        .mob-nav-submenu li {
            font-family: Sora;
            font-size: var(--fs-300);
            color: var(--black-);
            display: none;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--black-2);
            cursor: pointer;
        }

            .mob-nav-cont li a, .mob-nav-submenu li a {
                padding-block: var(--size-100);
            }

            .mob-nav-cont li:after {
                content: url(/img/cta-arrow.svg);
            }


        .mob-nav-submenu {
            padding-left: var(--size-050);
            width: 100%;
        }

        li:has(.mob-nav-submenu):after {
            display: none;
        }

        li:has(.mob-nav-submenu) {
            border: none;
        }

        /*Mob Language Cont*/
        .language-cont-mob {
            display: flex;
            padding-top: var(--size-200);
            margin: auto;
            width: fit-content;
            gap: var(--size-100);
        }
    }




/*HERO SECTIONS*/

.hero-wrapper {
    width: 100vw;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}


    .home-hero-img {
        position: absolute;
        height: 100%;
        width: 100%;
        right: 0;
        top: 0;
        background-image: url(/img/home-hero-img.png);
        background-repeat: no-repeat;
        background-position: bottom 50px right;
        z-index: 0;
    }
        .home-hero-imgg{
            background-image:url('/img/home-hero-img-lap.png');
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size:contain;
        }
        @media only screen and (max-width:1024px){
            .home-hero-imgg{
                background-position: center;
            }
        }

    .hero-shadow-bg {
        position: absolute;
        width: 100vw;
        height: 50%;
        background: linear-gradient(#03071500, #030715FF);
        bottom: 0;
        z-index: 0;
    }

    .hero-cont {
        padding: 100px;
        padding-bottom: 52px;
        height: 100dvh;
        width: 100%;
        max-width: 1440px;
        max-height: 1080px;        
        display: flex;
        margin: auto;
        position: relative;

        & > .hero-text-cont{
            width:100%;
            max-width:700px;
            align-self: flex-end;
        }
    }
        @media only screen and (max-width: 1366px) {
            .hero-cont{
                padding:52px;
                padding-bottom:36px;
                max-height:none;
            }

        }
        @media only screen and (max-width: 768px) {
            .hero-cont {
                padding: 24px;
            }
        }

/*Hero pages BG*/
.home-hero-wrapper {
    background-image: url(../img/hero-wrapper-bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.how-to-hero-wrapper {
    background-image: url(/img/how-to-hero-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}
    @media only screen and (max-width: 768px) {
        .how-to-hero-wrapper {
            background-image: url(/img/how-to-hero-bg-768.png);
            background-position: top;
        }
    }







    .about-img {
        width: 100%;
        z-index: 1;
    }

    .logo-deco-big {
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
        z-index: -1;
        opacity:0.4;
    }
    .logo-deco-small {
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        z-index: 0;
    }

    .about-bottom-absolute {
        position: absolute;
        width: 100vw;
        height: var(--size-400);
        background-color: white;
        bottom: 0;
        z-index: 0;
    }



    /*Cards*/
    /*Offer card*/

    .splide__track {
        overflow: visible !important;
    }

    .offer-card-wrapper {
        width: 420px !important;
        background-color: white;
        flex-shrink: 0;
    }
        .offer-card-wrapper:hover .offer-card-img-cont{
            background-size:110%;
        }

    .card-padding {
        padding: var(--size-100);
        padding-top: var(--size-300);
    }

    .offer-card-img-cont {
        width: 100%;
        height: 300px;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        transition:all .2s ease-in-out;
    }

    .offer-card-number {
        position: absolute;
        bottom: 0;
        left: 24px;
        transform: translateY(50%);
        background-color: var(--blue-0);
        padding: 4px 8px;
        color: white;
    }

    .offer-card-headline-cont {
        padding-bottom: 20px;
        width: 100%;
    }
        .offer-card-headline-cont > h3,
        .offer-card-headline-cont > h4 {
            min-height: 2lh;
        }

    .charging-stations-img {
        background-image: url(/img/solutions-img-charging-stations.png);
        background-position: center bottom;
    }

    .power-stations-img {
        background-image: url(/img/solutions-img-power-stations.png);
    }

    .indirect-stations-img {
        background-image: url(/img/solutions-img-indirect-stations.png);
    }

    @media only screen and (max-width: 768px) {
        .offer-card-wrapper {
            width: 95% !important;
            max-width: 360px;
            flex-shrink: 0;
            overflow: hidden;
        }

        .offer-card-img-cont {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .offer-card-img {
            height: 100%;
        }

        .sign-up-wrapper {
            height: 500px;
        }

        .how-to-hero-wrapper {
            height: auto;
            max-height: none;
            background-image: url(/img/how-to-hero-bg-768.png);
            background-position-y: top;
        }
    }


    /*Video card*/

    .video-card-wrapper {
        width: 95%;
        max-width: 420px !important;
        background-color: white;
        flex-shrink: 0;
    }

    .video-card-headline-cont {
        min-height: 6lh;
    }

    .video-card-img-cont {
        width: 100%;
        aspect-ratio: 9/10;
        padding: var(--size-050);
        padding-bottom: 0;
        position: relative;
    }

        .video-card-img-cont:after {
            position: absolute;
            content: url(/img/icon-play-big.svg);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .video-card-img-cont > div {
            background-color: var(--black-5);
            height: 100%;
            background-size: cover;
            background-position: center;
        }

    .video-1-img {
        background-image: url(/img/video-1-img.png);
    }

    .video-2-img {
        background-image: url(/img/video-2-img.png);
    }

    .video-3-img {
        background-image: url(/img/video-3-img.png);
    }

    .video-4-img {
        background-image: url(/img/video-4-img.png);
    }







    .clean-energy-img-cont {
        display: flex;
    }

    .clean-energy-img {
        width: 100%;
        max-width: 1100px;
    }



    .industries-learn-more {
        border-top: 1px solid var(--blue-0);
    }

    .industries-headline.animate-out {
        animation: slideOut 0.5s forwards;
    }

    .industries-headline.animate-in {
        animation: slideIn 0.5s forwards;
    }

    @keyframes slideOut {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            transform: translateX(20px);
            opacity: 0;
        }
    }

    @keyframes slideIn {
        0% {
            transform: translateX(-20px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }


    .industries-tab-item,
    .industries-tab-item-active {
        color: var(--black-5);
        padding: 8px 20px;
        cursor: pointer;
        display: flex;
        align-self: center;
        justify-content: center;
        width:25%;
    }

        .industries-tab-item:hover {
            background-color: var(--black-2);
        }

        .industries-tab-item-active {
            font-weight: 500;
            padding: 8px 20px;
            color: var(--blue-0);
            border-bottom: 2px solid var(--blue-0);
        }

        @media only screen and (max-width: 1024px) {
            .industries-tab-item,
            .industries-tab-item-active{
                width:50%;
            }
        }

    .industries-body {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .industries-carousel-text {
        margin-block: var(--size-500);
        margin-left: calc(var(--size-600) * -1);
    }
        @media only screen and (max-width: 1024px) {
            .industries-carousel-text {
                position: absolute;
                margin: 0;
                bottom: calc(var(--size-300) + var(--size-020));
                width: calc(100% - (2 * var(--size-300)) - (2 * var(--size-020)));
            }
        }


    .industries-headline {
        min-height: 4lh;
        min-height: 4lh;
        align-items: flex-end;
        display: flex;
        padding-bottom: var(--size-050);
    }
    .industries-body-img-cont {
        width: 100%;
        position: relative;
        align-self:stretch;
        overflow:hidden;
    }

    .industries-body-img,
    .industries-body-img-active {
        position: absolute;
        transition: transform 0.5s ease, z-index 0s step-end 0.5s;
        transform: translateX(-100%);
        width: 100%;
        height:100%;
        background-color:blue;
        background-size: cover;
        background-position:center;
    }

        .industries-body-img-active {
            transform: translateX(0);
        }

            @media only screen and (max-width: 1024px) {
                .industries-body-img-cont{
                    height:500px;
                }
            }

    /*Industries Slider Images*/
    #construction-img {
        background-image:url(/img/industries-img-construction.png);
    }
    #events-img{
        background-image:url(/img/industries-img-events.png);
    }
    #filming-img {
        background-image: url(/img/industries-img-filming.png);
    }
    #evfleet-img {
        background-image: url(/img/industries-img-evfleet.png);
    }








    .white-block-bottom {
        width: 100vw;
        background-color: white;
        height: 200px;
        position: absolute;
        bottom: 0;
        z-index: 0;
    }

    .partners.wrapper {
        width: 100vw;
        background-color: var(--black-1);
    }

    .partner-carousel-track {
        overflow: visible !important;
        max-width: 1440px;
        margin: auto;
    }

    .partner-item-wrapper {
        width: 500px !important;
        background-color: white;
        align-self: flex-start;
        flex-shrink: 0;
    }

    .partner-item-header {
        position: relative;
        width: 100%;
        height: 220px;
    }

    .partner-item-img {
        width: 100%;
        height: 100%;
    }

    .partner-item-logo {
        position: absolute;
        right: 36px;
        bottom: 0;
        transform: translateY(50%);
        border-radius: 100%;
        width: 120px;
        height: 120px;
    }

    .partner-item-body {
        padding: 36px;
    }

    .partner-item-headline {
        display: flex;
        flex-direction: column;
        row-gap: 4px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--black-2);
    }

    .partner-info-cont {
        display: flex;
        flex-direction: row;
        column-gap: 24px;
        padding: 24px 0;
        border-bottom: 1px solid var(--black-2);
    }

    .partner-info-item {
        display: flex;
        flex-direction: column;
        row-gap: 4px;
        width: 100%;
        justify-content: space-between;
    }

    .partner-numbers-wrapper {
        padding-top: 24px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 8px;
        row-gap: 8px;
        justify-content: flex-end;
        height: auto;
        max-height: 50px;
        overflow: hidden;
        transition: max-height .5s ease-in-out;
    }

        .partner-numbers-wrapper.expanded {
            max-height: 1000px;
        }

    .partner-number-cont {
        width: calc(50% - 4px);
        display: flex;
        flex-direction: row;
        column-gap: 16px;
        padding: 16px;
        background-color: var(--black-1);
        display: none;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

        .partner-number-cont.show {
            display: flex;
        }

        .partner-number-cont.visible {
            opacity: 1;
        }

    .partner-number-icon {
        width: 27px;
    }

    .show-more-cont {
        display: flex;
        flex-direction: row;
        column-gap: 8px;
        width: calc(50% - 8px);
        align-items: center;
        align-self: flex-end;
        justify-content: end;
        cursor: pointer;
    }

    .show-more-cta-arrow {
        width: 16px;
        transition: transform .5s ease-in-out;
    }

    .rotate-arrow {
        transform: rotate(180deg);
    }


/*Become Provider - Sign up Section*/
    .sign-up-wrapper {
        background-image: url(../img/register-img.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .sign-up-text-cont {
        position: relative;
        margin-left:auto;
    }
        @media only screen and (max-width: 1024px) {
            .sign-up-text-cont {
                margin: auto;
            }
        }

    .sign-up-text-block {
        width: 100%;
        max-width: 590px;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--blue-0);
        z-index: 1;
        position: relative;
    }

    .white-block-bottom-64 {
        width: 100vw;
        height: var(--size-600);
        position: absolute;
        z-index: 0;
        background-color: var(--black-1);
        bottom: 0;
    }






.contact-form-cont {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 24px;
    column-gap: 24px;
    justify-content: space-between;
}

    .contact-form-field-50 {
        display: flex;
        flex-direction: column;
        width: calc(50% - 12px);
        row-gap: 4px;
    }

    .contact-form-field-100 {
        width: 100%;
        row-gap: 4px;
        display: flex;
        flex-direction: column;
    }

    .text-danger {
        font-family: 'Figtree';
        font-size: 12px;
        color: #FF6B6B;
    }

    input {
        width: 100%;
        height: 36px;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid var(--black-5);
        color: var(--black-8);
        font-family: Figtree;
        font-style: italic;
        font-size: 16px;
        padding: 4px;
    }

        input:focus, textarea:focus {
            border-bottom: 1px solid var(--blue-0);
        }

    .input-white {
        background-color: transparent;
        border-bottom: 1px solid white;
        color:white;
    }

        .input-white::placeholder {
            color: white; 
            font-style: italic;
            opacity: 0.4;
        }

    textarea {
        width: 100%;
        height: 250px;
        border: none;
        border-bottom: 1px solid var(--black-5);
        background-color: transparent;
        resize: none;
        color: var(--black-8);
        font-family: Figtree;
        font-style: italic;
        font-size: 16px;
        padding: 4px;
    }

        textarea.small {
            height: 150px;
        }

        textarea:focus, input:focus {
            outline: none;
        }



    /*Footer*/

    .footer-body {
        display: flex;
        flex-direction: row;
        padding-bottom: var(--size-100);
        border-bottom: 1px solid var(--blue-0);
        justify-content: space-between;
    }

    .footer-logo-cont {
        display: flex;
        flex-direction: column;
        padding-bottom: var(--size-200);
    }

    .footer-logo {
        width: 350px;
        padding-bottom: var(--size-300);
    }


    .footer-navigation {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

        .footer-navigation ul {
            padding-left: var(--size-400);
        }

            .footer-navigation ul:first-child {
                padding: 0;
            }

    .footer-link {
        font-size: var(--fs-200);
        font-family: Sora;
        color: white;
        cursor: pointer;
        transition: all .3s ease-in-out;
        padding-block: var(--size-050);
    }

        .footer-link:hover {
            transform: translateX(4px);
        }

    @media only screen and (max-width: 1024px) {
        .footer-body {
            flex-wrap: wrap;
        }

        .footer-logo-cont {
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            border-bottom: 1px solid var(--blue-0);
        }

        .footer-navigation ul,
        .footer-navigation ul:first-child {
            padding-block: var(--size-100);
        }
    }

    @media only screen and (max-width: 768px) {
        .footer-logo-cont {
            flex-direction: column;
        }

        .footer-logo {
            width: 250px;
        }

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

            .footer-navigation ul {
                padding: 0;
            }
    }

    @media only screen and (max-width: 548px) {
        .footer-cont {
            padding: 52px 24px;
            max-width: none;
        }
    }





    .span-with-clean-energy {
        display: block;
    }

    .steps-section {
        width: 100vw;
        position: relative;
    }

    .steps-section-bottom {
        position: absolute;
        width: 100%;
        height: 50px;
        bottom: 0;
    }

    .steps-wrapper {
        width: 100%;
        max-width: 1440px;
        padding: 0 100px;
        margin: auto;
    }

    .steps-cont {
        display: flex;
        flex-direction: row;
        column-gap: 24px;
    }

    .step-item {
        width: 100%;
        padding: 72px 24px 24px 24px;
        background: var(--blue-gradient);
        display: flex;
        flex-direction: column;
        row-gap: 32px;
        position: relative;
        align-items: flex-start;
    }

    .step-number-absolute {
        position: absolute;
        top: 0;
        right: 10px;
        font-family: Sora;
        font-size: 92px;
        color: rgba(255, 255, 255, 0.1);
    }

    .step-1-2-bg-bottom {
        width: 100vw;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 250px;
        z-index: 0;
        background-color: var(--black-1);
    }

    .forecast-img {
        width: 100%;
        max-width: 650px;
    }

    .step-2-wrapper {
        width: 100%;
        max-width: 1440px;
        background-color: white;
        margin: auto;
        display: flex;
        flex-direction: row;
        z-index: 2;
        position: relative;
    }

    .step-2-cont {
        display: flex;
        flex-direction: column;
        width: 50%;
        flex-shrink: 0;
    }

    .step-2-text {
        width: 100%;
    }

    .step-2-img {
        background-image: url("/img/search-img.png");
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        position: relative;
    }

    @media only screen and (max-width: 1024px) {
        .step-2-text {
            width: fit-content;
        }

        .step-2-img {
            display: none;
        }
    }


    .search-absolute-img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 55%;
        left: -50px;
        filter: drop-shadow(0 0 20px rgba(0,0,0,0.15));
    }

    .search-cont {
        align-self: flex-start;
        padding: 64px;
        display: flex;
        flex-direction: column;
        row-gap: 64px;
    }

    .scan-cont {
        background: var(--blue-gradient);
        align-self: flex-start;
        padding: 64px;
    }

    .scan-request-text-block {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--blue-0);
    }

    .step-3-wrapper {
        width: 100vw;
    }

    .step-3-cont {
        width: 100%;
        max-width: 1440px;
        padding: 100px;
        margin: auto;
        display: flex;
        flex-direction: column;
        row-gap: 100px;
    }

    .step-3-text {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .step-3-data {
        width: 100%;
        display: flex;
        flex-direction: row;
        column-gap: 24px;
    }

    .step-3-data-item {
        background-color: white;
    }

    .step-3-data-header {
        width: 100%;
        height: 180px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .step-3-data-img img {
        width: 100%;
    }

    #power-station-img {
        background-image: url("/img/power-station.png");
    }

    #indirect-img {
        background-image: url("/img/indirect.png");
    }

    #charging-station-img {
        background-image: url("/img/charging-station.png");
    }

    .step-3-data-cont {
        padding: 36px 24px 24px 24px;
        display: flex;
        flex-direction: column;
    }

    .step-3-data-text-cont {
        display: flex;
        flex-direction: column;
        row-gap: 12px;
        padding-bottom: 36px;
        border-bottom: 1px solid var(--black-2);
    }



    .input-date-row {
        display: flex;
        flex-direction: row;
        column-gap: 8px;
    }

    .input-field-section {
        padding-bottom: 16px;
        border-bottom: 1px solid var(--black-2)
    }

    .input-radio-wrapper {
        display: flex;
        flex-direction: row;
        gap: 24px;
        padding-top: 6px;
        flex-wrap: wrap;
    }

    .input-radio-cont input {
        opacity: 0;
        width: 0;
    }

    .input-label-cont {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .radio-label {
        color: var(--black-5);
    }

    .checkmark {
        width: 16px;
        height: 16px;
        border-radius: 100%;
        border: 2px solid var(--black-5);
        display: flex;
    }

    .input-radio-cont {
        display: flex;
        flex-direction: row-reverse;
        gap: 4px;
        padding: 0 10px 0px 4px;
        align-items: center;
    }

        .input-radio-cont.active {
            background-color: var(--blue-0);
        }

            .input-radio-cont.active > .radio-label {
                color: white;
            }

            .input-radio-cont.active > .checkmark {
                border: 2px solid white;
            }



    .img-cont {
        min-height: 100%;
        width: 100%;
        display: flex;
        align-self: stretch;
        position: relative;
        background-size: cover;
        background-position: center;
    }

    .img-50vw {
        position: absolute;
        width: 50vw;
        height: 100%;
        background-color: blue;
        right: -1px;
        background-size: cover;
        background-position: center right;
    }

    .img-50vw-right {
        position: absolute;
        width: 50vw;
        height: 100%;
        background-color: blue;
        left: 0;
        background-size: cover;
        background-position: center right;
    }

    .ch-st-hero {
        background-image: url(/img/ch-st-hero-img.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .ch-st-intro {
        padding-top: 100px;
        display: flex;
        flex-direction: column;
        row-gap: 100px;
    }

    .ch-st-intro-text {
        padding: 100px 0;
    }

    .ch-st-intro-deco {
        position: absolute;
        bottom: 0;
        width: 100vw;
        background-color: white;
        height: 100px;
        z-index: 0;
    }

    .ch-st-intro-img {
        background-image: url(/img/ch-st-intro-img.png);
    }

    .power-st-intro {
        padding: 100px;
        display: flex;
        flex-direction: column;
        row-gap: 100px;
    }

    .accessing-evse-img {
        background-image: url(/img/accessing-evse-img.png);
    }

    .right-equipment-img {
        background-image: url(/img/right-equipment-img.png);
        background-position: center bottom;
    }

    .building-card-img {
        background-image: url(/img/building-card-img.png);
    }

    .privacy-policy-hero{
        background-image: url(/img/privacy-policy-hero.png);
    }

    .padding-bottom-300 {
        padding-bottom: 300px;
    }

    .padding-a-top-300 {
        padding-top: 300px;
    }

    .margin-top--300 {
        margin-top: -300px;
    }

    .request-form-wrapper {
        padding: 64px 52px 52px 52px;
        display: flex;
        flex-direction: column;
        row-gap: 80px;
    }

    .request-form-cont {
        display: flex;
        flex-direction: column;
        row-gap: 48px;
    }

    .request-form-section {
        display: flex;
        flex-direction: column;
        row-gap: 36px;
    }

    .request-form-h {
        padding-bottom: 8px;
        border-bottom: 1px solid var(--blue-2);
        padding-bottom: 8px;
        border-bottom: 1px solid var(--blue-2);
        color: var(--blue-2);
    }

    .request-form-h-gray {
        padding-bottom: 8px;
        border-bottom: 1px solid var(--black-2);
    }

    .form-field {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }

    .request-form-field-100 {
        width: 100%;
    }

    .power-st-hero {
        background-image: url(/img/power-st-hero-img.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .power-stations-intro {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .power-st-intro-img {
        background-image: url(/img/power-st-intro-img.png);
        background-position: center right;
    }

    .how-to-use-power-st-img {
        background-image: url(/img/how-to-use-power-st-img.png);
        background-position: center left;
    }

    .mob-app-img {
        width: 100%;
        padding-top: 52px;
    }

    .indirect-st-hero {
        background-image: url(/img/indirect-st-hero-img.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .indirect-st-intro-img {
        background-image: url(/img/indirect-st-intro-img.png)
    }

    .request-scan-img {
        background-image: url(/img/request-scan-img.png);
    }

    .execute-scan-img {
        background-image: url(/img/execute-scan-img.png);
    }

    .absolute-gray-bottom {
        position: absolute;
        width: 100vw;
        height: 150px;
        background-color: var(--black-1);
        bottom: 0;
        z-index: 0;
    }

    .scan-requst-deco {
        position: absolute;
        width: 100vw;
        height: 200px;
        background-color: var(--black-1);
        bottom: 0;
        z-index: 0;
    }

    .scan-request-wrapper {
        width: 100%;
    }

    .scan-request-cont {
        width: 100%;
        justify-content: space-between;
        padding: 52px 0;
    }

    .scan-request-form-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .scan-request-form-cont {
        background-color: white;
        width: 100%;
        max-width: 500px;
        height: 750px;
        padding: 36px;
        display: flex;
        flex-direction: column;
    }

    .tab {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        display: none;
    }

        .tab.active {
            display: flex;
        }

    .scan-request-section-h {
        padding-bottom: 4px;
        border-bottom: 1px solid var(--black-3);
    }

    .scan-request-control {
        padding-top: 24px;
        border-top: 1px solid var(--black-2);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 36px;
    }

    .scan-request-btn-cont {
        column-gap: 16px;
        display: flex;
        justify-content: end;
        align-items: center;
    }

    .form-indicator-cont {
        display: flex;
        flex-direction: row;
        column-gap: 8px;
        align-self: center;
        width: 100%;
    }

    .form-indicator {
        height: 5px;
        width: 100%;
        background-color: var(--black-3);
    }

        .form-indicator.active {
            background-color: var(--blue-0);
        }

    .tab.request-complete {
        height: 100%;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 36px;
    }


    /* Date Picker */

    :: -webkit-datetime-edit {
        background-color: white;
        padding: 5px;
        color: var(--black-5);
        font-family: Figtree;
        font-size: 12px;
    }

    ::-webkit-datetime-edit-fields-wrapper {
        background-color: white;
        padding: 0 20px 0 4px;
    }

    ::-webkit-datetime-edit-text {
        padding: 0 6px;
    }

    ::-webkit-calendar-picker-indicator {
        background-color: var(--black-2);
        color: red;
        padding: 6px;
        border-radius: 4px;
    }

        ::-webkit-calendar-picker-indicator:hover {
            background-color: var(--black-3);
            padding: 6px;
            padding-top: var(--size-300);
        }



    /*INDUSTRIES PAGE*/

    .industries-number-item {
        font-size: var(--fs-900);
        color: white;
        width: 50%;
        padding-inline: var(--size-100);
        padding-block: var(--size-100);
    }

        .industries-number-item p:last-child {
            padding-bottom: var(--size-100);
            border-bottom: 1px solid var(--blue-0);
        }

    .industries-list {
        width: 100%;
        max-width: 500px;
        padding-block: var(--size-050);
        cursor: pointer;
        display: flex;
        flex-direction: column;
    }

        .industries-list input{
            display:none;
        }
            .industries-list div {
                font-size: var(--fs-600);
                font-family: Sora;
                color: var(--black-5);
                cursor: pointer;
                border-bottom: 1px solid var(--black-2);
                border-bottom: 1px solid var(--black-2);
                padding-block: var(--size-100);
            }
                .radio-label{
                    cursor:pointer;
                }
            .industries-list input[type="radio"]:checked + label{
                color:var(--blue-0);
            }

        .industries-list label:hover {
            padding-left: var(--size-100);
            transition: all .2s ease-in-out;
        }

        .industries-list li.active {
            color: var(--blue-0);
            padding-left: var(--size-050);
            padding-left: var(--size-100);
        }

    .industries-carousel-wrapper {
        max-width: 500px;
        align-self: stretch;
        justify-content: flex-end;
        background: white;
    }

    .industries-carousel-item {
        background-color: blue;
        height: 100%;
        display: flex;
        padding: var(--size-050);
    }

        .industries-carousel-item div {
            padding: var(--size-200);
            display: flex;
            flex-direction: column;
            gap: var(--size-050);
            backdrop-filter: blur(30px);
            height: fit-content;
            align-self: end;
            background-color: #ffffff45;
        }

    @media only screen and (max-width:1024px) {
        .industries-list {
            margin: auto;
            max-width: 450px;
        }

        .industries-carousel-wrapper {
            margin: auto;
        }

        .industries-carousel-item {
            padding-top: 300px;
        }
    }


    .benefits-section {
        background-image: url(../img/hero-wrapper-bg.svg);
    }
    .benefits-wrapper{
        display:flex;
    }
        @media only screen and (max-width:1366px) {
            .benefits-wrapper {
                flex-direction:column-reverse;
            }
        }

    .benefits-2nd-col{
        padding-top:var(--size-400);
    }
        @media only screen and (max-width:1024px){
            .benefits-2nd-col {
                padding-top: 0;
            }
        }
    /*Industrires page Benefit Cards*/
    .benefit-card {
        display: flex;
        flex-direction: column;
        padding-inline: var(--size-100);
        padding-block: var(--size-300);
        border-bottom: 3px solid var(--blue-0);
        width: 100%;
        align-self: center;
        filter: drop-shadow(0 0 50px rgba(76, 76, 76, 0.1));
        background:white;
    }
        .benefit-card img{
            width:32px;
            padding-bottom:var(--size-100);
        }
        .benefit-card p{
            font-size:var(--fs-200);
            font-family:Figtree;
            color:var(--black-5);
        }
        .benefit-card h5{
            font-weight:500;
            color:var(--black-5);
            padding-bottom:var(--size-020);
        }
            @media only screen and (max-width:1024px) {
                .benefit-card {
                    max-width:500px;
                }
            }

@media only screen and (max-width: 1366px) {
    .ch-st-intro {
            padding-top: 52px;
            row-gap: 52px;
        }

        .power-st-intro {
            padding: 52px;
            row-gap: 52px;
        }


        .about-img {
            max-width: 700px;
        }


        .partner-carousel-track {
            padding: 0 !important;
        }

        .sign-up-cont {
            padding: 0 52px;
        }

        .contact-cont {
            padding: 100px 52px;
        }

        .steps-wrapper {
            padding: 0 52px;
        }

        .step-1-2-wrapper {
            padding: 124px 52px 0 52px;
        }

        .step-3-cont {
            padding: 100px 52px;
        }
    }


    @media only screen and (max-width: 1200px) {
        .home-hero-img {
            background-image: url(/img/home-hero-img-lap.png);
        }
    }

    @media only screen and (max-width: 1050px) {
        .home-hero-img {
            background-position: top 100px center;
            background-size: contain;
            width: calc(100% - 200px);
            left: 100px;
        }
    }

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

        .text-cont {
            display: flex;
            justify-content: center;
            padding: 70px;
        }


        .text-cont-left, .text-cont-right {
            padding-left: 0;
            padding-right: 0;
        }


        .small-row-gap-0 {
            row-gap: 0;
        }

        .img-cont {
            height: 350px;
        }

        .mob-app-img {
            max-width: 500px;
            padding-left: 50px;
        }

        .small-100vw {
            width: 100vw;
            transform: translateX(-52px);
        }

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

        .small-max-width-500 {
            max-width: 500px;
        }

        .img-50vw {
            width: 100vw;
        }

        .ch-st-intro-text {
            padding: 0;
        }

        .padding-bottom-300 {
            padding-bottom: 0;
        }

        .industries-body-img-cont {
            margin: 0;
            width: 100%;
            max-width: none;
        }


        .industries-text-deco {
            width: 200px;
        }

        .sign-up-text-cont {
            width: 628px;
        }

        .contact-cont {
            flex-direction: column;
            row-gap: 52px;
        }

        .contact-form-cont {
            max-width: 500px;
        }



        .step-item {
            margin: auto;
            padding-top: 80px;
            max-width: 360px;
        }

        .step-item {
            row-gap: 16px;
        }


        .step-1-wrapper {
            row-gap: 52px;
        }

        .step-1-list {
            max-width: 360px;
        }

        .step-2-wrapper {
            max-width: 600px;
            width: fit-content;
        }

        .step-2-cont {
            width: 100%;
        }

        .step-3-cont {
            flex-direction: column;
            padding: 52px;
            row-gap: 52px;
        }

        .step-3-text {
            row-gap: 52px;
            max-width: 500px;
            margin: auto;
            align-items: center;
        }

        .step-3-data {
            max-width: 600px;
            margin: auto;
            flex-direction: column;
            row-gap: 24px;
        }

        .step-3-data-item {
            display: flex;
            flex-direction: column;
            width: fit-content;
            margin: auto;
        }

        .step-3-data-text-cont {
            max-width: 400px;
            padding-bottom: 24px;
        }
    }

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

        .text-block-cont {
            max-width: 450px;
            margin: auto;
        }

        .cta-arrow {
            width: 16px;
        }

        .home-hero-img {
            background-position: top 100px center;
            background-size: contain;
            width: 100%;
            left: 0;
        }

        .small-row-gap-0 {
            row-gap: 0;
        }

        .small-100vw {
            transform: translateX(-24px);
        }

        .request-form-wrapper {
            padding: 52px;
            row-gap: 64px;
        }

        .break-mobile {
            display: block;
        }

        .cta-main, .cta-blue, .cta-white, .cta-secondary {
            font-size: 14px;
        }

        .cta-cont {
            column-gap: 16px
        }

        .cta-cont-center {
            padding-top: 20px;
        }

        .about-cont {
            padding: 52px 24px 24px 24px;
            row-gap: 24px;
        }

        .about-img {
            content: url(../img/about-img.png);
        }




        .partner-item-header {
            height: 160px;
        }

        .industries-body-img-cont {
            max-width: none;
            width: 100%;
        }



        .partner-carousel-wrapper {
            padding-top: 36px;
        }

        .partner-item-wrapper {
            width: 95% !important;
            flex-shrink: 0;
            max-width: 360px;
        }

        .partner-item-body {
            padding: 36px 16px 24px 16px;
        }

        .partner-item-logo {
            width: 100px;
            height: 100px;
            right: 16px;
            border: 2px solid var(--black-2);
            border-radius: 100%;
        }

        .partner-info-cont {
            flex-wrap: wrap;
            column-gap: 0;
            row-gap: 24px;
        }

        .partner-info-item {
            width: 50%;
        }

        .partner-item-headline {
            padding-bottom: 16px;
        }

        .partner-info-cont {
            padding: 16px 0;
        }

        .partner-numbers-wrapper {
            padding-top: 16px;
            row-gap: 8px;
            column-gap: 8px;
        }

        .partner-number-icon {
            display: none;
        }

        .partner-number-cont {
            padding: 8px;
        }

        .sign-up-cont {
            padding: 24px;
        }

        .sign-up-text-cont {
            width: 100%;
            max-width: 550px;
            padding: var(--size-300);
        }

        .sign-up-text-block {
            row-gap: 8px;
        }

        .contact-cont {
            padding: 52px 24px;
        }

        .contact-text-block {
            max-width: 450px;
            row-gap: 12px;
        }

        .contact-form-field-50 {
            width: 100%;
        }

        .steps-wrapper {
            padding: 0 24px;
        }

        .steps-cont {
            gap: 8px;
        }

        .steps-section-bottom {
            height: 50%;
        }

        .step-number-absolute {
            font-size: 78px;
        }

        .search-cont {
            padding: 52px 36px 36px 36px;
            row-gap: 36px;
        }

        .scan-cont {
            padding: 36px 36px 40px 36px;
        }

        .scan-request-cont {
            row-gap: 52px;
            padding: 52px 0;
        }

        .scan-request-form-cont {
            padding: 24px;
            max-width: 460px;
        }

        .scan-request-form-cont {
            height: 700px;
        }

        .scan-request-section {
            height: 100%;
        }

        textarea, input {
            font-size: 12px;
        }

        .scan-request-control {
            flex-direction: column-reverse;
        }

        .form-indicator-cont {
            padding-bottom: 0;
            width: 100%;
        }

        .form-indicator {
            width: 100%;
            text-align: center;
        }
    }

    @media only screen and (max-width: 600px) {
        .steps-cont {
            flex-direction: column;
        }
    }



    @media only screen and (max-width: 510px) {
        .offer-headline-break {
            display: block;
        }

        .text-cont {
            padding: 36px 0px;
        }

        .text-box {
            padding: 36px;
        }

        .request-form-wrapper {
            padding: 36px 24px 24px 24px;
        }
    }

    @media only screen and (max-width: 500px) {
        .clean-energy-img {
            content: url(../img/clean-energy-source-img-mob.png);
            padding: 0 16px
        }
    }

    @media only screen and (max-width: 420px) {
        .span-with-clean-energy {
            display: inline;
        }
    }

    @media only screen and (max-height: 700px) {
        .home-hero-img {
            background-position: bottom 250px center;
        }
    }

    .padding-top-24 {
        padding-top: 24px;
    }

    .mob-nav-submenu-show {
        display: flex !important;
    }

    .rotate-down {
        transform: rotate(90deg);
    }