/*
=====================
CSS Table of Conttent 
=====================
*/
@font-face {
    font-family: 'Nexa';
    src: url('../fonts/Nexa-Bold.html') format('woff2'),
        url('../fonts/Nexa-Bold.woff') format('woff'),
        url('../fonts/Nexa-Bold-2.html') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Nexa';
    src: url('../fonts/NexaRegular.html') format('woff2'),
        url('../fonts/NexaRegular.woff') format('woff'),
        url('../fonts/NexaRegular-2.html') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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




html {
    scroll-behavior: smooth;
}

:root {
    scrollbar-color: #1D1D1E #212224 !important;
    scrollbar-width: thin !important;
}

body {
    font-family: 'Nexa';
    font-weight: 400;
    color: #B3B3B3;
}

body::-webkit-scrollbar {
    width: .8rem;
}

body::-webkit-scrollbar-track {
    border-radius: 0;
}

body::-webkit-scrollbar-thumb {
    background-color: #1D1D1E;
    border-radius: 0;
}

input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000;
}

input::-moz-placeholder {
    /* Firefox 19+ */
    color: #000;
}

input:-ms-input-placeholder {
    /* IE 10+ */
    color: #000;
}

input:-moz-placeholder {
    /* Firefox 18- */
    color: #000;
}

input:focus::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #fff;
}

input:focus::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
}

input:focus:-ms-input-placeholder {
    /* IE 10+ */
    color: #fff;
}

input:focus:-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
}

img {
    max-width: 100%;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    background: none;
}

/*
* Slim Menu
*/

@media only screen and (max-width: 1024px) {
    ul.slimmenu {
        position: absolute;
        left: 0;
        right: 0;
        top: 90px;
        max-width: 640px;
        padding: 0 16px;
        margin: auto;
        background: #373737;
    }

    .menu-collapser {
        position: absolute;
        top: 28px;
        right: 0px;
    }

    .rightbar-menu {
        position: absolute;
        top: 41px;
        right: 61px;
    }
}

.menu-collapser {
    background-color: transparent !important;
}

.collapse-button {
    background-color: transparent !important;
}

.collapse-button .icon-bar {
    margin: 4px 0;
}

ul.slimmenu li>ul {
    min-width: 200px;
}

ul.slimmenu li {
    background-color: transparent;
}

ul.slimmenu>li {
    border-left: 0;
}

ul.slimmenu li a {
    padding: 12px 16px 12px 16px;
    color: #B3B3B3;
}

ul.slimmenu li.has-submenu a {
    padding: 12px 34px 12px 16px;
}

ul.slimmenu li a:hover {
    background-color: transparent;
}

ul.slimmenu li ul li {
    background: transparent;
}

ul.slimmenu li .sub-toggle {
    width: 30px;
}

ul.slimmenu li .sub-toggle>i {
    font-size: 12px;
    color: #8d8d8d;
}

/*
* Gradient
*/

@-webkit-keyframes slideupbottotm {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-300px);
        transform: translateY(-300px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-300px);
        transform: translateY(-300px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}


