/*---------------------------------------------
/////  solarup HTML  /////
----------------------------------------------*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
--------------------------------------------------------------*/
/***********************
* Variable
* Common
* Button style 
* Custom-cursor 
* Preloader
* header
* banner
* work
* about
* partner
* calculator one
* service
* portfolio
* testimonial 
* cta
* blog
* contact
* footer 
* about us page
* protfolio page
* protfolio details page
* faq page
* blog page
* blog details page
* shop page
* shop details page
* service page
* service details page
* team details page
* career page
* contact page
***********************/
/*----------------------------------------------------------------
* Variable
--------------------------------------------------------------*/
:root {
    --solarup-primary: #141827;
    --solarup-secondary: #5ADB65;
    --solarup-black: #000000;
    --solarup-light-two: #F1F2EF;
    --solarup-light: #ffffff;
    --solarup-body-font:"Roboto Flex", serif;
    --solarup-heading-font: "Space Grotesk", serif;
}
html {
    scroll-behavior: smooth;
}
/***********************
* Common
***********************/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
    font-family: var(--solarup-body-font);
    font-size: 16px;
    font-weight: 400;
    line-height:1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    font-style: normal;
    color: var(--solarup-primary);
}
img {
    max-width: 100%;
}
a {
    text-decoration: none;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
h1,
h2,
h3,
h4,
h5,
h6 {
   position: relative;
   font-family:var(--solarup-heading-font);
}
h1 {
    font-size: 82px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}
h2 {
    font-size: 50px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 24px;
    letter-spacing: -0.04em;
}
h3 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 24px;
}
h4 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 24px;
}
h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 16px;
}
h6 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 16px;
}
p {
    margin: 0 0 16px;
    color: #666666;
}
p.lead{
    font-size: 18px;
}
p.lead-lg{
    font-size: 20px;
}
input:focus,
select:focus,
textarea:focus {
   box-shadow: none !important;
}
textarea:focus-visible {
    outline: 0;
}
input:-webkit-autofill {
   -webkit-background-clip: text;
}
[type=search]{
    outline-offset: 0;
}
input:focus-visible, 
button:focus-visible{
    outline: 0;
}
.gutter-y-10 {
    --bs-gutter-y: 10px;
}
.gutter-y-15 {
    --bs-gutter-y: 15px;
}
.gutter-y-20 {
    --bs-gutter-y: 20px;
}
.gutter-y-30 {
    --bs-gutter-y: 30px;
}
.gutter-y-40 {
    --bs-gutter-y: 40px;
}
.gutter-y-60 {
    --bs-gutter-y: 60px;
}
.gutter-y-80 {
    --bs-gutter-y: 80px;
}
.gutter-x-15{
    --bs-gutter-x: 30px;
}
.gutter-x-20{
    --bs-gutter-x: 40px;
}
.btn-check:checked+.btn:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible, .btn:first-child:active:focus-visible, :not(.btn-check)+.btn:active:focus-visible{
    box-shadow: none;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    background-color: var(--solarup-primary);
    color: var(--solarup-black);
    border: none;
}
/***********************
* Button style
***********************/
.btn-primary {
    padding: 8px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    column-gap: 30px;
    padding-left: 30px;
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
    border: none;
    font-size: 17px;
    letter-spacing: 0.03em;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.btn-primary span, .btn-light span{
    position: relative;
    z-index: 1;
}
.btn-primary::after {
    content: "";
    position: absolute;
    top: 90%;
    left: -110%;
    height: 490%;
    width: 140%;
    background-color: var(--solarup-light);
    transform: rotate(45deg);
    transition: all 0.5s;
}
.btn-primary:hover::after{
    top: -160%;
    left: -9%;
}
.btn-primary i , .btn-light i{
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    transition: all 0.5s;
    z-index: 1;
}
.btn-primary i::before{
    transform: rotate(-45deg);
    transition: all 0.5s;
}
.btn-primary:hover i::before{
    transform: rotate(0deg);
}
.btn-primary:hover {
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
}
.btn-primary:hover i{
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
}
.btn-light{
    padding: 8px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    column-gap: 30px;
    padding-left: 30px;
    background-color: var(--solarup-light);
    color: var(--solarup-primary);
    border: 1px solid var(--solarup-primary);
    font-size: 17px;
    letter-spacing: 0.03em;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.btn-light::after{
    content: "";
    position: absolute;
    top: 90%;
    left: -110%;
    height: 490%;
    width: 140%;
    background-color: var(--solarup-primary);
    transform: rotate(45deg);
    transition: all 0.5s;
}
.btn-light:hover::after{
    top: -160%;
    left: -9%;
}
.btn-light:hover{
    color: var(--solarup-light);
}
.btn-light:hover i{
    background-color: var(--solarup-light);
    color: var(--solarup-primary);
}
.btn-light:hover i::before{
    transform: rotate(-45deg);
}
.btn-light i::before{
    transition: all 0.5s;
}
/*************************
* Custom-cursor 
*************************/
.custom-cursor-one {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 1px solid var(--solarup-secondary);
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    -webkit-transform: translate(calc(-50% + 5px), -50%);
    transform: translate(calc(-50% + 5px), -50%);
    z-index: 999991;
}
.custom-cursor-two {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: var(--solarup-secondary);
    opacity: .3;
    position: fixed;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: width .3s, height .3s, opacity .3s;
    transition: width .3s, height .3s, opacity .3s;
    z-index: 999991;
}
.custom-cursor-hover, .custom-cursor-innerhover {
    background-color: var(--solarup-secondary);
    opacity: 0.4;
    animation: scale 0.5s;
    height: 5px;
    width: 5px;
}
@keyframes scale {
    0%{
       height: 80px;
       width: 80px;
    }
    100%{
        height: 5px;
       width: 5px;
    }
}
/*******************
* Preloader
*******************/
.preloader {
    position: fixed;
    background-color: #0f110ff7;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    overflow: hidden;
}
.loading-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.loading-image {
    display: flex;
    align-items: center;
    column-gap: 40px;
}
.loading-image img {
    height: 150px;
    animation: zoompre 1.5s;
}
.logo-text h1 {
    max-width: 0;
    overflow: hidden;
    transition: all 0.5s;
    animation: width 2.5s 1s;
    color: var(--solarup-light);
    font-size: 100px;
}
@keyframes zoompre {
    0%{
        transform: scale(1) rotate(0deg);
    }
    50%{
        transform: scale(1.3) rotate(270deg);
    }
    100%{
        transform: scale(1) rotate(0deg);
    }
}
@keyframes width {
    0%{
        max-width: 0;
    }
    100%{
        max-width: 1000px;
    }
}
/***********************
* header one
***********************/
.main-header {
    background-color: #141827;
    color: #fff;
}
.topbar-header {
    border-bottom: 2px solid #383D53;
}
.topbar-header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 30px 0;
}
.main-header ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.topbar-right {
    display: flex;
    column-gap: 80px;
    align-items: center;
}
ul.topbar-right li {
    display: flex;
    align-items: center;
    column-gap: 20px;
}
ul.topbar-right li .title-box {
    margin-bottom: 0;
}
ul.topbar-right li .icon-box {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--solarup-secondary);
    font-size: 23px;
    transition: all 0.5s;
}
ul.topbar-right li .title-box span {
    display: block;
    font-size: 16px;
    color: #9D9D9D;
    line-height: 32px;
    text-transform: uppercase;
    font-weight: 500;
}
ul.topbar-right li .title-box a {
    color: var(--solarup-light);
    font-size: 20px;
    font-family: var(--solarup-heading-font);
}
ul.topbar-right li .title-box a:hover{
    color: var(--solarup-secondary);
}
ul.topbar-right li .icon-box:hover{
    border-color: var(--solarup-light);
    color: var(--solarup-secondary);
}
.main-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
ul.main-menu-list {
    display: flex;
    align-items: center;
    column-gap: 40px;
}
ul.main-menu-list li {
    padding: 30px 0;
    display: flex;
    align-items: center;
    column-gap: 8px;
    position: relative;
}
ul.main-menu-list li a {
    color: var(--solarup-light);
    font-size: 20px;
    line-height: 30px;
}
.cart-option a {
    color: var(--solarup-light);
    font-size: 20px;
    line-height: 30px;
    display: flex;
    align-items: center;
    column-gap: 10px;
}
ul.main-menu-list li.active::after {
    content: "";
    position: absolute;
    top: -3px;
    height: 4px;
    width: 100%;
    background-color: var(--solarup-secondary);
}
ul.main-menu-list>li>a:hover, ul.main-menu-list>li.active>a, ul.main-menu-list>li.active,  ul.main-menu-list>li:hover{
    color: var(--solarup-secondary);
}
ul.main-menu-list li ul {
    position: absolute;
    width: 250px;
    padding: 0;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    transform-origin: top center;
    transform: scaleY(0) translateZ(100px);
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease;
    background-color: var(--solarup-light);
    z-index: 999;
    padding: 10px 0;
}
ul.main-menu-list li:hover ul {
    opacity: 1;
    transform: scaleY(1) translateZ(0px);
    visibility: visible;
}
ul.main-menu-list li ul li {
    padding: 10px 25px;
    border-bottom: none;
    transition: all 0.5s;
}
ul.main-menu-list li ul li a{
    color: var(--solarup-primary);
}
ul.main-menu-list li ul li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    height: 2px;
    width: 0;
    transform: translateY(-50%);
    background-color: var(--solarup-secondary);
    transition: all 0.5s;
}
ul.main-menu-list li ul li:hover::after{
    width: 25px;
}
ul.main-menu-list li ul li:hover {
   padding-left: 50px !important;
}
ul.main-menu-list li ul li:hover a{
    color: var(--solarup-secondary);
}
.sticky-header--cloned.sticky-fixed {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.5s;
    visibility: visible;
    backdrop-filter: blur(10px);
    background-color: rgb(11 19 27 / 65%);
}
.sticky-fixed {
    box-shadow: 0 7px 50px 0 rgba(0, 0, 0, .1);
    position: fixed  !important;
    transform: translateY(0);
    z-index: 999;
    transition: all 1.5s;
}
.sticky-header--cloned {
    position: fixed !important;
    z-index: 991;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    transform: translateY(-120%);
}
.header-menu-collaps {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    display: none;
}
.header-menu-collaps span {
    width: 38px;
    display: inline-block;
    height: 2px;
    background-color: #fff;
}
.header-menu-collaps span:nth-child(2) {
    width: 32px;
}
.header-menu-collaps span:nth-child(3) {
    width: 16px;
}
/***********************
* banner one
***********************/
.banner-section-one {
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    padding-top: 100px ;
    padding-bottom: 250px;
    overflow: hidden;
}
.banner-heading-box-one .heading-box {
    margin-bottom: 0;
}
.heading-box>span {
    padding: 3px 15px;
    background-color: #EAF2E9;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    column-gap: 12px;
    line-height: 29px;
    margin-bottom: 20px;
}
.heading-box.light>span {
    background-color: #31364B;
}
.banner-heading-box-one span {
    margin-bottom: 25px;
}
.banner-details-one p {
    margin-bottom: 50px;
    color: #B4B8C9;
}
.banner-content-slider-item-one h1 {
    margin-bottom: 0;
    font-size: 175px;
    font-weight: 500;
    line-height: 223.3px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: #2A314C;
    -webkit-text-stroke-width: 2px;
    display: inline-flex;
    column-gap: 50px;
}
.banner-content-slider-item-one {
    padding-right: 50px;
}
.banner-lower-slider {
    margin: 0 60px;
    margin-top: -300px;
    position: relative;
    overflow: hidden;
}
.banner-lower-slider ul.slick-dots {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    column-gap: 57px;
    width: 280px;
    height: 110px;
    justify-content: center;
    background-color:#F8F8F8 ;
    z-index: 1;
}
ul.slick-dots li button{
    border: none;
    background-color: var(--solarup-secondary);
    height: 8px;
    width: 8px;
    font-size: 0;
    transition: all 0.5s;
}
.banner-slider-item-one {
    margin-bottom: -10px;
}
ul.slick-dots li{
    transition: all 0.5s;
    height: 14px;
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}
ul.slick-dots li.slick-active {
    border: 1px solid var(--solarup-primary);
}
ul.slick-dots li.slick-active button{
    background-color: var(--solarup-primary);
}
.banner-thumb {
    position: absolute;
    bottom: 0;
    width: 80%;
    color: var(--solarup-light);
    padding: 0 50px;
    z-index: 1;
}
.banner-thumb .slick-slide{
    opacity: 0.6;
}
.banner-thumb .slick-slide.slick-current{
    opacity: 1;
}
.thumb-slider-box {
    padding-top: 14px;
    border-top: 2px solid #FFFFFF;
    position: relative;
}
.thumb-slider-box span {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
    display: inline-block;
}
.thumb-slider-box h5 {
    font-size: 26px;
    font-weight: 500;
    line-height: 30px;
}
.thumb-slider-box::after{
    content: "";
    position: absolute;
    top: -2px;
    height: 2px;
    width: 0;
    background-color: var(--solarup-secondary);
}
.banner-thumb .slick-slide.slick-current .thumb-slider-box::after{
    width: 100%;
    transition: all 2s linear;
}
.thumb-slider-item {
    padding-right: 40px;
}
.banner-lower-slider::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: 0;
    height: 194px;
    width: 100%;
    background-color: #222222;
    filter: blur(100px);
}
/***********************
* work one
***********************/
.work-section-one {
    padding: 140px 0;
    overflow: hidden;
}
.heading-box {
    margin-bottom: 50px;
}
.work-icon-one {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: var(--solarup-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 40px;
}
.work-box-one {
    text-align: center;
    padding: 0 25px;
    position: relative;
}
.work-box-one::after{
    content: "";
    position: absolute;
    right: -62px;
    top: 50px;
    height: 3px;
    width: 100px;
    background-color: var(--solarup-secondary);
}
.col-lg-3:last-child .work-box-one::after{
    display: none;
}
.work-icon-one span {
    position: absolute;
    top: -24px;
    right: -24px;
    border-radius: 100%;
    background-color: var(--solarup-secondary);
    height: 55px;
    width: 55px;
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 55px;
    font-size: 24px;
    font-family: var(--solarup-heading-font);
    letter-spacing: -0.03em;
}
.work-box-one h4 {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    font-weight: 500;
}
.work-box-one p{
    font-size: 16px;
    line-height: 26px;
    color: #666666;
    margin-bottom: 0;
}
/***********************
* about one
***********************/
.about-section-one {
    padding-bottom: 140px;
    overflow: hidden;
}
.about-image-one {
    padding-top: 36px;
    padding-right: 40px;
    background-image: url(../images/about/about-bg-one.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top right;
    position: relative;
}
.about-cta-one {
    position: absolute;
    padding: 38px 30px;
    background-color: var(--solarup-secondary);
    width: 440px;
    right: 0;
    bottom: 66px;
}
.about-cta-one h4{
    font-size: 35px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.about-cta-details-one>img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.about-cta-details-one {
    display: flex;
    align-items: center;
    column-gap: 20px;
}
.about-cta-details-one p{
    margin-bottom: 0;
    font-family: var(--solarup-heading-font);
    font-size: 26px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 1;
    color: var(--solarup-primary);
}
.about-cta-details-one p a{
    color: var(--solarup-primary);
}
.about-cta-details-one p a:hover{
    color: var(--solarup-light);
}
.about-details-icon {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--solarup-primary);
}
.about-info-one {
    padding-left: 50px;
}
.about-info-one .heading-box{
    margin-bottom: 46px;
}
.about-info-one .heading-box h2{
    margin-bottom: 20px;
    font-size: 50px;
    font-weight: 500;
    line-height: 55px;
    letter-spacing: -0.04em;
}
.about-list-item+.about-list-item {
    border-top: 1px solid #D8D8D8;
    padding-top: 30px;
}
.about-list-item {
    padding-bottom: 30px;
}
.about-list-item:last-child {
    padding-bottom: 0;
}
.about-conter {
    display: flex;
    align-items: center;
    column-gap: 12px;
    margin-bottom: 10px;
}
.about-list-item p{
    margin-bottom: 0;
}
.about-conter h4{
    margin-bottom: 0;
    font-size: 70px;
    font-weight: 400;
    line-height: 55px;
    letter-spacing: -0.05em;
    display: flex;
    align-items: center;
}
/***********************
* partner one
***********************/
.partner-logo {
    display: flex;
    align-items: center;
    row-gap: 80px;
    flex-wrap: wrap;
    padding-bottom: 75px;
}
.partner-logo-box {
    width: 20%;
    text-align: center;
}
.partner-logo-box img {
    filter: grayscale(1);
}
.devider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.devider::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 100%;
    background-color: #D8D8D8;
}
.devider img {
    background-color: #F6F6F6;
    position: relative;
    z-index: 1;
}
/***********************
* calculator one
***********************/
.calculator-section-one {
    padding-top: 140px;
    background-color: #F6F6F6;
    overflow: hidden;
}
.solar-calculator {
    background-color: var(--solarup-secondary);
    background-image: url(../images/background/solarcal-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 140px;
    position: relative;
}
.calculator-heading {
    padding: 64px 60px;
}
.calculator-heading .heading-box>span{
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
.calculator-heading .heading-box{
    margin-bottom: 30px;
}
.calculator-heading .heading-box h2{
    font-size: 50px;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 55px;
}
.solar-calculator-box {
    border-left: 1px solid #16AF22;
}
.calculator-upper-box {
    padding: 84px 50px 50px 50px;
    border-bottom: 1px solid #16AF22;
}
.calculator-lower-box {
    text-align: center;
    position: relative;
    padding: 66px 0;
}
.calculator-lower-box img {
    position: absolute;
    right: 0;
    bottom: 0;
}
.calculator-box p {
    font-size: 18px;
    color: var(--solarup-primary);
    margin-bottom: 0;
    line-height: 26px;
}
.calculator-box {
    margin-bottom: 50px;
}
.calculator-cost-outer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.calculator-title {
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 10px;
}
.calculator-title img{
    height: 40px;
    width: 40px;
}
.calculator-title p{
    color: var(--solarup-primary);
    margin-bottom: 0;
    font-size: 18px;
}
.calculator-cost h5 {
    font-size: 26px;
    margin-bottom: 0;
}
.calculator-lower-box p{
    margin-bottom: 10px;
    color: var(--solarup-primary);
    font-size: 18px;
}
.calculator-lower-box h4{
    font-size: 50px;
    margin-bottom: 0;
}
input#solar-panels {
    width: 100%;
    -webkit-appearance: none;  
     background: transparent;
    border-radius: 0px;
    outline: none; 
    transition: background 0.3s;
    border: 1px solid var(--solarup-primary);
    height: 6px;
    cursor: pointer;
    margin: 30px 0;
}
input#solar-panels::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px; 
    height: 35px; 
    background: var(--solarup-light); 
    cursor: pointer;
    transition: background 0.3s;
}
/***********************
* service one
***********************/
.service-section-one {
    padding: 280px 0;
    padding-bottom: 140px;
    background-image: url(../images/background/service-bg-one.jpg);
    background-size: cover;
    background-position: center;
    margin-top: -140px;
    overflow: hidden;
}
.light {
    color: var(--solarup-light);
}
.service-box-one {
    background-color: var(--solarup-light);
    padding: 30px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.service-image-one {
    overflow: hidden;
    transform-origin: top;
    position: absolute;
    top: 30px;
    left: -370px;
    width: calc(100% - 60px);
    transition: all 0.8s;
}
.service-box-one>span {
    position: absolute;
    top: 45px;
    right: 30px;
    font-size: 82px;
    letter-spacing: -0.05em;
    font-weight: 300;
    font-family: var(--solarup-heading-font);
    color: #D4D7E3;
    line-height: 55px;
}
.service-icon-one {
   height: 100px;
   width: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--solarup-secondary);
   transition: transform 0.5s linear;
}
.service-icon-one img {
    height: 70px;
}
.service-box-one h4{
    margin-top: 14px;
    margin-bottom: 0;
    font-size: 26px;
    line-height: 55px;
    letter-spacing: -0.03em;
    transition: all 0.5s;
}
.service-box-one h4 a{
    color: var(--solarup-primary);
}
ul.service-list-one{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.service-list-one li{
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    column-gap: 16px;
    color: #666666;
}
.service-box-one .btn-light{
    width: 100%;
    justify-content: space-between;
    margin-top: auto;
}
.service-box-one .btn-light::after {
    display: none;
}
.service-box-one:hover .service-image-one{
    
    left: 30px;
}
.service-box-one:hover .service-icon-one{
    margin-bottom: 0px;
}
.service-box-one:hover .btn-light{
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
.service-box-one:hover .btn-light i{
    background-color: var(--solarup-light);
    color: var(--solarup-primary);
}
.service-details-one {
    margin-bottom: 80px;
    transition: all 0.5s;
}
.service-box-one:not(:hover) .service-details-one{
    transition-delay: 0.4s;
}
.service-box-one:hover .service-details-one {
    margin-bottom: 10px;
    margin-top: 70px;
}
/***********************
* portfolio one
***********************/
.portfolio-section-one {
    padding: 140px 0;
    overflow: hidden;
}
.portfolio-box {
    position: relative;
    overflow: hidden;
}
.portfolio-slider-item {
    padding-right: 30px;
}
.portfolio-details {
    position: absolute;
    bottom: 30px;
    left: -410px;
    background-color: var(--solarup-light);
    padding: 30px;
    transition: all 0.8s;
    max-width: 400px;
}
.portfolio-image img {
    transition: all 1s;
}
.portfolio-box:hover .portfolio-details{
    left: 30px;
}
.portfolio-box:hover .portfolio-image img{
    transform: scale(1.2) translateX(30px);
}
.portfolio-details h4{
    margin-bottom: 46px;
}
.portfolio-details h4 a{
    color: var(--solarup-primary);
}
.portfolio-info p {
    margin-bottom: 5px;
    letter-spacing: 0.05em;
}
.portfolio-info h6{
    font-size: 26px;
}
.portfolio-btn {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
    font-size: 24px;
}
.portfolio-btn i{
    transform: rotate(-45deg);
}
.portfolio-section-one .slick-track {
    margin-left: 380px;
}
.custom-arrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
}
.progressbar {
    width: 535px;
    height: 6px;
    border-radius: 6px;
    background-color: #D5D8E1;
}
.progress{
    transition: all 0.8s;
    border-radius: 6px;
    height: 6px;
    background-color: var(--solarup-primary);
}
.pagination {
    column-gap: 10px;
}
.pagination .slick-arrow{
    height: 60px;
    width: 60px;
    border: 1px solid var(--solarup-primary);
    color: var(--solarup-primary);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.5s;
}
.pagination .slick-arrow:hover{
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
/***********************
* testimonial one
***********************/
.testimonial-section-one {
    padding-bottom: 140px;
    background-image: url(../images/background/testimonial-one-bg.png);
    background-size: 35%;
    background-position: right bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}
.testimonial-box-one {
    position: relative;
}
.testimonial-box-one>img {
    position: absolute;
    right: 0;
    top: 10px;
}
.testimonial-title-one {
    display: flex;
    align-items: center;
    column-gap: 30px;
    margin-bottom: 37px;
}
.testimonial__title-one h4{
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
ul.retting {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    column-gap: 3px;
    color: #FFA800;
    font-size: 19px;
}
.testimonial-box-one .devider img{
    background-color: var(--solarup-light);
}
.testimonial-box-one h3{
    margin-top: 30px;
    font-size: 26px;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}
ul.slick-dots {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    column-gap: 37px;
    margin-top: 30px;
}
/***********************
* cta one
***********************/
.cta-section-one {
    padding: 140px 0;
    background-color: var(--solarup-primary);
    position: relative;
    color: var(--solarup-light);
    overflow: hidden;
}
.cta-section-one::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    background: url(../images/background/cta-one-bg.png), var(--solarup-primary);
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
}
.cta-info-box {
    position: relative;
    z-index: 1;
}
.cta-info-box .heading-box{
    margin-bottom: 30px;
}
ul.cta-list-one {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.cta-list-one li{
    margin-bottom: 30px;
    color: #E2D7D7;
    display: flex;
    column-gap: 19px;
    align-items: flex-start;
}
ul.cta-list-one li img{
    padding-top: 4px;
}
.cta-lower-box {
    display: flex;
    align-items: center;
    column-gap: 15px;
}
.cta-lower-box-inner {
    width: 100%;
    background-color: var(--solarup-light);
    color: var(--solarup-primary);
    padding: 16px 20px;
    position: relative;
    transition: all 0.5s;
    flex: 0 1 auto;
}
.cta-lower-box-inner:first-child{
    background-color: var(--solarup-secondary);
}
.cta-lower-box-inner:hover{
    background-color: var(--solarup-secondary);
}
.cta-lower-box-inner:hover:first-child{
    background-color: var(--solarup-light);
}
.cta-lower-box-inner img{
    position: absolute;
    top: 20px;
    right: 20px;
}
.cta-lower-box-inner h4{
    font-size: 60px;
    line-height: 62px;
    font-weight: 400;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    column-gap: 8px;
}
.cta-lower-box-inner h4 span{
    font-size: 40px;
    line-height: 42px;
    font-weight: 400;
    letter-spacing: -0.01em;
    padding-bottom: 10px;
}
.cta-lower-box-inner p{
    font-size: 20px;
    letter-spacing: -0.03em;
    line-height: 32px;
    margin-bottom: 0;
    color: var(--solarup-primary);
    font-family: var(--solarup-heading-font);
}
.cta-image {
    position: relative;
    z-index: 1;
}
.cta-bottom {
    background-color: var(--solarup-secondary);
    padding: 20px;
}
.cta-bottom-inner {
    display: flex;
    align-items: center;
    column-gap: 50px;
    justify-content: center;
}
.cta-bottom-inner h6{
    margin-bottom: 0;
}
.cta-bottom-inner span{
    font-size: 30px;
}
.btn-ctan-one {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    flex-shrink: 0;
}
.btn-ctan-one:hover{
    color: var(--solarup-primary);
    background-color: var(--solarup-light);
}
.btn-ctan-one i{
    transform: rotate(-45deg);
    transition: all 0.5s;
}
.btn-ctan-one:hover i{
    transform: rotate(0);
}
/***********************
* blog one
***********************/
.blog-section-one {
    padding: 140px 0;
    overflow: hidden;
}
.blog-image-one {
    position: relative;
    overflow: hidden;
}
.blog-image-one img{
    transition: all 0.8s ease;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.blog-box-one:hover .blog-image-one img{
    transform: scale(1.2);
}
.blog-image-one .blog-date{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 70px;
}
.blog-image-one .blog-date .month {
    -webkit-writing-mode: vertical-lr;
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
    height: 100%;
    text-align: center;
    transform: rotate(180deg);
}
.blog-image-one .blog-date span:first-child {
    color: var(--solarup-light);
    background-color: var(--solarup-primary);
    font-size: 32px;
    line-height: 32px;
    font-weight: 500;
    font-family: var(--solarup-heading-font);
    padding: 19px 15px;
    display: inline-block;
}
ul.blog-meta-one {
    margin: 20px 0;
    padding: 0;
    list-style: none;
    display: flex;
    column-gap: 10px;
    align-items: center;
}
ul.blog-meta-one li{
    background-color: #F0F2F6;
    border-radius: 15px;
    padding: 0 11px;
    transition: all 0.5s;
}
ul.blog-meta-one li a {
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    display: flex;
    column-gap: 5px;
    color: var(--solarup-primary);
    align-items: center;
    text-transform: uppercase;
    transition: all 0.5s;
}
ul.blog-meta-one li:hover{
    background-color: var(--solarup-primary);
}
ul.blog-meta-one li:hover a{
    color: var(--solarup-light);
}
ul.blog-meta-one li:hover img{
    filter: brightness(50);
}
.blog-box-one h4{
   font-size: 26px;
   font-weight: 500;
   line-height: 32px;
   letter-spacing: -0.03em;
   margin-bottom: 30px;
}
.blog-box-one h4 a{
    color: var(--solarup-primary);
    background-image: linear-gradient(transparent calc(100% - 1px), #141827 1px);
    background-repeat: no-repeat;
    background-position-y: -1px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation: 1s cubic-bezier(.215,.61,.355,1) underline forwards;
}
.blog-box-one:hover h4 a{
    animation: 1s cubic-bezier(.215,.61,.355,1) underline-hover forwards;
}
@keyframes underline {
    0% {
        background-size: 100% 100%;
        background-position-x: 100%
    }

    100% {
        background-size: 0 100%;
        background-position-x: 100%
    }
}
@keyframes underline-hover {
    0% {
        background-position-x: 0;
        background-size: 0 100%
    }

    100% {
        background-position-x: 0;
        background-size: 100% 100%
    }
}
a.btn-blog {
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--solarup-primary);
    color: var(--solarup-primary);
    font-size: 18px;
}
a.btn-blog i{
    transition: all 0.5s;
}
.blog-box-one:hover a.btn-blog{
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
.blog-box-one:hover a.btn-blog i{
    transform: rotate(-45deg);
}
/***********************
* contact one
***********************/
.contact-section-one {
    padding: 140px 0;
    background-image: url(../images/contact/contact-bg.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.contact-section-one .heading-box h2{
    margin-bottom: 13px;
}
.contact-section-one .heading-box {
    margin-bottom: 30px;
}
.ratting-image {
    display: flex;
    align-items: center;
    column-gap: 30px;
}
.contact-form {
    padding-left: 40px;
}
.form-group {
    display: flex;
    align-items: center;
    column-gap: 16px;
    margin-bottom: 30px;
}
.form-control , .form-select{
    padding: 17px 22px;
    line-height: 26px;
    border-radius: 0;
    color: #666666 !important;
    border: 1px solid #D8D8D8 !important;
}
.contact-form .form-control::placeholder{
    color: #666666 !important;
}
/***********************
* footer one
***********************/
footer.footer-one {
    padding-top: 110px;
    background-color: var(--solarup-primary);
    position: relative;
    color: var(--solarup-light);
     overflow: hidden;
}
footer.footer-one::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background-image: url(../images/footer/footer-one-bg.png);
    width: 724px;
    height: 412px;
    background-size: cover;
    background-position: center;
}
.newslatter-one h2{
    margin-bottom: 30px;
}
.newslatter-one {
    margin-bottom: 110px;
    position: relative;
    z-index: 1;
}
.footer-one .devider{
    margin-bottom: 78px;
    position: relative;
    z-index: 1;
}
.footer-logo {
    margin-bottom: 22px;
}
.footer-about-one p{
    margin-bottom: 20px;
    color: #C2C2C2;
}
.footer-about-phone {
    padding: 12px 23px;
    border: 2px solid var(--solarup-secondary);
    display: inline-flex;
    align-items: center;
    column-gap: 13px;
}
.footer-about-phone a{
    font-family: var(--solarup-heading-font);
    font-size: 20px;
    letter-spacing: -0.03em;
    font-weight: 500;
    color: var(--solarup-light);
}
.footer-contact {
    padding-left: 30px;
}
footer ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.footer-contact-inner li {
    display: flex;
    align-items: center;
    column-gap: 13px;
    margin-bottom: 25px;
}
ul.footer-contact-inner li p, ul.footer-contact-inner li a{
    margin-bottom: 0;
    color: #C2C2C2;
}
ul.footer-link-inner li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 15px;
}
ul.footer-link-inner li::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 6px;
    width: 6px;
    background-color: var(--solarup-secondary);
}
ul.footer-link-inner li a{
    color: #C2C2C2;
}
ul.social-media-inner {
    display: flex;
    column-gap: 8px;
}
ul.social-media-inner li a {
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--solarup-light);
    border: 1px solid #777D96;
}
ul.social-media-inner li a:hover{
    color: var(--solarup-primary);
    background-color: var(--solarup-light);
}
.footer-copyrights {
    background-color: #080A12;
    padding: 24px 0;
    margin-top: 56px;
}
.footer-copyrights-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px;
}
.footer-copyrights-inner p{
    margin-bottom: 0;
    color: #C2C2C2;
}
.footer-copyrights-inner p a{
    color: #C2C2C2;
}
/***********************
* header two
***********************/
.header-two .topbar-header {
    border: none;
    background-color: #EEEEEE;
    color: var(--solarup-primary);
    position: relative;
}
.header-two .topbar-header::after{
    content: "";
    position: absolute;
    right: 0;
    height: 100%;
    width: 455px;
    background-color: var(--solarup-primary);
    top: 0;
}
.header-two  .topbar-header-box {
    padding: 18px 0;
}
ul.topbar-left {
    display: flex;
    align-items: center;
    column-gap: 28px;
}
ul.topbar-left li {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
ul.topbar-left li a, ul.topbar-left li p{
    color: var(--solarup-primary);
}
ul.topbar-left li p{
    margin-bottom: 0;
}
.cart-option {
    position: relative;
    z-index: 1;
}
.header-two {
    background: transparent;
    color: var(--solarup-primary);
    position: relative;
}

.header-two  ul.main-menu-list li a{
    color: var(--solarup-primary);
}
.header-two  ul.main-menu-list li.active::after{
    background-color: var(--solarup-primary);
    top: auto;
    bottom: 0;
    height: 2px;
}
.header-two ul.main-menu-list li {
    padding: 44px 0;
}
.header-two .main-menu-right {
    text-align: center;
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    height: 118px;
    align-items: center;
    margin-right: 15px;
}
.header-two ul.main-menu-list li ul li{
    padding: 15px 25px;
}
.sticky-header--cloned.sticky-fixed .topbar-header {
    display: none;
}
.header-two.sticky-header--cloned.sticky-fixed {
    background-color: rgb(255 255 255);
}
.header-two .header-menu-collaps span {
    background-color: #000000;
}
.header-two  .header-menu-collaps{
    align-items: end;
    margin-left: auto;
    margin-right: 40px;
}
.header-two  ul.main-menu-list>li>a:hover,.header-two  ul.main-menu-list>li.active>a,.header-two  ul.main-menu-list>li.active,.header-two   ul.main-menu-list>li:hover{
    color: var(--solarup-secondary);
}
 ul.main-menu-list li span{
    transition: all 0.5s;
 }
.header-two .btn-primary::after{
    background-color: var(--solarup-primary);
}
.header-two .btn-primary:hover{
    color: var(--solarup-light);
}
/***********************
* banner two
***********************/
.banner-section-two {
    margin: 0 92px;
    padding-top: 134px;
    background-image: url(../images/background/banner-two-1.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}
.banner-info-two {
    background-color: #00000010;
    backdrop-filter: blur(21px);
    padding: 58px 74px;
    color: var(--solarup-light);
}
.banner-info-two h2{
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.banner-info-two p{
    font-size: 20px;
    color: var(--solarup-light);
}
.banner-btn-two {
    display: flex;
    align-items: center;
    column-gap: 24px;
}
.video-btn-box {
    display: flex;
    align-items: center;
    column-gap: 15px;
}
.video-btn-box p{
    margin-bottom: 0;
}
.video-btn {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: var(--solarup-light);
    color: var(--solarup-primary);
    position: relative;
}
.video-btn::after {
    content: "";
    position: absolute;
    height: 60px;
    width: 60px;
    border-radius: 100%;
    background-color: #ffffff8a;
    z-index: -1;
    animation: pulse-ring 1.25s linear infinite;
}
@keyframes pulse-ring {
    form {
        width: 60px;
        height: 60px;
        opacity: 1;
    }
    to {
        width: 90px;
        height: 90px;
       opacity: 0;
    }
}
.banner-box-two {
    display: flex;
    justify-content: flex-end;
}
.banner-box-two-inner {
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
    padding: 58px 52px;
    max-width: 436px;
    transition: all 0.5s;
}
.banner-box-two-inner:hover{
    background-color: var(--solarup-primary) !important;
    color: var(--solarup-light);
}
.banner-box-two-inner:hover p{
    color: var(--solarup-light);
}
.banner-box-two-inner:last-child{
    background-color: #EEEEEE;
}
.box-title-two {
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin-bottom: 38px;
}
.box-title-two h4{
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 0;
}
.banner-box-two-inner p{
    font-size: 18px;
    margin-bottom: 0;
    color: var(--solarup-primary);
    transition: all 0.5s;
}
.banner-icon-two{
    height: 63px;
    width: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: #FFFFFF3D;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    flex-shrink: 0;
}
.banner-box-two-inner:last-child .banner-icon-two{
    background-color: #FFFFFFD6;
}
.banner-box-two-inner:last-child:hover .banner-icon-two{
    background-color: #FFFFFF3D;
}
.banner-icon-two span{
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
}
.banner-box-two-inner:hover .banner-icon-two span{
    opacity: 0;
    visibility: hidden;
}
.banner-icon-two i{
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}
.banner-box-two-inner:hover .banner-icon-two i{
    opacity: 1;
    visibility: visible;
    transform: rotate(-45deg);
}
.banner-social-media-two {
    position: absolute;
    top: 0;
    right: -92px;
    height: 100%;
    width: 92px;
    background-color: var(--solarup-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-social-media-two ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 40px;
    font-size: 20px;
}
.banner-social-media-two ul li a{
    color: var(--solarup-light);
}
/***********************
* service two
***********************/
.service-section-two {
    background-color: #FAFAFA;
}
.service-two{
    padding: 140px 0;
    margin: 0 80px;
}
.service-left-two .heading-box {
    max-width: 573px;
}
.service-left-two .btn-primary:hover{
     color: var(--solarup-light);
}
.service-left-two .btn-primary::after{
    background-color: var(--solarup-primary);
}
.service-box-two {
    position: relative;
    padding: 20px;
    height: 640px;
    overflow: hidden;
    margin-bottom: 45px;
}
.service-content-box-two {
    max-width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 80px 50px;
    background-color: #fafafa;
    position: relative;
    z-index: 1;
}
.service-icon-two {
    margin-bottom: 17px;
}
.service-content-box-two h4 {
    font-size: 30px;
    line-height: 30px;
    letter-spacing: -0.03em;
}
.service-content-box-two h4 a{
    color: var(--solarup-primary);
}
.service-content-box-two p {
    margin-bottom: 0;
    font-size: 18px;
    color: var(--solarup-primary);
}
.btn-service-two {
   height: 44px;
   width: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   background-color: var(--solarup-primary);
   color: var(--solarup-light);
   margin-top: auto;
}
.btn-service-two i{
    transform: rotate(-45deg);
}
.service-image-two {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 54%;
    height: 100%;
    transition: all 0.5s;
}
.service-image-two .image{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: right;
    transition: all 0.5s;
}
.service-box-two:hover .service-image-two{
    max-width: 100%;
}
.service-box-two:hover .service-image-two .image{
    transform: scale(1.1);
}
.service-box-two:hover .btn-service-two{
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
}
.service-image-icon {
    position: absolute;
    bottom: 20px;
    right: -220px;
    width: 210px;
    height: 200px;
    object-fit: cover;
    opacity: 0.5;
    filter: brightness(27.5);
    transition: all 0.5s;
}
.service-box-two:hover .service-image-icon{
    right: 20px;
}
.service-left-two {
    position: sticky;
    top: 50px;
}
/***********************
* about two
***********************/
.about-section-two {
    padding-top: 130px;
    padding-bottom: 160px;
    position: relative;
    background-image: url(../images/about/about-two-bg.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
.About-counter-two {
    position: absolute;
    top: 0;
    left: 0;
    padding: 45px 57px;
    text-align: center;
    max-width: 304px;
    background-color: var(--solarup-secondary);
}
.About-counter-two img{
    margin-bottom: 10px;
}
.About-counter-two h4, .counter-box-two h4{
    font-size: 65px;
    line-height: 55px;
    margin-bottom: 0;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.About-counter-two p, .counter-box-two p{
    font-size: 18px;
    color: var(--solarup-primary);
    margin-bottom: 0;
}
.about-left-two {
    position: relative;
    margin-right: 62px;
    padding-top: 169px;
    height: 100%;
}
.about-image-two {
    height: 100%;
    width: 100%;
}
.about-image-two img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.counter-box-two {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    padding: 50px ;
    width: 300px;
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
.counter-box-two p{
    color: var(--solarup-light);
}
.about-lower-box {
    border-top: 1px solid #D8D8D8;
    display: flex;
}
.about-content-two {
    padding-top: 20px;
    margin-bottom: 24px;
    padding-right: 20px;
}
.about-content-two+.about-content-two {
    border-top: 1px solid #D8D8D8;
}
.about-content-two h4 {
    margin-bottom: 20px;
}
.about-content-two p{
    font-size: 18px;
}
.about-counter__two {
    width: 100%;
    border-left: 1px solid #D8D8D8;
}
.counter-box__two {
    padding: 45px 0 60px 38px;
    border-bottom: 1px solid #D8D8D8;
}
.counter-box__two img {
    margin-bottom: 20px;
}
.counter-box__two h4{
    font-size: 65px;
    line-height: 55px;
    margin-bottom: 0;
    font-weight: 400;
}
.counter-box__two p{
    margin-bottom: 0;
    font-size: 18px;
    line-height: 25px;
}
.about-counter__two .btn-primary {
    margin-top: 20px;
    margin-left: 18px;
}
.about-counter__two .btn-primary:hover::after{
    background-color: var(--solarup-primary);
}
.about-counter__two .btn-primary:hover{
    color: var(--solarup-light);
}
/***********************
* why-choose two
***********************/
.why-choose-section-two {
   padding: 140px 80px 100px 80px;
   background-color: var(--solarup-primary);
   background-image: url(../images/why-choose/why-choose-two-bg.png);
   background-size: auto;
   background-position: bottom left;
   background-repeat: no-repeat;
   position: relative;
   overflow: hidden;
}
.why-choose-box-two {
    padding: 48px 43px 72px 43px;
    background-color: var(--solarup-light);
    text-align: center;
    margin: 0 10px;
    position: relative;
    z-index: 1;
    height: 100%;
}
.why-choose-icon-two {
    height: 142px;
    width: 142px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 20px;
    position: relative;
}
.why-choose-box-two h4 {
    margin-bottom: 10px;
}
.why-choose-box-two p {
    font-size: 18px;
    margin-bottom: 0;
}
.why-choose-icon-two span {
    height: 112px;
    width: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DEF8E0;
    border-radius: 100%;
    transition: all 0.5s;
    position: relative;
}
.why-choose-icon-two span img{
    transition: all 0.5s;
}
.why-choose-icon-two span::after{
    content: "";
    position: absolute;
    top: 99px;
    left: 0;
    height: 16px;
    width: 16px;
    border-radius: 100%;
    background-color: var(--solarup-secondary);
    z-index: 1;
    transition: all 0.5s;
}
.why-choose-icon-two span::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 88px;
    height: 24px;
    width: 24px;
    border-radius: 100%;
    background-color: var(--solarup-secondary);
    z-index: 1;
    transition: all 0.5s;
}
.why-choose-icon-two::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px dashed var(--solarup-primary);
    border-radius: 100%;
    transition: all 0.5s;
}
.why-choose-box-two:hover .why-choose-icon-two span{
    background-color: var(--solarup-primary);
}
.why-choose-box-two:hover .why-choose-icon-two span img{
    filter: brightness(50);
}
.why-choose-box-two:hover .why-choose-icon-two::after{
    transform: rotate(45deg);
}
.why-choose-box-two:hover .why-choose-icon-two span::before{
    top: 13px;
    left: -19px;
}
.why-choose-box-two:hover .why-choose-icon-two span::after{
    top: 86px;
    left: 106px;
}
.why-choose-image-two {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}
.why-choose-image-two img {
    height: 100%;
}
/***********************
* process two
***********************/
.process-section-two {
    padding: 130px 0 110px 0;
    background-image: url(../images/process/process-bg-two.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.process-left {
    text-align: end;
}
.process-icon-two {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.process-icon-two>p{
    font-family: Space Grotesk;
    font-size: 55px !important;
    font-weight: 500;
    line-height: 55px;
    letter-spacing: -0.03em;
    color: #1418271A;
    margin-bottom: 0;
}
.process-icon-inner-two {
    height: 62px;
    width: 62px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--solarup-primary);
}
.process-icon-inner-two span {
    position: absolute;
    top: -6px;
    right: 1px;
    height: 24px;
    width: 24px;
    border-radius: 100%;
    background-color: var(--solarup-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.process-box-two h4{
    margin-bottom: 15px;
}
.process-box-two p{
    font-size: 18px;
    margin-bottom: 0;
}
.process-box-two+.process-box-two {
    margin-top: 120px;
}
.process-section-two .cta-bottom-inner {
    position: absolute;
    top: 0;
    right: 0;
    width: 543px;
    padding: 20px 0;
    background-color: var(--solarup-secondary);
    color: var(--solarup-light);
}
.process-section-two .cta-bottom-inner .btn-ctan-one {
   background-color: var(--solarup-secondary);
   color: var(--solarup-primary);
}
/***********************
* portfolio two
***********************/
.portfolio-section-two {
    padding-top: 170px;
    margin-bottom: -8px;
    overflow: hidden;
}
.portfolio-box-two {
    position: relative;
    overflow: hidden;
}
.portfolio-image-two img {
    transition: all 1s;
}
.portfolio-box-two:hover .portfolio-details{
    left: 30px;
}
.portfolio-two-arrow {
    position: relative;
}
.progressbar-two {
    width: 330px;
    border-radius: 8px;
    background-color: #D5D8E1;
    height: 4px;
    margin: auto;
}
.progress-two {
    background-color: var(--solarup-primary);
    height: 4px;
    border-radius: 8px;
    transition: all 1s;
}
.pagination-two button.slick-arrow {
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 17px;
    letter-spacing: 0.03em;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.pagination-two button.slick-next.slick-arrow {
    left: auto;
    right: 10px;
}
.portfolio-item-two {
    padding-right: 40px;
}
.portfolio-slider-two .slick-slide {
    opacity: 0.18;
    transition: all 0.5s;
}
.portfolio-slider-two .slick-slide.slick-center, .portfolio-slider-two .slick-slide.slick-active{
    opacity: 1;
}
.portfolio-slider-two  .slick-track {
    margin-left: -170px;
}
/***********************
* testimonial two
***********************/
.testimonial-section-two {
    padding: 150px 0;
    position: relative;
    overflow: hidden;
}
.heading-box-outer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.testimonial-content {
    display: flex;
    align-items: center;
    column-gap: 53px;
}
.testimonial-box-two {
    padding: 30px 0;
}
.testimonial-content span {
    height: 114px;
    width: 114px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    flex-shrink: 0;
    background-color: var(--solarup-primary);
}
.testimonial-content p{
    font-size: 25px;
    font-style: italic;
    font-weight: 300;
    line-height: 42px;
    color: var(--solarup-primary);
}
.thumb-box-two {
    display: flex;
    align-items: center;
    column-gap: 30px;
    justify-content: center;
}
.thumb-title h5 {
    margin-bottom: 0;
    display: inline-block;
}
.thumb-title ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-flex;
    font-size: 12px;
    margin-left: 5px;
}
.thumb-title p{
    margin-bottom: 0;
}
.testimonial-slider-thumb {
    width: 60%;
    padding: 27px 0;
    margin: auto;
    border-left: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
}
.testimonial-slider-thumb-outer{
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
}
.testimonial-slider-two button.slick-arrow {
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 18px;
    position: absolute;
    bottom: -91px;
}
.testimonial-slider-two button.slick-next.slick-arrow {
    right: 0;
}
/***********************
* blog two
***********************/
.blog-section-two {
    padding-bottom: 140px;
    overflow: hidden;
}
.blog-box-two {
    position: relative;
}
.blog-box-two::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(0deg, rgba(20, 24, 39, 0.9) 0%, rgba(20, 24, 39, 0.92) 30.38%, rgba(72, 87, 141, 0) 96.25%);
    transition: all 0.5s;
}
.blog-details-two {
    position: absolute;
    bottom: 0;
    z-index: 1;
    color: var(--solarup-light);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: end;
    padding-top: 65px;
}
.blog-meta-two {
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin-bottom: 20px;
    padding: 0 65px;
}
.blog-meta-two a {
    font-size: 14px;
    color: var(--solarup-light);
    letter-spacing: 0.05em;
    line-height: 32px;
}
.blog-meta-two .date {
    padding: 0 10px;
    background-color: #FFFFFF0D;
}
.blog-details-two h4 {
    padding: 0 65px;
    margin-bottom: 12px;
    font-size: 26px;
    letter-spacing: -0.03em;
    height: 22%;
}
.blog-details-two h4 a{
    color: var(--solarup-light);
}
.blog-details-two p{
    color: var(--solarup-light);
    padding: 0 65px;
    max-height: 0;
    overflow: hidden;
    flex-shrink: 0;
}
a.btn-blog-two {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
    flex-shrink: 0;
}
a.btn-blog-two i{
    transform: rotate(-45deg);
    transition: all 0.5s;
}
.blog-box-two:hover a.btn-blog-two i{
   transform: rotate(0);
}
.blog-box-two:hover a.btn-blog-two{
    background-color: var(--solarup-light);
    margin: 0 0 65px 65px;
}
.blog-box-two:hover .blog-details-two p{
    max-height: 1000px;
    transition: max-height 4s linear;
}
.blog-box-two:hover .blog-details-two h4{
    height: 100%;
    transition: all 2s;
}
.blog-box-two:hover::after{
    background:linear-gradient(0deg, rgba(20, 24, 39) 0%, #141827 30.38%, #141827 96.25%) ;
}
/***********************
* cta two
***********************/
.cta-section-two {
    margin-right: 300px;
    padding: 180px 0;
    color: var(--solarup-light);
    background-image: url(../images/background/cta-image-two.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
.cta-section-two h2{
    font-size: 80px;
    font-weight: 500;
    line-height: 85px;
    letter-spacing: -0.04em;
}
.partner-section-two {
    overflow: hidden;
}
.partner-outer-two {
    position: relative;
}
.partner-image {
    position: absolute;
    top: 0;
    right: 0;
}
.partner-box-two {
    width: 260px;
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #0000001A;
}
.partner-box-two img {
    filter: grayscale(1);
}
/***********************
* footer two
***********************/
.footer-two {
    padding-top: 92px;
    border-top: 1px solid #0000001A;
    background-image: url(../images/background/footer-two-bg.png);
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.footer-two .footer-about-one p, .footer-two .footer-about-phone a,.footer-two ul.footer-contact-inner li p,.footer-two ul.footer-contact-inner li a,.footer-two ul.footer-link-inner li a, .footer-two ul.social-media-inner li a, .footer-two .footer-copyrights-inner p,.footer-two .footer-copyrights-inner p a{
    color: var(--solarup-primary);
}
 .footer-two ul.footer-link-inner li::after{
    background-color: var(--solarup-primary);
 }
.footer-two .footer-about-phone{
    border-color: var(--solarup-primary);
}
.footer-two .footer-about-phone img, .footer-two ul.footer-contact-inner li img{
    filter: brightness(0);
}
.footer-two ul.social-media-inner li a:hover{
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
.footer-two .footer-copyrights{
    background-color: transparent;
    position: relative;
}
.footer-two::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, rgba(255, 255, 255, 0.83) 71.08%, rgba(255, 255, 255, 0.84) 100%);
}
/***********************
* header three
***********************/
.header-three-inner {
    display: flex;
    align-items: center;
}
.header-three .topbar-header {
    width: 100%;
}
.header-three .main-menu {
    flex-wrap: wrap;
}
.header-three .topbar-header {
    border-bottom: 1px solid #252B41;
}
.header-three .main-logo {
    height: 135px;
    width: 280px;
    flex-shrink: 0;
    background-color: var(--solarup-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-three ul.topbar-left{
    column-gap: 55px;
}
.header-three ul.topbar-left li{
    position: relative;
}
.header-three ul.topbar-left li::after{
    content: "";
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right: -26px;
    height: 52px;
    width: 1px ;
    background-color: #252B41;
}
.header-three .topbar-header-box{
    padding: 12px 40px;
}
.header-three ul.topbar-left li a,.header-three ul.topbar-left li p{
    color: var(--solarup-light);
}
.header-three ul.topbar-left li:last-child::after{
    display: none;
}
.header-three .cart-option::after{
    content: "";
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left: -56px;
    height: 52px;
    width: 1px ;
    background-color: #252B41;
}
.header-three .cart-option a{
    color: #FFFFFF9E;
}
.header-three .cart-option a i{
    color: var(--solarup-secondary);
}
.header-three ul.main-menu-list{
    padding-left: 40px;
}
.header-three ul.main-menu-list li.active::after{
    display: none;
}
.header-three ul.main-menu-list>li{
    padding: 25px 0;
}
ul.header-three-social-link {
    display: flex;
    align-items: center;
    column-gap: 32px;
    padding: 0 50px;
    position: relative;
    margin-left: auto;
}
ul.header-three-social-link li a{
    color: var(--solarup-light);
}
ul.header-three-social-link::after{
    content: "";
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left: 0;
    height: 80px;
    width: 1px ;
    background-color: #252B41;
}
a.header-trhee-btn {
    padding: 25px 40px;
    font-size: 17px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0.03em;
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
    display: inline-block;
}
/***********************
* banner three
***********************/
.banner-three {
    padding: 86px 0 216px 0;
    background-image: url(../images/background/banner-three-Background.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}
.banner-heading-three h2{
font-size: 65px;
font-weight: 700;
line-height: 73px;
letter-spacing: -0.03em;
margin-bottom: 18px;
}
.banner-heading-three p{
    font-size: 18px;
    margin-bottom: 0;
    color: var(--solarup-primary);
    max-width: 60%;
}
.banner-form {
    margin-left: 20px;
    padding: 68px 70px;
    background-color: #1418270A;
    backdrop-filter: blur(32px);
    clip-path: polygon(20% 0%, 100% 0, 100% 33%, 100% 84%, 76% 100%, 20% 100%, 0 100%, 0 0);
    position: absolute;
    top: -160px;
    width: 500px;
}
.banner-form h3{
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: 500;
    line-height: 30px;
    color: var(--solarup-light);
}
.banner-form .form-group{
    margin-bottom: 0;
}
.banner-form .form-group .form-control{
    background-color: transparent;
    padding: 17px;
    border: none !important;
    border-bottom: 1px solid var(--solarup-light) !important;
    color: var(--solarup-primary);
}
.form-control::placeholder{
    color: var(--solarup-primary);
}
.banner-form textarea.form-control{
    margin-bottom: 30px;
}
.banner-form .btn-light{
    border: none;
}
/***********************
* why-choose three
***********************/
.why-choose-section-three {
    padding: 150px 0;
    overflow: hidden;
}
.why-choose-box-three {
    padding: 0 15px;
}
.why-choose-icon-three {
    margin-bottom: 52px;
    height: 70px;
    width: 70px;
}
.why-choose-box-three h4 {
    font-size: 26px;
    font-weight: 500;
    line-height: 55px;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}
.why-choose-box-three p{
    font-size: 18px;
    color: var(--solarup-primary);
}
/***********************
* about three
***********************/
.about-section-three {
    padding: 130px 0;
    overflow: hidden;
}
.about-info-three {
    padding-left: 90px;
}
.about-info-three p {
    font-size: 18px;
}
ul.about-list-three {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-top: 28px;
}
ul.about-list-three li {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 12px;
    font-size: 18px;
}
ul.about-list-three li span {
    height: 17px;
    width: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: var(--solarup-secondary);
    color: var(--solarup-light);
    font-size: 10px;
}
.about-image-three {
    height: 100%;
}
.about-image-three img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/***********************
* partner three
***********************/
.partner-section-three {
    margin-bottom: 50px;
    overflow: hidden;
}
.partner-box-three {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 80px;
}
.partner-box-three img{
    filter: grayscale(1);
}
/***********************
* service three
***********************/
.service-section-three {
    padding: 140px 80px;
    background-image: url(../images/service/service-three-bg.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
} 
.service-box-three {
    background-color: var(--solarup-light);
    padding-left: 40px;
    padding-bottom: 33px;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.service-image-three {
    clip-path: polygon(45% 0, 100% 0, 100% 57%, 68% 100%, 25% 100%, 0 100%, 0 54%);
    overflow: hidden;
    margin-bottom: 23px;
}
.service-image-three img{
    transition: all 0.5s;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.service-box-three:hover .service-image-three img{
    transform: scale(1.3);
}
.service-icon-three{
    position: absolute;
    top: 30px;
}
.service-title-three {
    padding-right: 52px;
}
.service-title-three h4 {
    font-size: 26px;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}
.service-title-three h4 a{
    color: var(--solarup-primary);
}
.service-title-three p{
    margin-bottom: 12px;
    color: var(--solarup-primary);
    font-size: 18px;
}
a.service-btn-three{
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--solarup-light);
    background-color: var(--solarup-primary);
    position: relative;
}
a.service-btn-three i{
    transform: rotate(-45deg);
    transition: all 0.5s;
}
.service-box-three:hover a.service-btn-three{
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
}
.service-box-three:hover a.service-btn-three i{
    transform: rotate(0deg);
}
svg path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw 3s forwards ease-in-out;
  }
.service-box-three:hover svg path{
    animation: draw2 3s forwards ease-in-out; 
  }
  @keyframes draw {
    to {
      stroke-dashoffset: 0; 
    }
  }
  @keyframes draw2 {
    to {
      stroke-dashoffset: 0; 
    }
  }
.light p{
    color: var(--solarup-light);
}
/***********************
* cta three
***********************/
.cta-section-three {
    padding: 130px 0;
    background-image: url(../images/background/cta-three-bg.png);
    background-position: right;
    background-repeat: no-repeat;
    background-color: #F9F9F9;
    background-size: cover;
    overflow: hidden;
    position: relative;
}
.cta-shape-three{
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.7;
    clip-path: polygon(100% 0, 100% 43%, 63% 100%, 0 100%, 0 0);
}
.cta-section-three .btn-light{
    border: none;
}
/***********************
* why-choose four
***********************/
.why-choose-four {
    padding: 140px 0;
    background-color: #F9F9F9;
    overflow: hidden;
}
.why-choose-four .heading-box{
    margin-bottom: 80px;
}
.why-choose-image-four {
    clip-path: polygon(49% 0, 100% 30%, 100% 100%, 45% 100%, 0 74%, 0 0);
    position: relative;
    height: 100%;
}
.why-choose-image-four>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.why-choose-conter-four{
    position: absolute;
    top: 6px ;
    left: 6px;
    width: 250px;
    padding: 25px;
    background-color: var(--solarup-light);
    clip-path: polygon(100% 0, 100% 71%, 76% 100%, 0 100%, 0 0);
}
.why-choose-conter-four-inner {
    display: flex;
    align-items: center;
    column-gap: 8px;
}
.why-choose-conter-four-inner h4{
    margin-bottom: 0;
    font-size: 60px;
    line-height: 48px;
    letter-spacing: -0.05em;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.why-choose-conter-four p{
    margin-bottom: 0;
}
.why-choose-icon-four {
    height: 62px;
    width: 62px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--solarup-primary);
    margin-bottom: 12px;
}
.why-choose-icon-four span {
    position: absolute;
    top: -6px;
    left: 1px;
    height: 24px;
    width: 24px;
    border-radius: 100%;
    background-color: var(--solarup-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.why-choose-box-four h4{
    margin-bottom: 8px;
    font-size: 26px;
    letter-spacing: -0.03em;
}
.why-choose-box-four p{
    margin-bottom: 0;
}
.why-choose-box-four.last {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
}
.why-choose-four-counter {
    padding-top: 65px;
    margin-top: 90px;
    border-top: 1px solid #C8C8C8;
}
.why-choose-counter-box p {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 0;
}
.why-choose-counter-box {
    position: relative;
}
.why-choose-counter-box::after {
    content: "";
    position: absolute;
    top: -66px;
    left: 0;
    height: 1px;
    width: 0;
    background-color: var(--solarup-primary);
    transition: all 0.5s;
}
.why-choose-counter-box:hover::after{
    width: 100%;
}
/***********************
* team three
***********************/
.team-section-three {
    padding: 130px 0;
    overflow: hidden;
}
.team-section-three .heading-box {
    margin-bottom: 80px;
}
.team-box-three {
    background-color: #EFEFEF;
    overflow: hidden;
    transition: all 0.5s;
}
.team-box-three:hover{
    background-color: var(--solarup-secondary);
}
.team-image-three {
    position: relative;
}
.team-image-three img{
    clip-path: polygon(100% 0, 100% 100%, 15% 100%, 0 88%, 0 0);
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: all 0.5s;
}
.team-box-three:hover .team-image-three img{
    margin-left: 25px;
}
a.team-btn {
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    background-color: var(--solarup-secondary);
    height: 83px;
    width: 83px;
    position: absolute;
    top: -90px;
    right: -90px;
    color: var(--solarup-primary);
    font-size: 20px;
}
a.team-btn i{
    transform: translate(50px, 9px) rotate(-45deg);
}
.team-box-three:hover a.team-btn{
    top: 0;
    right: -1px;
}
ul.team-social-media {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: -31px;
    width: 44px;
    height: 150px;
    left: -90px;
    align-items: center;
    justify-content: center;
    background-color: #EFEFEF;
    display: flex;
    row-gap: 10px;
    flex-direction: column;
    transform: rotate(-40deg);
    transition: all 0.5s;
}
.team-box-three:hover ul.team-social-media{
    left: 30px;
    background-color: var(--solarup-secondary);
}
ul.team-social-media li{
    transform: rotate(40deg);
}
ul.team-social-media li a{
    color: var(--solarup-primary);
}
.team-details-three {
    padding: 24px 20px;
}
.team-details-three h4{
    margin-bottom: 0;
    font-size: 26px;
    font-weight: 500;
}
.team-details-three h4 a{
    color: var(--solarup-primary);
}
.team-details-three p{
    margin-bottom: 0;
    font-size: 18px;
    transition: all 0.5s;
    color: #777777;
}
.team-box-three:hover .team-details-three p{
    color: var(--solarup-primary);
}
/***********************
* portfolio three
***********************/
.portfolio-section-three {
    padding: 140px 0;
    color: var(--solarup-light);
    background-image: url(../images/portfolio/portfolio-three-bg.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.protfolio-counter-box img{
    filter: brightness(50);
    margin-bottom: 29px;
}
.protfolio-counter-box p{
    margin-bottom: 0;
    color: var(--solarup-light);
    padding-left: 5px;
}
.portfolio-box-three {
    position: relative;
    overflow: hidden;
}
.portfolio-image-three img{
    transition: all 0.8s;
}
ul.portfolio-tag-three {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    column-gap: 10px;
}
ul.portfolio-tag-three {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    column-gap: 10px;
    padding: 8px 20px;
    background-color: var(--solarup-primary);
}
ul.portfolio-tag-three li a{
    color: var(--solarup-light);
}
.portfolio-details-three h4{
    font-size: 26px;
    font-weight: 500;
    line-height: 33px;
    letter-spacing: -0.03em;
    background-color: var(--solarup-light);
    padding: 26px 34px;
    color: var(--solarup-primary);
    clip-path: polygon(91% 0, 100% 35%, 100% 100%, 9% 100%, 0 65%, 0 0);
}
.portfolio-details-three {
    position: absolute;
    bottom: 25px;
    left: -428px;
    width: calc(100% - 64px);
    transition: all 0.8s;
}
.portfolio-box-three:hover .portfolio-details-three{
    left: 32px;
}
.portfolio-box-three:hover .portfolio-image-three img{
    transform: scale(1.3);
}
.portfolio-section-three  ul.slick-dots li button{
    height: 9px;
    width: 9px;
    background-color: #2F354D;
    border-radius: 100%;
}
.portfolio-section-three ul.slick-dots li.slick-active button{
    background-color: var(--solarup-secondary);
}
.portfolio-section-three ul.slick-dots{
    column-gap: 27px;
    position: absolute;
    left: 300px;
    margin-top: 70px;
}
/***********************
* twstimonial three
***********************/
.twstimonial-section-three {
    padding: 140px 0;
    background-color: #F9F9F9;
    position: relative;
    overflow: hidden;
}
.testimonial-slider-three {
    padding: 0 50px;
}
.testimonial-box-three {
    text-align: center;
}
.testimonial-image-three {
    position: relative;
    height: 153px;
    width: 153px;
    border-radius: 100%;
    margin: auto;
    margin-bottom: 47px;
}
.testimonial-image-three span {
    height: 42px;
    width: 42px;
    position: absolute;
    top: -2px;
    right: -5px;
    border-radius: 100%;
    border: 5px solid #fff;
    background-color: var(--solarup-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.testimonial-box-three>p{
font-size: 25px;
font-style: italic;
font-weight: 300;
line-height: 42px;
margin-bottom: 47px;
}
.testimonial-title-three h4{
font-size: 25px;
font-weight: 500;
line-height: 31.9px;
letter-spacing: -0.04em;
margin-bottom: 0;
}
.testimonial-title-three ul.retting {
    font-size: 14px;
    justify-content: center;
    color: var(--solarup-primary);
}
.testimonial-slider-three button.slick-arrow {
    height: 44px;
    width: 44px;
    background-color: var(--solarup-light);
    color: var(--solarup-primary);
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -100px;
    transform: rotate(-45deg);
    transition: all 0.5s;
}
.testimonial-slider-three button.slick-next.slick-arrow {
    right: -100px;
    left: auto;
}
.testimonial-slider-three button.slick-arrow i{
    transform: rotate(45deg);
}
.testimonial-slider-three button.slick-arrow:hover, .testimonial-slider-three button.slick-arrow:focus{
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
/***********************
* blog three
***********************/
.blog-section-three {
    padding: 140px 0;
    position: relative;
    overflow: hidden;
}
a.blog-meta-three {
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.05em;
    margin-bottom: 7px;
    color: #999999;
}
.blog-box-three h4{
font-size: 26px;
font-weight: 500;
line-height: 33.18px;
letter-spacing: -0.03em;
}
.blog-box-three h4 a {
    color: var(--solarup-primary);
    background-image: linear-gradient(transparent calc(100% - 1px), #141827 1px);
    background-repeat: no-repeat;
    background-position-y: -1px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation: 1s cubic-bezier(.215,.61,.355,1) underline forwards;
}
.blog-box-three:hover h4 a{
    animation: 1s cubic-bezier(.215,.61,.355,1) underline-hover forwards;
}
.blog-box-three p{
    margin-bottom: 30px;
}
.blog-box-three {
    padding-right: 40px;
}
.blog-box-three:hover .btn-blog{
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
.blog-right-three {
    position: absolute;
    top: 0;
    width: 36%;
    right: 0;
    height: 100%;
    background-image: url(../images/blog/blog-right-image.jpg);
    background-size: cover;
    background-position: center;
    padding: 136px 86px 113px 110px;
    color: var(--solarup-light);
    display: flex;
    flex-direction: column;
}
.blog-right-three::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(0deg, rgba(20, 24, 39, 0.91) 0%, rgba(20, 24, 39, 0.92) 30.38%, rgba(72, 87, 141, 0) 96.25%);
}
.blog-title-three,.blog-detail-three {
    position: relative;
}
.blog-title-three h2{
    font-size: 70px;
    font-weight: 500;
    line-height: 79.77px;
    letter-spacing: -0.04em;
}
.blog-detail-three p{
    color: var(--solarup-light);
    font-size: 18px;
    margin-bottom: 50px;
}
.blog-detail-three .btn-light{
    border: none;
}
.blog-detail-three {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 1s;
    flex-shrink: 0;
    margin-top: auto;
}
.blog-title-three {
    transition: all 1s;
    position: relative;
    top: 600px;
}
.blog-right-three:hover .blog-title-three{
    top: 0px;
}
.blog-right-three:hover .blog-detail-three {
    max-height: 1000px;
    opacity: 1;
}
/***********************
* footer three
***********************/
footer.footer-three {
    padding-top: 130px;
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    background-image: url(../images/footer/footer-three-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-blend-mode: luminosity;
    overflow: hidden;
}
footer.footer-three p{
    color: var(--solarup-light);
}
.contact-info-three {
    padding-right: 40px;
}
.contact-info-three h2{
font-size: 50px;
font-weight: 500;
line-height: 58px;
letter-spacing: -0.04em;
margin-bottom: 30px;
}
.contact-info-three>p{
    margin-bottom: 40px;
}
ul.contact-details-three li{
    display: flex;
    align-items: center;
    column-gap: 22px;
}
ul.contact-details-three li+li{
    margin-top: 42px;
}
 .contact-icon-three{
    height: 92px;
    width: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: var(--solarup-secondary);
    background-color: #FFFFFF05;
    backdrop-filter: blur(32px);
    border-radius: 0 34px 0 34px;
}
ul.contact-details-three {
    padding-bottom: 85px;
    border-bottom: 1px solid #FFFFFF1A;
    margin-bottom: 130px;
}
ul.contact-details-three li a p{
    font-size: 18px;
    margin-bottom: 8px;
}
ul.contact-details-three li a p:last-child{
font-size: 30px;
font-weight: 400;
line-height: 28px; 
margin-bottom: 0;
}
.contact-form-three {
    padding: 60px 70px;
    background-color: #FFFFFF05;
    backdrop-filter:blur(32px) ;
    clip-path: polygon(100% 0, 100% 82%, 83% 100%, 0 100%, 0 0);
}
.contact-form-three h4{
font-size: 30px;
font-weight: 500;
line-height: 30px;
letter-spacing: -0.03em;
margin-bottom: 30px;
}
.contact-form-three .form-group{
    column-gap: 30px;
    margin-bottom: 25px;
}
.contact-form-three .form-group .form-control,.contact-form-three .form-select{
    background-color: transparent;
    border: none !important;
    border-bottom: 1px solid #FFFFFF1A !important;
    padding: 17px 0;
    color: #fff !important;
}
.form-select option{
    background-color: var(--solarup-light);
    color: var(--solarup-primary);
}
.contact-form-three .form-group .form-control::placeholder{
    color: var(--solarup-light);
}
.footer-three ul.footer-contact-inner li p, .footer-three ul.footer-contact-inner li a,.footer-three ul.footer-link-inner li a{
    color: var(--solarup-light);
}
.footer-three .footer-copyrights {
    margin-top: 356px;
}
/***********************
* why-choose one
***********************/
.why-choose-section-one {
    padding: 140px 0;
    background-color: var(--solarup-primary);
    background-image: url(../images/background/why-choose-one-bg.png);
    background-position: bottom right;
    background-size: auto;
    background-repeat: no-repeat;
    color: var(--solarup-light);
    padding-bottom: 190px;
    overflow: hidden;
}
.why-choose-box {
    position: relative;
}
.why-choose-details {
    position: absolute;
    bottom: -60px;
    background-color: var(--solarup-primary);
    width: calc(100% - 60px);
    display: flex;
    column-gap: 28px;
    padding: 20px;
    left: 30px;
    transition: all 0.5s;
}
.why-choose-box:hover .why-choose-details{
    bottom: 0;
}
.why-choose-icon {
    flex-shrink: 0;
}
.why-choose-title h4 {
    font-size: 26px;
    margin-bottom: 8px;
    transition: all 0.5s;
}
.why-choose-title p {
    margin-bottom: 0;
    color: #B4B8C9;
}
.why-choose-image img{
    transition: all 0.8s;
}
.why-choose-image{
    overflow: hidden;
}
.why-choose-box:hover .why-choose-title h4{
    color: var(--solarup-secondary);
}
.why-choose-box:hover .why-choose-image img{
    transform: scale(1.2);
}
/***********************
 * mobile-nav
***********************/
.mobile-nav-wrapper {
    position: fixed;
    z-index: 991;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transform-origin: left center;
    transition: all 0.5s;
    visibility: hidden;
    z-index: 999999;
 }
 .mobile-nav-wrapper.expanded {
    opacity: 1;
    transform: translateX(0%);
    visibility: visible;
    transition: all 0.5s;
 }
 .mobile-nav-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #56736c49;
    opacity: 0.9;
 }
 .mobile-nav-content {
    width: 100%;
    max-width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
    background-color: var(--solarup-primary);
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 30px 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: all 0.5s;
 }
 .mobile-nav-wrapper.expanded .mobile-nav-content {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: all 0.5s;
 }
 .mobile-nav-close {
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    top: 42px;
    right: 15px;
 }
 .mobile-nav-close span {
    width: 3px;
    height: 100%;
    display: block;
    position: absolute;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    background-color: var(--solarup-light);
    transform: translate(-50%, -50%) rotate(45deg);
 }
 .mobile-nav-close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
 }
 ul.mobile-menu-list {
    margin: 0;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 10px;
 }
 ul.mobile-menu-list li {
    border-bottom: 1px solid rgb(255 255 255 / 20%);
 }
 ul.mobile-menu-list li:last-child {
    border: none;
 }
 .locked {
    position: fixed;
    width: 100%;
    top: 0;
 }
 ul.mobile-menu-list li a {
    font-size: 16px;
    line-height: 50px;
    font-weight: 400;
    color: #ffffff;
    transition: all 0.5s;
    padding: 0 25px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
 ul.mobile-menu-list .dropdown ul {
    margin: 0;
    padding: 0;
    display: none;
    border-top: 1px solid #d5cdcd;
 }
 ul.mobile-menu-list .dropdown ul li a {
    padding-left: 35px;
 }
 .mobile-menu-list .menu-item-has-children button.expanded {
    transform: translateY(-50%)rotate(90deg);
 }
 .mobile-menu-list .menu-item-has-children button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%)rotate(-0deg);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: none;
    outline: none;
    float: right;
    transition: all 0.3s;
    line-height: 0px;
 }
 .heading-box>span img{
    animation: roted 10s infinite linear;
 }
@keyframes roted {
    form{
        transform: rotate(0);
    }
    to{
        transform: rotate(360deg);
    }
}
/***********************
 * about us page
***********************/
.page-header-section {
    padding: 133px 0;
    background-image: url(../images/background/about-page-bg.jpg);
    background-size: cover;
    background-position: center;
    background-color: rgb(20 24 39 / 40%);
    background-blend-mode: overlay;
    color: var(--solarup-light);
    margin: 0 60px;
    position: relative;
}
.page-header-heading h2 {
    font-size: 82px;
    letter-spacing: -0.03em;
    line-height: 92px;
}
.page-header-section::after{
    content: "";
    position: absolute;
    top: 0;
    left: -60px;
    width: calc(100% + 120px);
    height: 50%;
    background-color: var(--solarup-primary);
    z-index: -1;
}
ul.breadcrumb {
    padding: 8px 10px;
    column-gap: 7px;
    align-items: center;
    display: inline-flex;
    margin-bottom: 7px;
    background-color: #fff;
    color: var(--solarup-primary);
}
ul.breadcrumb li img{
    animation: roted 10s infinite linear;
}
ul.breadcrumb a{
    color: var(--solarup-primary);
}
.about-section-four {
    margin: 0 48px;
    background-image: url(../images/about/about-four-bg.png);
    background-size: 50%;
    background-position: left bottom;
    background-repeat: no-repeat;
}
.about-left-four {
    max-width: 636px;
    margin-left: auto;
}
.about-left-four h4{
    font-size: 26px;
    letter-spacing: -0.03em;
}
ul.about-list-four {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px;
}
ul.about-list-four li{
    width: 45%;
    display: flex;
    align-items: center;
    column-gap: 15px;
    font-size: 18px;
}
.about-right-four {
    padding: 130px 75px 100px 95px;
    background-color: #1418270A;
    margin-left: 130px;
}
.about-right-four>p {
    line-height: 30px;
    margin-bottom: 30px;
}
.about-lower-four {
    display: flex;
    background-color: var(--solarup-light);
}
.counter-box-four {
    padding: 50px 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    width: 40%;
}
.about-image-four img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.counter-box-four img{
    margin-bottom: auto;
}
.counter-box-four p{
    font-size: 18px;
    margin-bottom: 0;
    color: var(--solarup-primary);
}
.counter-box-four h4{
    margin-bottom: 0;
    font-size: 48px;
    line-height: 55px;
    letter-spacing: -0.05em;
}
.about-section-two.about {
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    background-image: url(../images/background/about-who-bg.png);
    background-position: right bottom;
    background-size: auto;
    background-repeat: no-repeat;
}
.about-section-two.about p{
    color: var(--solarup-light);
}
.about-section-two.about .About-counter-two{
    color: var(--solarup-primary) ;
}
.about-section-two.about  .counter-box-two{
    background-color: var(--solarup-light);
    color: var(--solarup-primary);
}
.about-section-two.about  .counter-box-two p, .about-section-two.about .About-counter-two p{
    color: var(--solarup-primary);
}
/***********************
 * protfolio page
***********************/
.protfolio-section-four {
    padding: 140px 0;
}
.protfolio-box-four {
    position: relative;
    overflow: hidden;
    margin: 0 10px;
}
.protfolio-image-four img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.portfolio-details-four {
    position: absolute;
    bottom: 0;
    left: -34px;
    width: 100%;
    background-color: var(--solarup-light);
    padding: 23px 60px 0 34px;
    transition: all 0.5s;
}
.portfolio-details-four .portfolio-btn{
    position: absolute;
    right: 20px;
    top: 60%;
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    transition: all 0.5s;
}
.portfolio-info-four h4{
    font-size: 26px;
    font-weight: 500;
    line-height: 33.18px;
    letter-spacing: -0.03em;
    margin-bottom: 43px;
}
.portfolio-info-four h4 a{
    color: var(--solarup-primary);
}
.portfolio-info-four p{
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    text-transform: uppercase;
}
.portfolio-info-four h6{
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}
.protfolio-box-four:hover .portfolio-details-four{
  left: 0;
}
.protfolio-box-four:hover .portfolio-btn{
    top: 0;
    right: 0;
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
}
ul.pagination {
    justify-content: center;
    column-gap: 11px;
}
ul.pagination li a{
    height: 43px;
    width: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #14182733;
    color: #14182733;
}
ul.pagination li.active a,ul.pagination li a:hover, ul.pagination li:last-child a{
  border-color: var(--solarup-primary);
  color: var(--solarup-primary);
}
/***********************
 * protfolio details page
***********************/
.protfolio-details-section {
    padding: 140px 0;
}
.portfolio-details-list{
    margin-bottom: 30px;
}
.portfolio-details-list h2 {
    font-size: 50px;
    font-weight: 500;
    line-height: 58px;
    letter-spacing: -0.04em;
    margin-bottom: 8px;
}
.portfolio-details-list h4{
   font-size: 26px;
   font-weight: 500;
   line-height: 55px;
   letter-spacing: -0.03em;
   margin-bottom: 0;
}
.portfolio-details-list ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
}
.portfolio-details-list ul li {
    width: 33%;
    padding: 18px 0px 18px 23px;
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
}
.portfolio-details-list ul li h6{
    margin-bottom: 0;
    font-size: 20px;
    line-height: 38px;
    letter-spacing: -0.03em;
}
.portfolio-details-list ul li:nth-child(4), .portfolio-details-list ul li:nth-child(5), .portfolio-details-list ul li:nth-child(6){
    border-bottom: none;
}
.portfolio-details-list ul li:nth-child(1), .portfolio-details-list ul li:nth-child(4){
    border-left: none;
}
.portfolio-details-testimonial {
    margin-top: 70px;
    border-top: 1px solid #10101036;
    padding-top: 50px;
    margin-bottom: 50px;
}
.portfolio-details-testimonial h4{
    margin-bottom: 30px;
    font-size: 26px;
    font-weight: 500;
    line-height: 55px;
    letter-spacing: -0.03em;
}
.portfolio-testimonial-item {
    display: flex;
    column-gap: 30px;
}
.portfolio-testimonial-image {
    flex-shrink: 0;
}
.portfolio-testimonial-details >p{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 26px;
}
.portfolio-client-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
ul.portfolio-testimonial-retting {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    column-gap: 3px;
    font-size: 19px;
    color: #FFA800;
}
.portfolio-client-info h5{
    font-size: 26px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}
.portfolio-client-info p{
    margin-bottom: 0;
    font-size: 20px;
    line-height: 30px;
}
.protfolio-details-pagination {
    display: flex;
    border-top: 1px solid #10101036;
    border-bottom: 1px solid #10101036;
}
.protfolio-pagination-box {
    padding: 51px 73px;
    padding-left: 0;
    width: 50%;
    display: flex;
    align-items: center;
    column-gap: 18px;
}
.protfolio-pagination-box:last-child{
    padding-right: 0;
    padding-left: 73px;
    border-left: 1px solid #10101036;
}
.protfolio-pagination-box>a{
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    font-size: 20px;
    margin-right: auto;
}
.protfolio-pagination-box:last-child>a{
    margin-left: auto;
    margin-right: 0;
}
.protfolio-pagination-title h4{
    font-size: 22px;
    line-height: 33px;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}
.protfolio-pagination-title h4 a{
    color: var(--solarup-primary);
}
.protfolio-pagination-title p{
    line-height: 32px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0;
}
.protfolio-info-widget {
    margin-bottom: 65px;
}
.protfolio-info-widget h4{
    margin-bottom: 25px;
    font-size: 26px;
    letter-spacing: -0.03em;
}
.protfolio-info-widget ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.protfolio-info-widget ul li{
    padding-bottom: 27px;
    border-bottom: 1px solid #14182714;
    display: flex;
    align-items: center;
    column-gap: 24px;
}
.protfolio-info-widget ul li+li{
    padding-top: 27px;
}
.protfolio-info-widget ul li:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.protfolio-info-widget ul li .icon{
    height: 60px;
    width: 60px;
    background-color: #1418270F;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.protfolio-info-widget ul li span {
    color: #9D9D9D;
    line-height: 32px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.protfolio-info-widget ul li p{
    margin-bottom: 0;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: -0.03em;
    color: var(--solarup-primary);
}
.protfolio-cta-info {
  background-color: var(--solarup-primary);
  color: var(--solarup-light);
  padding: 40px;
}
.protfolio-cta-info>h4{
    margin-bottom: 12px;
    font-size: 33px;
    letter-spacing: -0.04em;
}
.protfolio-cta-info p{
    margin-bottom: 18px;
    color: var(--solarup-light);
}
.protfolio-cta-info-inner {
    display: flex;
    padding-top: 26px;
    border-top: 1px solid #FFFFFF33;
    align-items: center;
    column-gap: 13px;
}
.protfolio-cta-info-inner>.icon{
    height: 55px;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
    font-size: 22px;
    flex-shrink: 0;
}
.protfolio-cta-call span{
    color: var(--solarup-secondary);
}
.protfolio-cta-call h4{
    font-size: 30px;
    margin-bottom: 0;
}
.protfolio-cta-call h4 a{
    color: var(--solarup-light);
}
.protfolio-cta-widget img {
    width: 100%;
}
.protfolio-cta-widget {
    margin-bottom: 50px;
}
.protfolio-link-widget h4{
    margin-bottom: 32px;
}
.protfolio-link-widget ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    column-gap: 8px;
}
.protfolio-link-widget ul li a{
    height: 55px;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--solarup-primary);
    color: var(--solarup-primary);
}
/***********************
 * faq page
***********************/
.faq-section {
    padding: 140px 0;
    overflow: hidden;
}
.faq-list {
    margin-bottom: 60px;
}
.faq-list .heading-box {
    margin-bottom: 0px;
}
.faq-list .heading-box span{
    margin-bottom: 25px;
}
.accordion-item:first-of-type>.accordion-header .accordion-button{
    border-radius: 0;
}
.accordion-button:not(.collapsed){
    color: var(--solarup-primary);
    background-color: transparent;
    box-shadow: none;
    padding-bottom: 15px;
}
.accordion-item{
    color: var(--solarup-primary);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #14182714;
}
.accordion-button{
    padding: 29px 0;
    font-size: 20px;
    letter-spacing: -0.03em;
    font-weight: 500;
}
.accordion-body{
    padding: 0;
    padding-bottom: 29px;
}
.accordion-body p{
    margin-bottom: 0 ;
}
.accordion-button::after{
    height: 44px;
    width: 44px;
    background-color: #1418270D;
    content: "\2b";
    font-family: "Font Awesome 6 Pro";
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
}
.accordion-button:not(.collapsed)::after{
    content: "\f068";
    background-image: none;
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
.faq-title .btn-primary::after{
    background-color: var(--solarup-primary);
}
.faq-title .btn-primary:hover{
    color: var(--solarup-light);
}
/***********************
 * blog page
***********************/
.blog-list-section {
    padding: 140px 0;
}
.blog-block {
    margin-bottom: 60px;
}
.blog-sidebar .blog-block {
    margin-bottom: 40px;
}
.blog-image {
    position: relative;
}
.blog-image .blog-date {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 70px;
}
.blog-image .blog-date span:first-child {
    color: var(--solarup-light);
    background-color: var(--solarup-primary);
    font-size: 32px;
    line-height: 32px;
    font-weight: 500;
    font-family: var(--solarup-heading-font);
    padding: 19px 15px;
    display: inline-block;
}
.blog-image .blog-date .month {
    -webkit-writing-mode: vertical-lr;
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
    height: 100%;
    text-align: center;
    transform: rotate(180deg);
}
.blog-item-details h4{
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
}
.blog-item-details h4 a{
    color: var(--solarup-primary);
}
.blog-item-details p{
    margin-bottom: 20px;
}
ul.blog-meta-one {
    margin: 20px 0 10px 0;
}
.blog-list-item .btn-primary::after{
    background-color: var(--solarup-primary);
}
.blog-list-item .btn-primary:hover{
    color: var(--solarup-light);
}
.blog-serch-widget {
    position: relative;
}
.blog-serch-widget input{
    background-color: transparent;
    border: 1px solid var(--solarup-primary);
    padding: 16.5px 20px;
    width: 100%;
}
.blog-serch-widget button {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background-color:var(--solarup-secondary) ;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-serch-widget button i{
    transform: rotate(-45deg);
}
.category-widget h4, .recent-blog-widget h4, .tag-widget h4, .shop-block h4{
    padding: 19px 22px;
    background-image: url(../images/blog/bag-p-shape.png);
    background-position: right;
    background-size: cover;
    background-color: var(--solarup-primary);
    color: #fff;
}
.category-widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.category-widget ul li{
    display: flex;
    align-items: center;
    column-gap: 15px;
    margin-bottom: 12px;
}
.category-widget ul li a{
    color: #666666;
    transition: all 0.5s;
}
.category-widget ul li:hover a{
    padding-left: 15px;
    color: var(--solarup-primary);
}
.recent-blog-widget-item {
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin-bottom: 20px;
}
ul.recent-blog-meta {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
ul.recent-blog-meta li a{
    color: #666666;
    font-size: 13px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    column-gap: 3px;
}
ul.recent-blog-meta li a img{
    width: 15px;
}
.recent-blog-widget-item-title>a{
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.03em;
    color: var(--solarup-primary);
    font-weight: 500;
}
.tag-widget ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
}
.tag-widget ul li a {
    color: var(--solarup-primary);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    border: 1px solid #BDBDBD;
    padding: 11px 13px;
    display: flex;
    text-transform: uppercase;
}
.bolg-cta-widget {
    padding: 105px 20px;
    text-align: center;
    background-image: url(../images/blog/blog-p-9.jpg);
    background-position: center;
    background-size: cover;
    color: var(--solarup-light);
    background-color: rgb(20 24 39 / 70%);
    background-blend-mode: multiply;
}
.bolg-cta-widget img{
    margin-bottom: 20px;
}
.bolg-cta-widget h3{
    font-size: 26px;
    letter-spacing: -0.03em;
    line-height: 34px;
}
/***********************
 * blog page
***********************/
.blog-details-section {
    padding: 140px 0;
}
ul.single-blog-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    column-gap: 120px;
    justify-content: center;
    margin-bottom: 32px;
}
ul.single-blog-meta li{
    position: relative;
}
ul.single-blog-meta li::after{
    content: "";
    position: absolute;
    top: 50%;
    left: -60px;
    height: 80%;
    width: 1px;
    background-color: #C7C9D3;
    transform: translateY(-50%);
}
ul.single-blog-meta li:first-child:after{
    display: none;
}
ul.single-blog-meta li a span{
    display: flex;
    align-items: center;
    column-gap: 8px;
    color: #9D9D9D;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 0.05em;
    justify-content: center;
}
ul.single-blog-meta li a{
    text-align: center;
}
ul.single-blog-meta li a p{
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    color: var(--solarup-primary);
    margin-bottom: 0;
}
.blog-block h2{
    font-size: 50px;
    font-weight: 500;
    line-height: 60px;
    letter-spacing: -0.03em;
    margin-bottom: 40px;
    padding: 0 100px;
    text-align: center;
}
.blog-details-section .blog-block{
    margin-bottom: 30px;
}
ul.single-blog-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.single-blog-list li{
    display: flex;
    column-gap: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}
.blog-details-section .blog-block h4{
    font-size: 26px ;
    line-height: 28px;
    margin-bottom: 14px;
    letter-spacing: -0.03em;
}
.blog-details-section .blog-block p{
    margin-bottom: 20px;
}
.single-blog-quoght {
    padding: 46px 93px;
    margin-bottom: 30px;
    border-left: 7px solid var(--solarup-secondary);
    background-image: url(../images/blog/blog-details-qout.jpg);
    background-size: cover;
    background-position: center;
}
.single-blog-quoght p{
    font-size: 26px;
    font-style: italic;
    font-weight: 500;
    line-height: 36px;
    color: var(--solarup-primary);
    margin-bottom: 0;
}
.single-blog-image-two {
    display: flex;
    column-gap: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
}
.single-blog-pagination {
    display: flex;
    align-items: center;
    padding-bottom: 47px;
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 67px;
}
.single-blog-pagination-next {
    text-align: end;
    width: 50%;
    padding-left: 50px;
}
.single-blog-pagination-pre {
    width: 50%;
    padding-right: 50px;
}
a.btn-link-two {
    display: inline-flex;
    align-items: center;
    column-gap: 6px;
    color: var(--solarup-primary);
    margin-bottom: 14px;
}
.single-blog-pagination h5{
    font-size: 26px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}
.single-blog-pagination h5 a{
    color: var(--solarup-primary);
}
.comment-widget h3, .comment-form-widget h3{
    margin-bottom: 40px;
    font-size: 50px;
    letter-spacing: -0.03em;
}
.comment-widget-item {
    display: flex;
    align-items: flex-start;
    column-gap: 24px;
    margin-bottom: 45px;
}
.comment-meta {
    display: flex;
    column-gap: 12px;
    margin-bottom: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}
.comment-meta p{
    font-family: Space Grotesk;
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.03em;
    margin-bottom: 0 !important;
    color: var(--solarup-primary);
}
.comment-text {
    margin-bottom: 25px;
}
a.comment-reply {
    display: inline-flex;
    align-items: center;
    column-gap: 5px;
    padding: 3px 13px;
    color: var(--solarup-primary);
    background-color: var(--solarup-secondary);
}
.comment-widget-item.reply {
    padding-left: 107px;
}
.comment-widget {
    margin-bottom: 65px;
}
.comment-form-group-one {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    column-gap: 23px;
}
.comment-form-group-one .form-control, .comment-form-group-one-inner{
    width: 100%;
}
.comment-form-widget .btn-primary::after{
    background-color: var(--solarup-primary);
}
.comment-form-widget .btn-primary:hover{
    color: var(--solarup-light);
}
/***********************
 * shop page
***********************/
.shop-section {
    padding: 140px 0;
}
.shop-fillter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 20px;
    margin-bottom: 30px;
}
.shop-fillter p{
    margin-bottom: 0;
    font-size: 20px;
}
.shop-fillter .select2-selection.select2-selection--single {
    border: 1px solid #3B4443;
    border-radius: 6px;
}
.shop-fillter .fillter-option{
    width: 268px;
}
.shop-fillter .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 13px 20px;
    color: var(--solarup-primary);
    font-size: 16px;
    line-height: 19px;
}
.shop-fillter .select2-container .select2-selection--single{
    height: 100%;
}
.shop-fillter .select2-container--default .select2-selection--single .select2-selection__arrow{
    top: 50%;
    transform: translateY(-50%);
}
.product-image {
    position: relative;
    margin-bottom: 25px;
    border: 1px solid #14182733;
    text-align: center;
}
.product-details h4{
    margin-bottom: 5px;
    font-size: 20px;
}
.product-details h4 a{
    color: var(--solarup-primary);
}
.product-details p{
    margin-bottom: 20px;
}
.product-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
ul.product-retting {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    column-gap: 3px;
    color: #FFAE00;
}
a.cart-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    column-gap: 10px;
    width: max-content;
    transition: all 0.5s;
    opacity: 0;
}
.product-box:hover a.cart-btn{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.shop-block {
    margin-bottom: 40px;
}
.shop-widget h4 {
    margin-bottom: 0;
}
.product-list {
    display: flex;
    column-gap: 30px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px dashed #00000033;
}
.product-list:nth-child(2){
    margin-top: 10px;
}
.product-list:last-child{
    border: none;
}
.product-list img{
    border-radius: 10px;
}
.product-list .title a{
    font-size:18px;
    color: var(--solarup-primary);
    margin-bottom: 5px;
}
.product-list .title p{
    font-size: 16px;
    margin-bottom: 0;
}
.fillter-price-rang {
    height: 15px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
}
.fillter-price-rang::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 14px;
    width: 15px;
    border-radius: 100%;
    background-color: var(--solarup-primary);
}
.fillter-price-rang::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 1px;
    width: 100%;
    background-color: var(--solarup-primary);
}
.fillter-price-rang-handle {
    width: 14px;
    height: 14px;
    background-color: var(--solarup-primary);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0; 
    cursor: pointer;
}
.fillter-widget {
    padding: 24px 40px;
    background-color: #F9F9F9;
}
.fillter-price-rang-inner {
    display: inline-block;
    white-space: nowrap;
    font-size: 18px;
    width: 100%;
    text-align: center;
}
.fillter-price-box {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
    row-gap: 20px;
    flex-wrap: wrap;
}
.fillter-price-box .btn-primary{
    width: 100%;
    justify-content: center;
    padding: 8px 0;
}
.fillter-price-box .btn-primary::after{
    background-color: var(--solarup-primary);
}
.fillter-price-box .btn-primary:hover{
    color: var(--solarup-light);
}
/***********************
 * shop details page
***********************/
.shop-details-section {
    padding: 140px 0;
}
.product-list ul.product-retting {
    font-size: 10px;
}
.product-desc-reviews-btn {
    border-bottom: 1px solid #3B444333;
    margin-bottom: 20px;
    column-gap: 70px;
}
.product-desc-reviews-btn li{
    line-height: 0;
}
.product-desc-reviews-btn .btn::after{
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 1px;
    width: 0;
    transition: all 0.5s;
    background-color: var(--solarup-primary);
}
.product-desc-reviews-btn .btn.active::after{
    width: 100%;
}
.product-desc-reviews-btn .btn{
    background-color: transparent;
    border: none;
}
.product-desc-reviews-btn .btn:active{
    background-color: transparent;
}
.reating-inner a {
    color: #FF9900;
}
.tab-content .comment-form-widget p {
    margin-bottom: 10px;
    font-size: 18px;
}
.tab-content .comment-form-widget .reating-inner{
   margin-bottom: 30px;
}
.product-details-right h3 {
    font-size: 50px;
    margin-bottom: 8px;
    line-height: 60px;
    letter-spacing: -0.03em;
}
.product-details-right>h4{
    font-size: 50px;
    margin-bottom: 18px;
    line-height: 60px;
    letter-spacing: -0.03em;
    color: var(--solarup-secondary);
}
.product-details-right p{
    margin-bottom: 34px;
}
.product-cart-info {
    padding-top: 20px;
    border-top: 1px solid #14182733;
    padding-bottom: 40px;
    border-bottom: 1px solid #14182733;
}
.product-cart-info h4{
    margin-bottom: 30px;
}
.product-cart-info-box {
    display: inline-flex;
    margin-right: 22px;
    background-color: #EFEFEF;
    padding: 17px 16px;
    column-gap: 46px;
}
.product-cart-info-box a{
    height: 26px;
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #D9D9D9;
    color: var(--solarup-primary);
}
.product-cart-info .btn-primary::after{
    background-color: var(--solarup-primary);
}
.product-cart-info .btn-primary:hover{
    color: var(--solarup-light);
}
ul.product-info-list {
    padding: 0;
    margin: 30px 0;
    list-style: none;
}
ul.product-info-list li {
    margin-bottom: 23px;
    display: flex;
    align-items: center;
    column-gap: 6px;
    align-items: baseline;
}
ul.product-info-list li p,  .social-media p{
    margin-bottom: 0;
    color: var(--solarup-primary);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.03em;
}
ul.product-info-list li span{
    color: #666666;
}
.product-details-right .social-media{
    padding-top: 30px;
    border-top: 1px solid #14182733;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
ul.portfolio-details-social-media {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    column-gap: 22px;
}
ul.portfolio-details-social-media li a{
    color: var(--solarup-primary);
    font-size: 20px;
}
.shop-reviews-section {
    padding: 60px 0;
}
/***********************
* cart page
***********************/
.cart-section {
    padding: 150px 0;
    overflow: hidden;
}
.cart-product-heading {
    border-bottom: 1px solid #00000033;
}
.cart-heading h4{
    margin-bottom: 30px;
    font-size: 25px;
}
.cart-product-info {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
.cart-product-name h6{
    margin-bottom: 0;
}
.cancel-product {
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--solarup-secondary);
    margin-left: auto;
}
.cancel-product a{
    color: var(--solarup-primary);
}
.cart-product-name {
    margin-left: 82px;
}
.cart-product-count .product-cart-info {
    justify-content: center;
    margin-bottom: 0;
}
.cart-product-single-box {
    padding: 30px 0;
    border-bottom: 1px solid #00000033;
}
.price p, .total-price p{
    margin-bottom: 0;
}
.cart-product-image {
    background-color: #D9D9D9;
}
.cart-lower{
    padding-top: 50px;
}
.cupen-code form{
    display: flex;
    align-items: center;
    column-gap: 20px;
}
.cupen-code form .form-control{
    width: auto;
    padding: 16px;
}
.cupen-code{
    padding-bottom: 50px;
    border-bottom: 1px solid #14182733;
}
.cupen-code .btn-primary{
    margin-left: auto;
}
.cupen-code .btn-primary:hover{
    color: var(--solarup-light);
}
.cupen-code .btn-primary::after{
    background-color: var(--solarup-primary);
}
.btn-dark {
    padding: 17px;
    border-radius: 0;
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    transition: all 0.5s;
    border: none;
}
.btn-dark:hover{
    background-color: var(--solarup-secondary);
    color: var(--solarup-primary);
}
.cart-total {
    background-color: var(--solarup-primary);
    padding: 60px;
    color: var(--solarup-light);
}
.cart-total h4{
    margin-bottom: 44px;
}
.cart-total ul{
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 24px;
}
.cart-total ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #FFFFFF33;
    padding: 20px 0;
}
.cart-total ul li p{
    margin-bottom: 0;
    font-size: 20px;
    color: var(--solarup-light);
}
.cart-total ul li h6{
    margin-bottom: 0;
    font-size: 20px;
}
/***********************
* checkout page
***********************/
.checkout-section {
    padding: 150px 0;
    overflow: hidden;
}
.form-group-outer, .checkout-form .form-group {
    margin-bottom: 40px;
    column-gap: 36px;
    display: flex;
    align-items: flex-start;
}
.checkout-section .form-group-inner {
    width: 100%;
    margin-bottom: 25px;
}
.checkout-form .form-group{
    flex-direction: column;
}
.checkout-form  .form-control {
    border-color: #14182733 !important;
    padding: 16px 23px;
    font-size: 16px;
    color: #666666 !important;
}
.checkout-form  .form-control::placeholder{
    color: #666666 ;
}
.checkout-form  label {
    margin-bottom: 14px;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.03em;
    font-family: var(--solarup-heading-font);
}
.place-order-box {
    padding: 50px;
    background-color: var(--solarup-primary);
}
.place-order-box h4 {
    color: var(--solarup-light);
    font-size: 25px;
    margin-bottom: 30px;
}
.order-product-info {
    display: flex;
    align-items: center;
    column-gap: 36px;
    margin-bottom: 24px;
}
.order-product-info h6{
    font-size: 30px;
    color: var(--solarup-light);
}
.order-info ul{
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 24px;
}
.order-info ul li {
    color: var(--solarup-light);
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #FFFFFF33;
    justify-content: space-between;
}
.order-info ul li p{
    margin-bottom: 0;
    color: var(--solarup-light);
}
.order-info ul li.hedding h5{
    margin-bottom: 0;
    font-size: 20px;
}
.order-info ul li h6{
    margin-bottom: 0;
}
.order-info ul li form{
    display: flex;
    align-items: center;
    column-gap: 20px;
}
.order-info ul li form p{
    display: flex;
    align-items: center;
    column-gap: 10px;
}
.order-info ul li form p input{
    height: 16px;
    width: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 2px solid #FFFFFF33;
    background-color: transparent;
    outline: none;
    transition: all 0.3s ease;
}
.order-info ul li form p input:checked {
    border: 2px solid var(--solarup-secondary); 
    background-color: var(--solarup-light);
}
.payment-methad {
    color: var(--solarup-light);
    padding-bottom: 25px;
    border-bottom: 1px solid #FFFFFF33;
}
.payment-methad p{
    color: var(--solarup-light);
    padding-left: 26px;
    margin-bottom: 0;
}
.payment-title {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}
.payment-title h5{
    margin-bottom: 0;
}
.payment-methad-item .payment-title span{
    border: 1px solid var(--solarup-light);
    height: 16px;
    width: 16px;
    border-radius: 100%;
    position: relative;
}
.payment-methad-item.active .payment-title span{
    border: 1px solid var(--solarup-secondary);
}
.payment-methad-item .payment-title span::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 8px;
    width: 8px;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background-color: transparent;
}
.payment-methad-item.active .payment-title span::after{
    background-color: var(--solarup-secondary);
}
.payment-methad-item+.payment-methad-item{
    margin-top: 30px;
}
.order-info>p{
    color: var(--solarup-light);
    margin: 30px 0;
}
.payment-methad-item p{
    max-height: 0;
    overflow: hidden;
}
.payment-methad-item.active p{
    max-height: 1000px;
    transition: all 2s;
}
/***********************
* service page
***********************/
.service-section {
    padding: 140px 0;
}
.service-section .service-box-one {
    border: 1px solid #D7DAE5;
}
.service-section .pagination{
    margin-top: 80px;
}
/***********************
* service details page
***********************/
.service-details-section {
    padding: 140px 0;
}
.service-block {
    margin-bottom: 40px;
}
.service-block ul li {
    margin-bottom: 0;
    padding: 12px;
    border-bottom: 1px solid #E1E1E1;
}
.service-block ul li:first-child{
    border-top: 1px solid #E1E1E1;
}
.service-block .category-widget p{
    color: var(--solarup-primary);
    font-weight: 600;
}
.service-details-box{
    margin-bottom: 30px;
}
.service-details-box h2,.service-details-box p{
  margin-bottom: 20px;
}
.service-details-box h4{
   margin-bottom: 14px;
   font-size: 26px ;
}
.single-service-list{
    padding: 0;
    margin: 0;
    list-style: none;
}
.single-service-list li{
    display: flex;
    column-gap: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}
ul.single-service-list-two {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
ul.single-service-list-two li {
    width: 45%;
    padding-left: 6px;
    margin-bottom: 10px;
    font-weight: 500;
}
.service-details-box .accordion-item {
    border: 1px solid #141827;
    margin-bottom: 10px;
}
.accordion-item:first-of-type{
    border-radius: 0;
}
.service-details-box .accordion-item h4{
    margin-bottom: 0;
}
.service-details-box .accordion-button {
    padding: 8px 8px 8px 20px;
}
.service-details-box .accordion-body{
    padding: 24px;
}
.accordion-body p{
    margin-bottom: 0;
}
.service-details-box .accordion-button::after{
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
.service-details-box .accordion-button:not(.collapsed){
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
}
.service-pagination {
    display: flex;
    justify-content: space-between;
}
.service-pagination-box {
    width: 45%;
}
.service-pagination-box.next {
    text-align: end;
}
.service-pagination-box a {
    display: flex;
    align-items: center;
    column-gap: 6px;
    margin-bottom: 10px;
    color: var(--solarup-primary);
}
.service-pagination-box.next a{
    justify-content: end;
}
/***********************
* team details page
***********************/
.team-section {
    padding: 140px 0;
}
.team-details-section {
    padding: 140px 0;
}
.team-block {
    margin-bottom: 30px;
}
.team-block h4{
    font-size: 26px;
    line-height: 33px;
    margin-bottom: 0;
}
.team-block>p{
    margin-bottom: 23px;
    font-size: 18px;
}
.team-block ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.team-block ul li{
    padding: 25px 0;
    border-bottom: 1px solid #D8D8D8;
    display: flex;
    align-items: center;
    column-gap: 13px;
}
.team-block ul li p, .team-block ul li a{
    margin-bottom: 0;
    color: var(--solarup-primary);
}
.team-block ul li i{
    font-size: 28px;
}
.team-block ul li:first-child{
    border-top: 1px solid #D8D8D8;
}
ul.team-social-media-two {
    margin-top: 25px;
    display: flex;
    align-items: center;
    column-gap: 10px;
}
ul.team-social-media-two li{
    border: none;
    padding: 0;
}
ul.team-social-media-two li a{
    height: 43px;
    width: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #777D96;
    color: var(--solarup-primary);
}
ul.team-social-media-two li a:hover{
    background-color: var(--solarup-primary);
    color: var(--solarup-secondary);
}
ul.team-social-media-two li a i{
    font-size: 20px;
}
.team-details-list {
    margin-bottom: 30px;
}
.team-details-list h2, .team-details-list p,.team-details-list h4{
    margin-bottom: 20px;
}
.team-educational-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    row-gap: 78px;
    position: relative;
}
.team-educational-list::after{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background-color: #D8D8D8;
}
.team-educational-list::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: #D8D8D8;
}
.team-educational-box {
    width: 42%;
    display: flex;
    column-gap: 30px;
}
.team-educational-box span {
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--solarup-primary);
    color: var(--solarup-light);
    flex-shrink: 0;
    font-size: 32px;
}
.educational-title p{
    margin-bottom: 0;
}
.team-skill {
    margin-top: 30px;
    width: 70%;
}
.team-skill-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.team-skill-title p:last-child{
    margin-right: 30px;
}
.team-skill-box {
    margin-bottom: 30px;
}
.team-skill-title p {
    margin-bottom: 8px;
    color: var(--solarup-primary);
}
.skill-processing {
    width: 100%;
    height: 15px;
    background-color: #D8D8D8;
    border-radius: 62px;
}
.skill-processing span {
    height: 15px;
    display: flex;
    background-color: var(--solarup-secondary);
    width: 0%;
    transition: width 1.5s ease;
    border-radius: 62px;
}
.team-award {
    display: flex;
    align-items: center;
    column-gap: 80px;
    margin-top: 30px;
}
.team-award-box {
    width: 140px;
    text-align: center;
}
.team-award-box img{
    margin-bottom: 15px;
}
.team-award-box p{
    color: var(--solarup-primary);
}
/***********************
* career page
***********************/
.career-section {
    padding: 140px 0;
}
.job-box {
    padding: 50px;
    border: 1px solid #D8D8D8;
    transition: all 0.5s;
    height: 100%;
}
span.post-name {
    padding: 10px 26px;
    font-size: 14px;
    background-color: #1418270A;
}
.job-box-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
    flex-wrap: wrap;
    row-gap: 10px;
}
.job-box-heading h4{
    margin-bottom: 0;
    font-size: 26px;
}
.job-box p{
    margin-bottom: 40px;
}
.job-lower {
    display: flex;
    justify-content: space-between;
    column-gap: 30px;
    flex-wrap: wrap;
    row-gap: 20px;
    align-items: flex-start;
}
ul.job-location {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    column-gap: 30px;
    flex-wrap: wrap;
    row-gap: 20px;
}
ul.job-location li{
    display: flex;
    align-items: center;
    column-gap: 7px;
}
ul.job-location li p{
    margin-bottom: 0;
}
.job-box:hover{
    background-color: #F0F0F0;
}
.job-box:hover .btn-light{
    color: var(--solarup-primary);
}
.job-box:hover .btn-light::after{
    background-color: var(--solarup-secondary);
    top: -160%;
    left: -9%;
}
/***********************
* contact page
***********************/
.contactus-section {
    padding: 140px 0;
}
.contact-info {
    padding-right: 100px;
}
.contact-info ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.contact-info ul li {
    margin-bottom: 20px;
    display: flex;
    column-gap: 22px;
}
.contact-info ul li i{
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--solarup-secondary);
}
.contact-info ul li p{
    margin-bottom: 0;
}
.contact-info ul li p span, .contact-info ul li p a{
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--solarup-primary);
    font-family: var(--solarup-heading-font);
}
.contact-info ul li p span:first-child{
    color:#9D9D9D ;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    display: block;
}
.contact-form .btn-primary::after{
    background-color: var(--solarup-primary);
}
.contact-form .btn-primary:hover{
    color: var(--solarup-light);
}
.location-section {
    padding: 140px 0;
    overflow: hidden;
}
.contact-box {
    position: relative;
}
.contact-box-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.contact-details {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: calc(100% - 60px);
    background-color: var(--solarup-light);
    padding: 30px;
    padding-right: 80px;
    padding-bottom: 45px;
}
.contact-details h4{
    font-size: 26px;
    margin-bottom: 20px;
}
.contact-details p{
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--solarup-primary);
}
.contact-details a{
    font-size: 18px;
    color: var(--solarup-primary);
}
.contact-details .portfolio-btn{
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 24px;
}
.prgoress_indicator {
    position: fixed;
    bottom: 50px;
    right: 50px;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d5efd2;
    opacity: 0;
    z-index: 99999;
    transition: all 0.5s;
    cursor: pointer;
}
.prgoress_indicator.active-progress{
    opacity: 1;
}
.prgoress_indicator img{
    animation: roted 10s infinite linear;
}
.service-sidebar , .protfolio-details-sidebar, .blog-sidebar.stcky, .shop-sidebar{
    position: sticky;
    top: 50px;
}
.process-image-two {
    position: relative;
}
.process-image-two .turbainter-1 {
    position: absolute;
    top: -61px;
    left: 156px;
    animation: roted 25s infinite linear;
}
img.turbainter-2 {
    position: absolute;
    top: 48px;
    left: -8px;
    animation: roted 25s infinite linear;
}
img.turbainter-3 {
    position: absolute;
    top: 179px;
    right: -2px;
    animation: roted 25s infinite linear;
}
span.symbol {
    margin-bottom: 5px;
    display: inline-block;
}
.banner-social-media-two ul li a:hover{
    color: var(--solarup-secondary);
}
.product-details-image {
    margin-right: 40px;
}
.svg-box svg path {
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;
    animation: draw 3s forwards ease-in-out;
}
input:-webkit-autofill {
    -webkit-background-clip: border-box;
}
.footer-contact-inner li a, .footer-link-inner li a, .footer-copyrights-inner a{
    position: relative;
    transition: all 0.5s;
}
.footer-contact-inner li a:hover, .footer-link-inner li a:hover, .footer-copyrights-inner a:hover{
    color: var(--solarup-secondary);
}
.footer-contact-inner li a::after, .footer-link-inner li a::after, .footer-copyrights-inner a::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--solarup-secondary);
    transition: all 0.5s;
}
.footer-contact-inner li a:hover::after, .footer-link-inner li a:hover::after, .footer-copyrights-inner a:hover::after{
    width: 100%;
}
.header-two .main-menu {
    margin-right: 80px;
    position: relative;
}
.header-two .main-menu::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 92px;
    height: 100%;
    background-color: #141827;
}
.footer-two ul.footer-contact-inner li a:hover, .footer-two ul.footer-link-inner li a:hover, .footer-two .footer-copyrights-inner p a:hover, .footer-three ul.footer-contact-inner li a:hover, .footer-three ul.footer-link-inner li a:hover{
    color: var(--solarup-secondary);
}
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed, .accordion-item:last-of-type{
    border-radius: 0;
}
.map-section iframe {
    width: 100%;
    height: 380px;
}