.gradient-btn {
    border: 1px solid var(--Grey, #B3B3B3);
    background: linear-gradient(102deg, #A5A5A5 -123.55%, rgba(255, 255, 255, 0.00) 78.56%);
    box-shadow: 0px 4px 26px 0px rgba(0, 0, 0, 0.35);
    background-size: 200% 200%;
    transition: all 0.4s linear;
}

.gradient-btn:hover {
    background-position: 20% 20%;
}

.gradient-txt {
    background: linear-gradient(95deg, rgba(212, 212, 212, 0.99) 3.61%, #9B9B9B 93.4%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-txt2 {
    background: var(--G4, linear-gradient(98deg, #A5A5A5 -30.54%, rgba(255, 255, 255, 0.75) 107.73%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-txt3 {
    background: var(--1, linear-gradient(95deg, #FFF 1.7%, rgba(255, 255, 255, 0.44) 100.26%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-txt4 {
    background: linear-gradient(95deg, rgba(194, 194, 194, 0.99) 3.61%, #707070 93.4%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-rounded1 {
    width: 376px;
    height: 376px;
    flex-shrink: 0;
    border-radius: 376px;
    background: #545454;
    filter: blur(157px);
}

.gradient-rounded2 {
    width: 526px;
    height: 526px;
    flex-shrink: 0;
    border-radius: 526px;
    background: rgba(147, 60, 215, 0.25);
    filter: blur(157px);
}

.gradient-rounded1 {
    -webkit-animation: slideupbottotm 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite backwards;
    animation: slideupbottotm 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite backwards;
}

.gradient-rounded2 {
    -webkit-animation: slide-top 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite reverse backwards;
    animation: slide-top 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite reverse backwards;
}

.gradient-overlay1 {
    width: 100%;
    height: 1024px;
    flex-shrink: 0;
    background: #212121;
    mix-blend-mode: saturation;
}

.gradient-overlay2 {
    width: 100%;
    height: 1024px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.29) 48.96%, #000 100%);
}

/*
* Videojs
*/

.vjs-poster img {
    -o-object-fit: cover;
    object-fit: cover;
}

.video-js {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0.03;
}

.video-js .vjs-big-play-button {
    display: none !important;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
.video-js .vjs-control-bar {
    display: none !important;
}

.video-js .vjs-tech {
    object-fit: cover;
}

.my-video-dimensions {
    width: 1920px;
    height: 100vh;
}

/*
* Solution
*/

.solution-box {
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgb(117, 117, 117) 100%);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
}

.solution-box .wrapper {
    background: rgb(14, 14, 14);
    background: linear-gradient(90deg, rgba(14, 14, 14, 1) 37%, rgba(1, 1, 1, 1) 100%);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
}

.solution-box:hover {
    background: rgb(50, 29, 135);
    background: linear-gradient(90deg, rgba(50, 29, 135, 1) 0%, rgba(171, 105, 255, 1) 34%, rgba(219, 0, 255, 1) 66%, rgba(255, 231, 16, 1) 100%);

}

.solution-box:hover .wrapper {
    background: rgb(17, 17, 17);
    background: linear-gradient(90deg, rgba(17, 17, 17, 1) 0%, rgba(21, 21, 21, 1) 37%, rgba(1, 1, 1, 1) 100%);

}

.solution-box:hover .solution-icon img {
    transition: all 0.4s linear;
}

.solution-box:hover .solution-icon img {
    transform: rotate(-28deg);
    -webkit-transform: rotate(-28deg);
    -moz-transform: rotate(-28deg);
    transition: all 0.4s linear;
}

/*
* Expertise
*/
.expertise-box img {
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(1);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1);
    /* Microsoft Edge and Firefox 35+ */
    transition: transform 0.5s linear;
}

.expertise-box:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    filter: none;
}

.expertise-box::before {
    content: "";
    border: 1px solid var(--primary-dark, #212121);
    background: linear-gradient(201deg, #000 -29%, rgba(0, 0, 0, 0) 7%, #000 72.99%);
    mix-blend-mode: luminosity;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: border 0.5s linear;
}

.expertise-box:hover::before {
    border: 1px solid var(--Grey, #B3B3B3);
}
.expertiseshowalll.active{
   display: grid!important;
} 
/*
* Casestudy 
*/


.casestudy-carousel {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.casestudy-carousel-col {
    position: relative;
    width: 50%;
}

.casestudy-carousel-col-content {
    padding-top: 58vh;
    position: relative;
    overflow: hidden;
}

.solar-thumb img,
.casestudy-item img {
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(1);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1);
}

.casestudy-carousel-col-content .casestudy-item {
    position: relative;
}

.casestudy-carousel-col-content img {
    /* Microsoft Edge and Firefox 35+ */
    display: block;
    position: relative;
    width: 100%;
    height: 60vh;
    -o-object-fit: cover;
    object-fit: cover;
}

.casestudy-carousel-col-content .casestudy-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.casestudy-carousel-col-content-child {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 400ms ease-out;
}

.js-casestudy-carousel-col-odd {
    flex-direction: column-reverse;
}

.casestudy-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    position: absolute;
    bottom: 2rem;
}

.casestudy-carousel-controls .casestudy-carousel-controls-btn {
    display: flex;
    width: 50px;
    height: 50px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    background: rgba(200, 196, 196, 0.25);
    transition: all .5s linear;
}

.casestudy-carousel-controls .js-casestudy-carousel-prev {
    transform: rotate(180deg);
}

.casestudy-carousel-controls .casestudy-carousel-controls-btn:hover {
    background: rgba(255, 255, 255, 0.5);
}

.smallcasestudySlider {}

.smallcasestudySlider .swiper-button-prev,
.smallcasestudySlider .swiper-button-next {
    position: static !important;
    display: flex;
    width: 50px;
    height: 50px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    background: rgba(200, 196, 196, .25);
    transition: all .5s linear;
}

.smallcasestudySlider .swiper-button-prev {
    transform: rotate(180deg);
}

.smallcasestudySlider .swiper-button-prev:after,
.smallcasestudySlider .swiper-button-next:after {
    display: none;
}

/*
* Product
*/
.producthumb-box {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #b3b3b352;
    padding-bottom: 40px;
    padding-top: 40px;
    cursor: pointer;
}

.producThumbSwiper .swiper-wrapper {
    display: block !important;
}

.producThumbSwiper .swiper-slide {
    height: auto !important;
    margin-bottom: 0 !important;
}

.producThumbSwiper .producthumb-descript {
    -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    -ms-transition: max-height 1s;
    -o-transition: max-height 1s;
    transition: max-height 1s;
    overflow: hidden;
    max-height: 0;
}

.producThumbSwiper .swiper-slide-thumb-active .producthumb-descript {
    padding-top: 16px;
    max-height: 500px;
}

.producthumb-count {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    background: rgba(179, 179, 179, 0.20);
}

.producthumb-more {
    display: inline-flex;
    width: 64px;
    height: 32px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    background: rgba(200, 196, 196, 0.25);
    float: right;
}

.productSwiper .swiper-slide {
    opacity: 0 !important;
}

.productSwiper .swiper-slide-active {
    opacity: 1 !important;
}

/*
* Contact
*/



.form__group {
    position: relative;
}

.form__control {
    width: 100%;
    outline: none;
}

.form__control:focus+label {
    top: -1.5rem;
    font-size: 10px;
}

.form__label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5rem;
    pointer-events: none;
    transition: top 0.2s ease;
}

/*
* Accordion
*/
.fade {
    overflow: hidden;
    height: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s linear;
}

.fade.show {
    height: auto;
    visibility: visible;
    opacity: 1;
}

.collapse {
    visibility: visible;
}

.collapse:not(.show) {
    display: none;
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition: none;
    }
}

.accordion-button {
    width: 100%;
    text-align: left;
}

/*
* Tab
*/
.tabpill-navs .tabpill-btn {
    position: relative;
}

.tabpill-navs .tabpill-btn::after {
    content: "";
    background: #321d87;
    background: linear-gradient(90deg, #321d87 0, #ab69ff 34%, #db00ff 66%, #ffe710 100%);
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 0.4s linear;
}

.tabpill-navs .tabpill-btn.active {
    background: #101010;
}

.tabpill-navs .tabpill-btn.active::after {
    opacity: 1;
}

@media (max-width: 475px) {
    .header-logo img {
        width: 150px;
        margin-top: 6px;
    }
}

@media (max-width: 1023px) {
    ul.slimmenu li a {
        padding: 12px 12px 12px 0px;
        color: #B3B3B3;
    }
}

.mb-3 {
    margin-bottom: .7rem;
}
.list-inside {
    padding-left: 15px;
}
:focus-visible {
    outline: none;
}