/*===============================================
Template Name: Solar Panel-HTML5 Template
Author:  https://themeforest.net/user/website stock
Description: Description
Version: 1.0.0
Text Domain: Solar Panel 
Tags: alternative energy, company, eco, eco-friendly, ecology, environment, nature, recycling, renewable energy, solar energy, solar power, corporate, business, technology, software, company.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Solar Panel  Header Top Menu Area Css
02. Solar Panel  Nav Menu Area Css 
03. Solar Panel  Slider Area Css
04. Solar Panel  Section Title Css
05. Solar Panel  Service Area css
06. Solar Panel  About Area Css
07. Solar Panel  Counter Area Css
08. Solar Panel  Testimonial Area Css
09. Solar Panel  Process Area Css
10. Solar Panel  Team Area Css
11. Solar Panel  Faq Area Css
12. Solar Panel  Call Do Section Css
13. Solar Panel  Form Box Css
14. Solar Panel  Blog Area Css
15. Solar Panel  footer Area Css
16. Solar Panel  Subscribe Area Css
17. Solar Panel  Prossess Ber Css
18. Solar Panel  Scrollup Section
19. Solar Panel  Breadcumb Area Css
20. Solar Panel  abouts_areas Css
21. Solar Panel  Pricing Section Css
22. Solar Panel  Contact  US Css
23. Solar Panel  Blog Sidber Widget CSS
24. Solar Panel  Search Box Css
25. Solar Panel  Loader Css
=======================*/

/*==================================================
 <-- Solar Panel  Header Top Menu Area Css-->
===================================================*/

.solar-topbar-section {
    padding: 5px 0;
    background: #19142d;
}

.solar-top-menu ul {
    list-style: none;
}

.solar-top-menu ul li {
    display: inline-block;
    margin-right: 36px;
    position: relative;
}

.solar-top-menu ul li a:hover {
    color: rgb(176, 176, 176);
}

.solar-top-menu ul li a::after {
    position: absolute;
    content: "";
    height: 30px;
    width: 2px;
    background: #3a3a42;
    left: -22px;
    top: -2px;
    opacity: 0.702;
}

.solar-top-menu ul li.line a::after {
    display: none;
}

.solar-top-menu ul li a {
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
}


.solar-top-menu ul li a i {
    color: #e63a27;
    font-size: 15px;
    margin-right: 7px;
}

.solar-top-content-menu {
    text-align: right;
}

.solar-top-content {
    display: inline-block;
    margin-right: 25px;
    position: relative;
}

.solar-top-content select#Language {
    background: no-repeat;
    border: none;
    font-size: 17px;
    color: #ffffff;
    font-weight: 400;
    outline: 0;
}

.solar-top-content::before {
    position: absolute;
    content: "";
    height: 30px;
    width: 2px;
    opacity: 0.702;
    background: #3a3a42;
    right: -22px;
}

.solar-top-content option {
    background: #19142d;
    font-size: 16px;
}

.solar-top-social-icon {
    display: inline-block;
}

.solar-top-social-icon ul li {
    display: inline-block;
    margin-left: 13px;
}

.solar-top-social-icon ul li a i {
    color: #ffffff;
    font-size: 15px;
    transition: .5s;
}

.solar-top-social-icon ul li a:hover i {
    color: #e63a27;
}


/*==================================================
 <-- Header  Menu Area Css-->
===================================================*/


/* Hamburger Button Box */
.navbar-toggler {
    padding: 5px 8px !important;
    border: 2px solid #333 !important;
    /* black border */
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* Remove focus highlight */
.navbar-toggler:focus {
    box-shadow: none !important;
}

/* Hamburger Icon */
.navbar-toggler-icon {
    width: 20px !important;
    height: 20px !important;
    background-size: 20px !important;
}

/* If using FontAwesome/X-icon inside */
.navbar-toggler i {
    font-size: 20px !important;
    color: #000 !important;
}


/* OPEN STATE (X icon) same size */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    width: 20px !important;
    height: 20px !important;
}


.solar-header-section {
    background: #e3e3e3;
    position: relative;
    z-index: 999;

}


.logo img {
    height: 70px;
}


.solar-menu {
    text-align: right;
}

.solar-menu ul {
    list-style: none;
}

.solar-menu ul li {
    display: inline-block;
    margin-right: 28px;
}

.solar-menu ul li a {
    display: inline-block;
    color: #141422;
    font-size: 17px;
    font-weight: 500;
    padding: 38px 0;
    text-decoration: none;
    transition: .5s;
}

.solar-menu ul li a:hover {
    color: #e63a27;
}

.solar-menu ul li a i {
    font-size: 12px;
    margin-left: 4px;
}

.solar-search-button {
    text-align: right;
}

.solar-social-menu {
    display: inline-block;
}

.solar-social-menu ul li {
    display: inline-block;
    margin-left: 10px;
}

.solar-social-menu ul li a i {
    color: #141422;
    font-size: 21px;
}

a.handbag {
    position: relative;
}

a.handbag:before {
    position: absolute;
    content: "0";
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    background: #e63a27;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 100%;
    left: 11px;
    top: -8px;
}

/* sticky css */

.sticky-nav {
    left: 0;
    margin: auto;
    top: 0;
    width: 100%;
    position: fixed !important;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    transition: 0.5s !important;
    background: #e3e3e3 !important;
    z-index: 9999 !important;
    animation-name: slideInDown;
    padding: 0 30px;
}

/* ----------------------------------------------------
   SUB MENU
---------------------------------------------------- */
/* sub menu area css */

.solar-menu ul li .sub-menu:not(.two) {
    position: absolute;
    width: 240px;
    left: auto;
    top: 125%;
    padding: 0;
    border-radius: 5px;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    z-index: 11;
}

.solar-menu ul li:hover>.sub-menu:not(.two) {
    visibility: visible;
    opacity: 1;
    top: 100%;
}

/* =========================================
   SERVICES MEGA MENU ONLY
========================================= */
.solar-menu ul li .sub-menu.two {
    position: fixed;
    left: 0;
    top: auto;
    width: 100%;
    margin: auto;
    background: #fff;
    border-radius: 0;
    border-top: 2px solid #e63a27;
    visibility: hidden;
    opacity: 0;
    transition: 0.4s;
    z-index: 9999;
}

/* show mega menu */
.solar-menu ul li:hover>.sub-menu.two {
    visibility: visible;
    opacity: 1;
}

/* ===============================
   MEGA MENU – TABLE STYLE LIST
================================ */

/* parent flex equal height */
.nested-service {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: stretch;
    /* equal column height */
}

/* each column */
.nested-service ul {
    width: 33.333%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

/* list item base */
.nested-service ul li {
    display: flex;
    min-height: 65px;
}

/* link full cell */
.nested-service ul li .service-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    font-size: 15px;
    color: #202020;
    line-height: 1.4;
    transition: 0.3s;
}
/* zebra pattern (table style) */
.nested-service ul li:nth-child(odd) {
    background: #ffffff;
}

.nested-service ul li:nth-child(even) {
    /* background: #f2f2f2; */
    /* background: rgb(236, 243, 255);*/
    background-color: rgb(251, 232, 232);
}

/* hover effect */
.nested-service ul li:hover .service-link {
    color: #ffffff;
}
/* vertical separator line */
.nested-service ul:not(:last-child) {
    border-right: 1px solid #d3d3d3;
}

.nested-service ul li:hover {
    background: #e63a27;
    color: white;
}

.nested-service ul li:hover>.service-link {
    color: #ffffff;
}

.nested-service ul:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #d3d3d3;
    /* grey line */
}

@media (min-width: 2000px) {
    .solar-menu ul li .sub-menu.two {
        position: fixed;
        top: auto;
        left: 50%;
        /* center from screen */
        transform: translateX(-50%);
        /* shift half width */
        width: 65%;
        background: #fff;
        border-radius: 0;
        border-top: 2px solid #e63a27;
        visibility: hidden;
        opacity: 0;
        transition: 0.4s;
        z-index: 9999;
    }
}

.solar-menu ul .sub-menu {
    background: #fff;
    position: absolute;
    top: 125%;
    border-radius: 5px;
    width: 217px;
    text-align: left;
    margin: 0;
    -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #e63a27;
    opacity: 0;
    z-index: 11;
}

.solar-menu ul .sub-menu ul li {
    display: inline-block;
    margin-left: 0;
    width: 100%;
}

.solar-menu ul .sub-menu ul li a {
    padding: 12px 20px;
    text-align: left;
    width: 100%;
    display: inline-block;
    visibility: inherit !important;
    color: #202020;
    margin: 0;

}

.solar-menu ul .sub-menu ul li a:hover {
    background: #e63a27 !important;
    color: #fff;
}
/* FORCE capitalize for ALL service submenu links */
.solar-menu ul .sub-menu ul li a,
.solar-menu ul .sub-menu ul li a.service-link {
    text-transform: capitalize !important;
}




/* header style two */

.solar-header-section.style-two {
    background: #fff;
}

.solar-header-section.style-two::before {
    display: none;
}

/* logo style two */

.logo.style-two::before {
    display: none;
}

.logo.style-two::after {
    display: none;
}


/* sola btn */

.solar-btn {
    display: inline-block;
    margin-left: 32px;
}

.solar-btn a {
    display: inline-block;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1px;
    background: #e63a27;
    color: #fff;
    padding: 13px 25px;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

.solar-btn a::before {
    position: absolute;
    content: "";
    background-color: #19142d;
    width: 100%;
    height: 0%;
    left: 50%;
    top: 50%;
    border-radius: 3px;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: -1;
    transition: all 500ms ease;
}

.solar-btn a:hover::before {
    height: 104%;
}

/* slider btn */

.solar-btn.slider1 {
    margin: 0;
}

.solar-btn.slider2 {
    margin-left: 14px;
}

.solar-btn.slider2 a {
    background: #fff;
    color: #0f0f0f;
}

.solar-btn.slider2 a:hover {
    color: #ffffff;
}

/* about btn */

.solar-btn.about {
    margin: 0;
}

.solar-btn.about a {
    padding: 16px 33px;
}

/* about style two btn */

.solar-btn.about.about2 {
    margin-top: 50px;
}

/* contact us btn */

.solar-btn.contact-us a {
    background: #fff;
    color: #1c1632;
}

.solar-btn.contact-us a:hover {
    color: #ffffff;
}

/* choose btn */

.solar-btn.choose {
    margin: 0;
}

.solar-btn.choose a {
    padding: 16px 30px;
}

/* protfolio btn */

.solar-btn.protfolio {
    text-align: right;
    display: inherit;
    margin-left: 0;
    margin-top: -33px;
}

.solar-btn.protfolio a {
    padding: 14px 20px;
}

.solar-btn.protfolio a:hover {
    color: #e63a27;
}

.solar-btn.protfolio a::before {
    background: #ffffff;
}

/* call back section btn */

.solar-btn.call-back a::before {
    background: #ffff;
}

.solar-btn.call-back a:hover {
    color: #e63a27;
}

/* ----------------------------------------------------
   HEADER MAIN
---------------------------------------------------- */
.solar-header-section {
    background: #e3e3e3;
    position: relative;
    z-index: 999;
    border-bottom: 1px solid #ddd;
    padding: 0;
}



/* ----------------------------------------------------
   MAIN NAVBAR
---------------------------------------------------- */
.solar-menu {
    text-align: right;
}

.solar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.solar-menu ul li {
    display: inline-block;
    margin-right: 25px;
    position: relative;
}

.solar-menu ul li a {
    display: inline-block;
    color: #141422;
    font-size: 16px;
    font-weight: 500;
    padding: 24px 0;
    /* ↓ reduced height here */
    text-decoration: none;
    transition: 0.3s;
}

.solar-menu ul li a:hover {
    color: #e63a27;
    /* text red on hover */
}

.solar-menu ul li a i {
    font-size: 12px;
    margin-left: 4px;
}

/* ----------------------------------------------------
   STICKY NAV
---------------------------------------------------- */
.sticky-nav {
    position: fixed !important;
    top: 0;
    width: 100%;
    background: #e3e3e3 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 9999 !important;
}

.sticky-nav .solar-menu ul li a {
    padding: 20px 0;
    /* reduced in sticky also */
}




/*==================================================
 <-- Solar Panel  Slider Section Css-->
===================================================*/

.slider-section {
    background: url(../images/slider/heroslide1.webp);
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.slider-section.style-three {
    background: url(../images/slider/heroslide4.webp);

}

.slider-content h4 {
    font-size: 24px;
    line-height: 24px;
    color: #fefefe;
    font-weight: 500;
    margin-bottom: 28px;
}

.slider-content h1 {
    font-size: 45px;
    line-height: 40px;
    color: #ffffff;
    font-weight: 600;
    padding-bottom: 15px;
}

.slider-content p {
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    width: 53%;

}


/* owl nav css */

.slider-section .owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
    display: block;
}

.owl-nav {
    position: absolute;
    bottom: 42%;
    right: 60px;
}

.owl-prev i {
    width: 62px;
    height: 62px;
    line-height: 62px;
    background: #e63a27;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    color: #ffffff;
    font-size: 24px;
    transition: .5s;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.owl-prev i:hover {
    color: #e63a27;
}

.owl-prev i::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    right: 0;
    bottom: 0;
    background: #ffffff;
    transform: scale(0);
    border-radius: 50%;
    z-index: -1;
    transition: .5s;
}

.owl-prev i:hover::after {
    transform: scale(1);
}

.owl-next i {
    width: 62px;
    height: 62px;
    line-height: 62px;
    background: #ffffff;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    color: #e63a27;
    font-size: 24px;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.owl-next i:hover {
    color: #ffffff;
}

.owl-next i::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    right: 0;
    bottom: 0;
    background: #e63a27;
    transform: scale(0);
    border-radius: 50%;
    z-index: -1;
    transition: .5s;
}

.owl-next i:hover::after {
    transform: scale(1);
}


/* slider style two */

.slider-section.style-two {
    background: url(../images/slider/heroslide3.avif);
}

.slider-section.style-two.three {
    background: url(../images/slider/heroslide4.webp);
}

.slider-content.style-two {
    background: #ffffff;
    padding: 47px 60px 64px;
    border-radius: 0px 0px 155px 0px;
}

.slider-content.style-two h4 {
    color: #1c1632;
    margin-bottom: 16px;
}

.slider-content.style-two h1 {
    color: #1c1632;
    font-size: 60px;
    line-height: 68px;
    margin-bottom: 54px;
}

/*==================================================
 <-- Solar Panel  About Section Css-->
===================================================*/
.journey-section {
    background-color: rgba(235, 235, 235, 0.537);
}

.about-section {
    padding: 120px 0 177px;
}

.about-thumb {
    position: relative;
}

.about-thumb img {
    width: 100%;
}

.about-counter {
    position: absolute;
    background: #e63a27;
    width: 180px;
    height: 158px;
    border-radius: 3px;
    text-align: center;
    top: 0;
    right: 0;
}

.about-counter-text {
    position: relative;
    padding: 28px 0 0;
}

.about-counter-text::before {
    position: absolute;
    content: "";
    width: 171px;
    height: 150px;
    border: 1px dashed #fff;
    left: 4px;
    right: 0;
    bottom: 0;
    top: 4px;
}

.about-numbar h4 {
    font-size: 40px;
    color: #ffffff;
    font-weight: 600;
    display: inline-block;
}

.about-numbar span {
    font-size: 40px;
    color: #ffffff;
    font-weight: 600;
}

.about-text h5 {
    font-size: 18px;
    color: #ffffff;
    font-weight: 600;
    margin: 5px;
}

/* about counter two */

.about-counter-two {
    position: absolute;
    margin-top: -68px;
    left: 17%;
    color: #fff;
    background-color: #fff;
    padding: 0px 25px 11px;
    border: 2px solid #f00;
    border-radius: 3px;
    width: 250px;
    height: 125px;
}

.about-counter-img {
    margin-right: 34px;
    margin-top: 9px;
}

.about-number-two h4 {
    display: inline-block;
    font-size: 36px;
    color: #e63a27;
    font-weight: 500;
    margin-bottom: 9px;
}

.about-number-two span {
    font-size: 36px;
    color: #e63a27;
    font-weight: 500;
}

.about-number-two h5 {
    font-size: 18px;
    color: #434141;
    font-weight: 500;
    margin: 0;
}


/* about section title */

.about-section-sub-title {
    position: relative;
    display: inline-block;
    padding: 0 50px 0;
    margin: 0 -50px 0;
}

.about-section-sub-title::before {
    position: absolute;
    content: "";
    height: 2px;
    width: 35px;
    background: #e63a27;
    top: 6px;
    right: 0;
}

.about-section-sub-title::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 35px;
    background: #e63a27;
    top: 15px;
    right: -12px;
}

.about-section-sub-title h4 {
    font-size: 24px;
    line-height: 24px;
    color: #e63a27;
    font-weight: 500;
    margin: 0;
}

.about-section-main-title h2 {
    font-size: 35px;
    color: #1c1632;
    font-weight: 600;
    margin-bottom: 23px;
}

.about-content-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #434141;
    font-weight: 400;

}

.about-list {
    margin-bottom: 20px;

}

.about-list ul li {
    font-size: 18px;
    color: #1c1632;
    font-weight: 500;
    margin-bottom: 17px;
}

.about-list ul li i {
    color: #e63a27;
    margin-right: 7px;
}



/* about tab css */

.tab ul {
    list-style: none;
}

.tab ul li {
    display: inline-block;
    margin-right: 18px;
}

.tab ul li a {
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    background: #1c1632;
    padding: 6px 15px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.tab ul li.current a {
    background: #e63a27 !important;
}



/* about style two */

.about-video-icon {
    position: absolute;
    right: 95px;
    bottom: 16%;
    margin: auto;
    border-radius: 100%;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
    -webkit-transition: .5s;
}

.about-video-icon a {
    height: 65px;
    width: 65px;
    background: #e63a27;
    display: inline-block;
    line-height: 65px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
}

.about-counter-two.style-two {
    width: 446px;
    height: 119px;
    border-radius: 3px;
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.1));
    background-color: #ffffff;
    border: navajowhite;
    padding: 17px 33px 0;
    left: 30px;
    bottom: -22px;
}

.about-number-two.style-two {
    float: left;
    margin-right: 26px;
    position: relative;
}

.about-number-two.style-two::before {
    border-radius: 50%;
    position: absolute;
    content: "";
    height: 85px;
    width: 85px;
    border: 2px dotted #ffaa19;
    left: -10px;
    right: 0;
    margin: auto;
}

.about-number-two.style-two h4 {
    height: 65px;
    width: 65px;
    background: #e63a27;
    color: #fff;
    line-height: 65px;
    font-size: 30px;
    text-align: center;
    border-radius: 50%;
}

.about-counter-content h5 {
    font-size: 24px;
    line-height: 34px;
    color: #1c1632;
    font-weight: 500;
}


/* about progress bar  */


.about-section.span.process-bar {
    font-size: 18px;
}

/* about section style two */

.about-section.style-two {
    padding: 122px 0 131px;
}

/* about section style three */

.about-section.style-three {
    padding: 120px 0 177px;
}

/*==================================================
 <-- Solar Panel  Section title Css-->
===================================================*/

.section-sub-title {
    position: relative;
    display: inline-block;
}

.section-sub-title::before {
    position: absolute;
    content: "";
    height: 2px;
    width: 35px;
    background: #e63a27;
    left: 0;
    top: 19px;
}

.section-sub-title::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 35px;
    background: #e63a27;
    left: -12px;
    top: 28px;
}

.section-sub-title h4 {
    font-size: 24px;
    color: #e63a27;
    font-weight: 500;
    margin-bottom: 7px;
    position: relative;
    padding: 0 50px 0;
}

.section-sub-title h4::before {
    position: absolute;
    content: "";
    height: 2px;
    width: 35px;
    background: #e63a27;
    right: 0;
    top: 9px;
}

.section-sub-title h4::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 35px;
    background: #e63a27;
    right: -12px;
    top: 17px;
}

.section-main-title h2 {
    font-size: 48px;
    color: #1c1632;
    font-weight: 600;
    margin-bottom: 42px;
}


/* contact us section title */

.section-main-title.contact-us h2 {
    color: #ffff;
    margin-bottom: 17px;
}

/* pricing section title */

.section-sub-title.pricing::before {
    display: none;
}

.section-sub-title.pricing::after {
    display: none;
}

.section-main-title.pricing {
    margin-bottom: 42px;
}

.section-sub-title.pricing h4 {
    padding-left: 0;
}

.section-main-title.pricing h2 {
    margin-bottom: 0;
    line-height: 48px;
}

/* choose us section title */

.section-sub-title.choose::before {
    display: none;
}

.section-sub-title.choose::after {
    display: none;
}

.section-sub-title.choose h4 {
    padding-left: 0;
}

.section-main-title.choose h2 {
    margin-bottom: 22px;
}

/* protfolio section title */

.section-sub-title.protfolio::before {
    display: none;
}

.section-sub-title.protfolio::after {
    display: none;
}

.section-sub-title.protfolio h4 {
    padding-left: 0;
}

.section-main-title.protfolio h2 {
    color: #ffffff;
}


/* offer section title */

.section-sub-title.offer::before {
    display: none;
}

.section-sub-title.offer::after {
    display: none;
}

.section-sub-title.offer h4 {
    padding-left: 0;
}

.section-main-title.offer {
    margin-bottom: 39px;
}

.section-main-title.offer h2 {
    margin-bottom: 0;
    line-height: 49px;
}

/* blog-section title */

.section-main-title.blog h2 {
    margin-bottom: 103px;
}

/* subscribe section title */

.section-main-title.Subscribe h2 {
    line-height: 28px;
    color: #fff;
}

/* faq section title */

.section-sub-title.faq::before {
    display: none;
}

.section-sub-title.faq::after {
    display: none;
}

.section-sub-title.faq h4 {
    margin-bottom: 0px;
    padding-left: 0;
}

.section-sub-title.faq h4::before {
    display: none;
}

.section-sub-title.faq h4::after {
    display: none;
}

.section-main-title.faq h2 {
    font-size: 40px;
    margin-bottom: 16px;
}


/*==================================================
 <-- Solar Panel  Service Section Css-->
===================================================*/
.view-service-home {
    padding: 10px;
    background-color: rgb(0, 0, 92);
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    border-radius: 6px;
}

.view-service-home a {
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    display: inline-block;
    font-weight: 500;
    font-size: 20px;
}

.view-service-home:hover {
    background-color: #e63a27;
}

.service-section {
    padding: 106px 0 110px;
    background: #f2f2f2;
}

.service-thumb img {
    width: 100%;

}


.servicesimg {
    width: 100%;
    height: 240px;
}

.service-content {
    background: url(../images/red.jpg);
    background-repeat: no-repeat;
    height: 430px;
    padding: 0 34px 20px;
    position: relative;
    z-index: 1;
    margin: -130px 23px 33px;
}

.service-content::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 0%;
    background: url(../images/blue.avif);
    background-repeat: no-repeat;
    left: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    transform-style: preserve-3d;
    transform: perspective(370px) rotateY(90deg) translate(0px, 50px);
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    z-index: -1;
}

.service-box:hover .service-content::before {
    opacity: 1;
    visibility: visible;
    transform: perspective(370px) rotateY(0deg) translate(0px, 0px);
    height: 100%;
}

.service-icon-thumb {
    background: #ffffff;
    width: 90px;
    height: 100px;
    line-height: 88px;
    text-align: center;
    border-radius: 0px 0px 45px 45px;
    margin-bottom: 30px;
    transition: .5s;
}

.service-box:hover .service-icon-thumb {
    background: #e63a27;


}

.service-icon-thumb img {
    width: auto;
    height: 60px;

    transition: .5s;
}

.service-box:hover .service-icon-thumb img {
    filter: brightness(0)invert(1);
}

.service-text a {
    text-decoration: none !important;
}

.service-text h4 {
    line-height: 1.2;
    color: #e2e2e2;
    font-weight: 500;
}

.service-text h4 a {
     line-height: 1.2;
    font-size: 26px;
    font-weight: 500;
}

.service-box:hover .service-text h4 {
    color: #e63a27;
}

.service-text p {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    margin: 20px 0 45px;
    position: relative;
}

.service-text p::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 310px;
    background: #e8e8e8;
    bottom: -28px;
    opacity: 0.600;
}

.service-text a {
    display: inline-block;
    font-size: 18px;
    line-height: 24px;
    text-decoration: underline;
    color: #ffffff;
    font-weight: 400;
    transition: .5s;
}

.service-box:hover .service-text a {
    color: #e63a27;
}

.service-text a i {
    font-size: 12px;
    margin-left: 8px;
}

/* service box style two */

.service-box {
    margin-bottom: -24px;
    
}





/*==================================================
 <-- Solar Panel  Contact Us Section Css-->
===================================================*/


/* MAIN SECTION */
.contact-home-section {
    padding: 30px;
    background: #f2f2f2;
}

/* Wrapper behaves like row with spacing */
.contact-home-section1 {
    margin-top: 20px;
    display: flex;
    align-items: stretch;
}

.contact-info-box {
    padding: 35px 40px;
    border-radius: 8px;
}

/* BOXES SAME HEIGHT */
.contact-form-box {
    background: #fff;
    padding: 35px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    height: 100%;
}

/* HEADINGS */
.contact-form-box h3,
.contact-info-box h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #1c1632;
}

/* BUTTON */
.btn-contact {
    background: #e63a27;
    color: #fff;
    padding: 12px 25px;
    border-radius: 4px;
    border: none;
    font-size: 16px;
}

.btn-contact:hover {
    background: #b52415;
    color: #fff;
}

/* INFO ITEMS */
.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
}

.info-item i {
    font-size: 28px;
    background: #e63a27;
    color: #fff;
    padding: 12px;
    border-radius: 50%;
    margin-right: 15px;
}

.info-item h5 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.info-item a {
    margin: 0;
    font-size: 18px;
    color: #555;
    text-decoration: none;
}

.info-item a:hover {
    color: #e63a27;
}

/* SUBTITLE STYLE */
.contact-sub-title {
    position: relative;
    display: inline-block;
}

.contact-sub-title h4 {
    font-size: 24px;
    color: #e63a27;
    font-weight: 500;
    position: relative;
    padding: 0 50px;
}

/* LEFT LINES */
.contact-sub-title::before {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    background: #e63a27;
    left: 0;
    top: 19px;
}

.contact-sub-title::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    background: #e63a27;
    left: -12px;
    top: 28px;
}

/* RIGHT LINES */
.contact-sub-title h4::before {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    background: #e63a27;
    right: 0;
    top: 9px;
}

.contact-sub-title h4::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    background: #e63a27;
    right: -12px;
    top: 17px;
}

/* MOBILE FIXES */
@media (max-width: 992px) {
    .contact-home-section1 {
        flex-direction: column;
        gap: 20px;
    }
}

.contact-map {
    width: 100%;
    height: 450px;
    /* desktop height */
    position: relative;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/*==================================================
 <-- Solar Panel  Pricing Section Css-->
===================================================*/

.pricing-section {
    padding: 138px 0 92px;
}

/* accrodion css */

.accordion li {
    list-style: none;
    position: relative;
    z-index: 1;
    background: #f3f3f3;
    margin-bottom: 27px;
    border-radius: 3px;
}

.accordion li a {
    display: block;
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    color: inherit;
    padding: 11px 35px 11px;
    text-decoration: none;
    margin-bottom: 11px;
}

.accordion a.active {
    background: #e63a27;
    color: #fff;
}

.accordion li p {
    display: none;
    font-size: 16px;
    line-height: 26px;
    color: #434141;
    padding: 0 38px 17px;
    margin: 0;
    width: 91%;
}

.accordion a:before {
    width: 2px;
    height: 16px;
    background: #e63a27;
    position: absolute;
    right: 37px;
    content: " ";
    top: 18px;
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}

.accordion a:after {
    width: 16px;
    height: 2px;
    background: #e63a27;
    position: absolute;
    right: 30px;
    content: " ";
    top: 25px;
    transition: all 0.2s ease-in-out;
}

.accordion a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: #ffffff;
}

.accordion a.active:before {
    display: none;
}

a.active {
    color: #1c1632;
}

/* pricing box */

.pricing-box {
    background: #f3f3f3;
    padding: 34px 45px 30px;
    position: relative;
    border-radius: 3px;
    z-index: 1;
    margin-bottom: 55px;
}

.pricing-box::before {
    position: absolute;
    content: "";
    height: 0%;
    width: 100%;
    background: #e63a27;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    border-radius: 3px;
    z-index: -1;
    transition: all 500ms ease;
}

.pricing-box:hover::before {
    height: 104%;
}

.pricing-info {
    display: flex;
    justify-content: space-between;
    margin: 0 8px 0px 67px;
}

.pricing-year h4 {
    font-size: 16px;
    color: #e63a27;
    font-weight: 400;
    border: 1px solid rgba(230, 58, 39, 0.251);
    padding: 6px 16px;
    border-radius: 3px;
    transition: .5s;
}

.pricing-box:hover .pricing-year h4 {
    background: #ffffff;
}

.pricing-rate h2 {
    font-size: 30px;
    color: #1c1632;
    font-weight: 500;
    line-height: 24px;
    transition: .5s;
}

.pricing-box:hover .pricing-rate h2 {
    color: #ffffff;
}

.pricing-rate h2 span {
    font-size: 16px;
}

.pricing-icon {
    float: left;
    margin-top: 27px;
    margin-right: 28px;
}

.pricing-icon i {
    background: #1c1632;
    height: 38px;
    width: 38px;
    display: inline-block;
    line-height: 38px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    border-radius: 2px;
    transition: .5s;
}

.pricing-box:hover .pricing-icon i {
    background: #ffffff;
    color: #e63a27;
}

.pricing-content {
    overflow: hidden;
}

.pricing-content h4 {
    font-size: 30px;
    line-height: 55px;
    color: #1c1632;
    font-weight: 500;
    transition: .5s;
}

.pricing-box:hover .pricing-content h4 {
    color: #ffffff;
}

.pricing-content p {
    font-size: 16px;
    line-height: 24px;
    color: #434141;
    font-weight: 400;
    transition: .5s;
}

.pricing-box:hover .pricing-content p {
    color: #ffffff;
}

.pricing-value {
    position: absolute;
    top: -27px;
    right: 65px;
}

.pricing-value h5 {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    background: #1c1632;
    display: inline-block;
    padding: 5px 13px;
    border-radius: 3px;
    transition: .5s;
}

.pricing-box:hover .pricing-value h5 {
    background: #f3f3f3;
    color: #e63a27;
}


/*==================================================
 <-- Solar Panel  Call Do Section Css-->
===================================================*/

.call-do-action-section {
    padding: 120px 0 120px;
    background: url(../images/resource/call-do-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 800px;
    margin-bottom: -330px;
}

.single-video {
    position: relative;
    top: 64px;
}

.video-icon a {
    height: 105px;
    width: 105px;
    background: #e63a27;
    text-align: center;
    display: inline-block;
    line-height: 105px;
    border-radius: 100%;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
    -webkit-transition: .5s;
}

.video-icon a i {
    color: #ffffff;
    font-size: 76px;
}

/* call do action style two */

.call-do-action-section.style-two {
    background: url(../images/resource/call-do-bg2.jpg);
}


/*==================================================
 <-- Solar Panel  Choose Us Section Css-->
===================================================*/
.choose-us-section {
    padding: 0 0 122px;
}

.row.choose {
    background: url(../images/resource/choose-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 90px 70px 91px;
    border-radius: 3px;
}

.choose-us-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #434141;
    font-weight: 400;
    margin-bottom: 65px;
}

.choose-us-thumb {
    float: left;
    margin-right: 35px;
    margin-top: -10px;
}

.choose-us-list {
    margin-bottom: 60px;
}

.choose-us-list ul {
    list-style: none;
}

.choose-us-list ul li {
    font-size: 18px;
    color: #1c1632;
    font-weight: 400;
    display: block;
    margin-bottom: 14px;
}

.choose-us-list ul li i {
    height: 20px;
    width: 20px;
    background: #e63a27;
    color: #fff;
    display: inline-block;
    line-height: 23px;
    font-size: 19px;
    border-radius: 50%;
    margin-right: 10px;
}

.choose-us-info {
    display: inline-flex;
}

.choose-us-icon {
    margin-left: 32px;
}

.choose-us-icon i {
    width: 60px;
    height: 60px;
    border-radius: 32px;
    line-height: 60px;
    text-align: center;
    font-size: 24px;
    color: #e63a27;
    background: rgba(245, 161, 139, 0.322);
    display: inline-block;
}

.choose-us-phone h5 {
    font-size: 18px;
    line-height: 24px;
    color: #1c1632;
    font-weight: 400;
}

.choose-us-phone {
    margin-left: 30px;
}

.choose-us-phone h5 {
    font-size: 18px;
    line-height: 24px;
    color: #1c1632;
    font-weight: 400;
    margin: 0;
}

.choose-us-phone h5 span {
    display: block;
    line-height: 42px;
    font-weight: 500;
}



/* choose form box */

.choose-contact-box {
    background: #e63a27;
    padding: 26px 82px 42px;
    border-radius: 3px;
}

.choose-contact-title h4 {
    font-size: 32px;
    line-height: 40px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 37px;
}

.form-box {
    position: relative;
}

.form-box input {
    width: 100%;
    height: 50px;
    padding-left: 30px;
    background: #ffffff;
    border: 0;
    outline: 0;
    border-radius: 3px;
    color: #3e3e3f;
    margin-bottom: 23px;
}

.form_box input::placeholder {
    color: #6d6d6d;
}

.form-box select {
    width: 100%;
    height: 50px;
    padding-left: 30px;
    background: #ffffff;
    border-radius: 3px;
    border: 0;
    outline: 0;
    color: #3e3e3f;
    margin-bottom: 23px;
}


.form-box textarea {
    width: 100%;
    height: 100px;
    padding-left: 30px;
    background: #ffffff;
    border-radius: 3px;
    color: #3e3e3f;
    border: 0;
    outline: 0;
    margin-bottom: 23px;
}

.form-box textarea::placeholder {
    padding: 8px 0px 0;
}


.form-box i {
    position: absolute;
    right: 30px;
    top: 11px;
    color: #e63a27;
}

.form-box-button button {
    width: 270px;
    height: 60px;
    border-radius: 3px;
    background-color: #1c1632;
    border: 0;
    outline: 0;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.form-box-button button:hover {
    color: #e63a27;
}

.form-box-button button::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    transform: scale(0.0, 1);
    opacity: 0;
    border-radius: 3px;
    z-index: -1;
    transition: .5s;
}

.form-box-button button:hover::before {
    background: #ffffff;
    opacity: 1;
    transform: scale(1, 1);
}

/* Solar Panel choose us section style two */

.choose-us-section.style-two {
    padding: 0 0 110px;
}

/*==================================================
 <-- Solar Panel  Protfolio Section Css-->
===================================================*/

.protfolio-section {
    background: #1c1632;
    padding: 106px 0 108px;
}

.protfolio-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #282828;
    padding: 35px 0 0;
}

.protfolio-item-content {
    display: flex;
    align-items: center;
}

.protfolio-item-numbar {
    margin-right: 22px;
}

.protfolio-item-numbar span {
    opacity: 0.800;
    font-size: 24px;
    line-height: 36px;
    color: #e2e2e2;
    font-weight: 500;
    transition: .5s;
}

.protfolio-item:hover .protfolio-item-numbar span {
    color: #e63a27;
}

.protfolio-item-title h3 {
    font-size: 24px;
    line-height: 21px;
    color: #e2e2e2;
    font-weight: 500;
    transition: .5s;
}

.protfolio-item:hover .protfolio-item-title h3 {
    color: #e63a27;
}

.protfolio-itme-hover {
    margin-top: -24px;
    opacity: 0;
    transition: .5s;
}

.protfolio-item:hover .protfolio-itme-hover {
    opacity: 1;
}

.protfolio-item-icon i {
    color: #fff;
    font-size: 30px;
    transition: .5s;
}

.protfolio-item:hover .protfolio-item-icon i {
    color: #e63a27;
}

/* protfolio item style two */

.protfolio-item.style-two {
    border-bottom: 1px solid #282828;
    padding: 35px 0 20px;
}


/*==================================================
 <-- Solar Panel  Offer Section Css-->
===================================================*/

.offer-section {
    padding: 108px 0 118px;
}

.offer-items-box {
    background: url(../images/resource/offer-item.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 20px 18px;
    border-radius: 3px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 30px;
}

.offer-items-box::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/resource/offer-hover.png);
    width: 0;
    transform: translateY(100%);
    z-index: -1;
    transition: .5s;
    border-radius: 3px;
}

.offer-items-box:hover::before {
    width: 100%;
    transform: translateY(0);
}

.offer-icon-thumb img {
    transition: .5s;
}

.offer-items-box:hover .offer-icon-thumb img {
    filter: brightness(0)invert(1);
}

.offer-content h4 {
    font-size: 24px;
    line-height: 24px;
    color: #1c1632;
    font-weight: 500;
    padding: 10px 0 16px;
    transition: .5s;
}

.offer-items-box:hover .offer-content h4 {
    color: #ffffff;
}

.offer-content p {
    font-size: 16px;
    line-height: 24px;
    color: #434141;
    font-weight: 400;
    transition: .5s;
}

.offer-items-box:hover .offer-content p {
    color: #ffffff;
}

.offer-thumb {
    margin-left: -100px;
    margin-top: 60px;
}

.offer-thumb img {
    width: 100%;
}


/* progressbar css */

.process-ber-plugin {
    padding: 36px 0 0;
}

span.process-bar {
    font-size: 20px;
    color: #1c1632;
    font-weight: 500;
    position: relative;
}

.barfiller {
    width: 562px;
    height: 10px;
    position: relative;
    margin-bottom: 25px;
    margin-top: 11px;
    border-radius: 3px;
    background-color: #c9ccd2;
}

.barfiller .fill {
    display: block;
    position: relative;
    width: 0px;
    height: 100%;
    z-index: 1;
}

.barfiller .tipWrap {
    display: none;
}

.barfiller .tip {
    font-size: 18px;
    color: #1c1632;
    font-weight: 500;
    top: -37px;
    padding: 1px 6px;
    left: 0px;
    position: absolute;
}

.stat-bar:nth-of-type(1) .stat-bar-rating {
    animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}

span.fill {
    background: #c73828 !important;
    border-radius: 3px;
}


/* offer section style two */

.offer-section.style-two {
    padding: 0 0 120px;
}

/*==================================================
 <-- Solar Panel  Team Section Css-->
===================================================*/
.team-subtitle {
    font-size: 25px;
    color: black;
    margin: auto;
    text-align: center;
    padding-bottom: 40px;
}

.team-section {
    background: #f6f6f6;
    margin-bottom: -200px;
}

.team-items-box {
    margin-bottom: 127px;
    /* border-top: 2px solid #e63a27; */
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    
}

.team-thumb {
    position: relative;
}

.team-thumb img {
    width: 100%;
    height: 200px;
    background-size: contain;
    
}

.team-icon {
    position: absolute;
    top: 44px;
    right: 10px;
    transform: translate(-50%, 50%);
    transition: .5s;
    opacity: 0;
}

.team-items-box:hover .team-icon {
    top: -48px;
    opacity: 1;
}

.team-icon ul {
    list-style: none;
}

.team-icon ul li {
    display: block;
    margin-top: 8px;
}

.team-icon ul li a i {
    height: 32px;
    width: 32px;
    background: #fff;
    text-align: center;
    line-height: 32px;
    color: #e63a27;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.team-icon ul li a:hover i {
    color: #ffffff;
}

.team-icon ul li a i::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e63a27;
    transform: scale(0);
    border-radius: 5px;
    z-index: -1;
    transition: .5s;
}

.team-icon ul li a i:hover::after {
    transform: scale(1);
}

.team-main-icon {
    position: absolute;
    bottom: 7px;
    left: 0;
    right: 44px;
    margin: auto;
    transform: translateX(50%);
    z-index: 999;
}

.team-main-icon a {
    height: 40px;
    width: 40px;
    background: #e63a27;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    position: relative;
    z-index: 1;
}

.team-main-icon a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    transform: scale(0);
    border-radius: 50%;
    z-index: -1;
    transition: .5s;
}

.team-items-box:hover .team-main-icon a::before {
    transform: scale(1);
}

.team-main-icon a i {
    transition: .5s;
}

.team-items-box:hover .team-main-icon a i {
    color: #e63a27;
}

.team-content {
    text-align: center;
    background: #1c1632;
    position: absolute;
    bottom: -94px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    padding: 30px 0 18px;
    border-bottom: 2px solid #e63a27;
   
    z-index: 1;
}

.team-content::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 100%;
    margin: auto;
    background: #e63a27;
    transition: .5s;
    z-index: -1;
}

.team-items-box:hover .team-content::before {
    width: 100%;
}

.team-content h4 {
    font-size: 25px;
    line-height: 30px;
    color: #e2e2e2;
    font-weight: 500;
    text-decoration: none;
}

.team-content span {
    font-size: 16px;
    line-height: 32px;
    color: #9a9898;
    font-weight: 400;
    transition: .5s;
}

.team-items-box:hover .team-content span {
    color: #e2e2e2;
}


/* home page two team section css */

.team-icon.style-two {
    right: 40%;
}

.team-items-box:hover .team-icon.style-two {
    top: 8px;
}

.team-main-icon.style-twoa i {
    position: relative;
}

.team-main-icon.style-two a i::after {
    position: absolute;
    content: "";
    height: 14px;
    width: 2px;
    background: #ffffff;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 15px;
    opacity: 0;
    transition: .5s;
}

.team-items-box:hover .team-main-icon.style-two a i::after {
    background: #e63a27;
    opacity: 1;
}

/* team style two css */

.team-section.style-two {
    padding: 50px 0 286px;
}


/*==================================================
 <-- Solar Panel  Appointment Section Css-->
===================================================*/

.row.appointment {
    background: #ffffff;
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
    padding: 88px 85px 87px;
}

.choose-us-icon.appointment {
    margin-left: 0;
}

/* appointment form box css */

.choose-contact-box.appointment {
    padding: 46px 54px 44px;
}

.form-box.appointment input {
    height: 56px;
    margin-bottom: 27px;
}

.form-box-button.appointment button {
    width: 190px;
    height: 56px;
    font-size: 18px;
    font-weight: 400;
}


/*==================================================
 <-- Solar Panel  Blog Section Css-->
===================================================*/

.blog-section {
    padding: 108px 0 120px;
}

.blog-items-box {
    border: 1px solid #fbe0dd;
    padding: 0 0 26px;
    border-radius: 3px;
    position: relative;
}

.blog-thumb {
    margin-top: -62px;
}

.blog-date {
    position: absolute;
    top: 136px;
    right: -57px;
    transform: rotate(-90deg);
}

.blog-date span {
    font-size: 20px;
    color: #1c1632;
    font-weight: 500;
}

.blog-date span i {
    color: #e63a27;
    font-size: 16px;
    margin-right: 6px;
}

.blog-content {
    padding: 0 29px 0;
}

.blog-meta {
    margin: 16px 0 -3px;
}

.blog-meta span {
    font-size: 16px;
    line-height: 34px;
    color: #1c1632;
    font-weight: 400;
    padding-right: 50px;
}

.blog-meta span i {
    color: #e63a27;
    font-size: 18px;
    margin-right: 6px;
}

.blog-title {
    margin-bottom: 12px;
}

.blog-title h4 a {
    font-size: 24px;
    line-height: 34px;
    text-decoration: underline;
    color: #1c1632;
    font-weight: 500;
    transition: .5s;
}

.blog-items-box:hover .blog-title h4 a {
    color: #e63a27;
}

.blog-bottom-shape {
    display: inline-block;
    margin-right: 15px;
}

.blog-bottom-title {
    display: inline-block;
    margin-right: 44px;
}

.blog-bottom-title h5 {
    font-size: 16px;
    line-height: 34px;
    color: #1c1632;
    font-weight: 400;
}

.blog-btn {
    display: inline-block;
}

.blog-btn a {
    font-size: 18px;
    line-height: 34px;
    text-decoration: underline;
    color: #1c1632;
    font-weight: 500;
}

.blog-items-box:hover .blog-btn a {
    color: #e63a27;
}

.blog-btn a i {
    margin-left: 8px;
}

/* blog section style two  */

.blog-section.style-two {
    padding: 120px 0 118px;
}

/* blog section style three */

.blog-section.style-three {
    padding: 118px 0 50px;
}

/*==================================================
 <-- Solar Panel  Subscribe Section Css-->
===================================================*/

.subscribe-section {
    background: #e63a27;
    padding: 70px 0 41px;
}

/* subscribe form */

.form-box.Subscribe input {
    width: 88%;
    height: 60px;
    margin-bottom: 14px;
}

.form-box.Subscribe i {
    position: absolute;
    width: 60px;
    height: 60px;
    background: red;
    top: 0;
    right: 18px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    border-radius: 3px;
    font-size: 20px;
}

.checkbox-box label {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
}

.checkbox-box label a {
    color: #ffffff;
}


/*==================================================
 <-- Solar Panel  Footer Section Css-->
===================================================*/
.footer-gap {
    padding-left: 5px;
    padding-right: 5px
}

.footer-section {
    background: #1c1632;
}

/* titles */
.footer-wiget-title h4 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 20px;
}

/* text */
.footer-wiget-text p {
    color: #e2e2e2;
    line-height: 28px;
    padding-right: 10px;
}

/* social */
.footer-wiget-social ul {
    list-style: none;
    padding: 0;
}

.footer-wiget-social ul li {
    display: inline-block;
    margin-right: 15px;
}

.footer-wiget-social ul li a i {
    font-size: 18px;
    color: #f21d23;
}

.footer-wiget-social ul li a:hover i {
    color: #fff;
}

/* quick links */

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

.footer-wiget-menu ul li {
    margin-bottom: 8px;
}

.footer-wiget-menu ul li a {
    color: #e2e2e2;
    font-size: 18px;
    text-decoration: none;
}

.footer-wiget-menu ul li a:hover {
    color: #f21d23;
}

/* contact */
.footer-contact-icons ul {
    list-style: none;
    padding: 0;
}

.footer-contact-icons ul li {
    color: #e2e2e2;
    line-height: 30px;
    margin-bottom: 12px;
}

.footer-contact-icons ul li i {
    color: #f21d23;
    margin-right: 10px;
}

.footer-contact-icons ul li a {
    color: #e2e2e2;
    text-decoration: none;
}

.footer-contact-icons ul li a:hover {
    color: #f21d23;
}

/* newsletter */
.newsletter-box {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    max-width: 320px;

}

/* input */
.newsletter-box input {
    flex: 1;
    height: 52px;
    border: none;
    padding: 0 15px;
    background: transparent;
    color: black;
    font-size: 15px;
    outline: none;
}

/* send button */
.newsletter-box button {
    width: 56px;
    height: 52px;
    border: none;
    background: #e63a27;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* icon */
.newsletter-box button i {
    font-size: 18px;
    color: #fff;
}

/* remove focus / shadow */
.newsletter-box button:focus,
.newsletter-box input:focus {
    outline: none;
    box-shadow: none;
}


/* copyright */
.footer-line {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 60px;
    padding-top: 20px;
}

.copyright-text p {
    color: #e2e2e2;
    font-size: 16px;
}

.copyright-text a {
    color: #e63a27;
    text-decoration: none;
}

.copyright-text a:hover {
    color: #fff;
}

.footer-wiget-log img {
    width: 250px;
    height: 70px;
    padding-bottom: 5px;
    padding-top: 5px;
}

/*==================================================
 <-- Solar Panel  Home Pages Two  Css-->
===================================================*/

/* testimonial section css */

.testimonial-section {
    padding: 0 0 114px;
}

.testi-item-box {
    text-align: center;
    background-color: #ffffff;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
    padding: 44px 37px 40px;
    border-top: 3px solid rgba(230, 58, 39, 0.800);
    position: relative;
    margin: 0 10px 3px;
}

.testi-item-box::before {
    position: absolute;
    content: "";
    height: 3px;
    width: 0%;
    background: #1c1632;
    top: -3px;
    left: 0;
    right: 0;
    margin: auto;
    transition: .5s;
}

.testi-item-box:hover::before {
    width: 100%;
}

.testi-title h4 {
    font-size: 24px;
    line-height: 44px;
    color: #1c1632;
    font-weight: 500;
}

.testi-title span {
    font-size: 20px;
    line-height: 26px;
    color: #e63a27;
    font-weight: 500;
}

.testi-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #434141;
    font-weight: 400;
    margin: 10px 0 5px;
}

.testi-icon i {
    color: #e63a27;
    margin: 0 2px 0;
    font-size: 14px;
    opacity: 0.800;
}


/* owlcarousel css */

.testimonial-section .owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
    display: none;
}

.testimonial-section .owl-carousel .owl-item img {
    display: inline-block;
}

.testimonial-section .owl-dots {
    text-align: center;
    margin-top: 31px;
}

.testimonial-section .owl-dot {
    margin-right: 9px;
    height: 14px;
    width: 14px;
    border: 2px solid #e63a27;
    border-radius: 50%;
    display: inline-block;
}

.testimonial-section .owl-dot.active {
    height: 14px;
    width: 14px;
    background: #e63a27;
    border-radius: 50%;
}


/*==================================================
 <-- Solar Panel  Home Pages Two Call Back  Css-->
===================================================*/

.call-back-section {
    background: url(../images/resource/call-back-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 100px 0 100px;
}

.call-back-content {
    background: #1c1632;
    padding: 63px 0 77px;
}

.call-back-numbar h3 {
    font-size: 42px;
    line-height: 44px;
    color: #ffffff;
    font-weight: 600;
}

.call-back-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
    padding: 20px 0 23px;
    width: 84%;
    margin: auto;
}

/*==================================================
 <-- Solar Panel  Breatcame  Css-->
===================================================*/

/* ===============================
   BASE BANNER (COMMON)
================================= */

.breatcome-section {
    position: relative;
    min-height: 413px;
    padding: 130px 0 180px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: visible;
}

/* Overlay */
.breatcome-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(25, 33, 50, 0.45);
    z-index: 1;
}

/* Content */
.breatcome-content {
    position: relative;
    z-index: 2;
}

.breatcome-title h1 {
    color: #fff;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 19px;
    text-transform: capitalize;
}

/* Breadcrumb */

.bratcome-text {
    position: absolute;
    right: 0;
    bottom: -200px;
    background: #f4fbff;
    padding: 23px 35px;
    border-radius: 5px 5px 0 0;
    z-index: 3;
}

.bratcome-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bratcome-text ul li {
    display: inline-block;
    margin-right: 15px;
    font-size: 16px;
    line-height: 27px;
    color: #434141;
    font-weight: 500;
}

.bratcome-text ul li a {
    font-size: 16px;
    color: #434141;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: .5s;
}

.bratcome-text ul li a:hover {
    color: #e63a27;
}

.bratcome-text ul li a::before {
    position: absolute;
    content: "/";
    left: 50px;
}

/* ===============================
   SECTION BACKGROUNDS
================================= */

.services-section-banner {
    background-image: url("../images/21services/services-banner.jpg");
}

.company-profile-banner {
    background-image: url("../images/about/aboutus-banner.jpg");
}

.management-team-section-banner {
    background-image: url("../images/about/management-banner.jpg");
}

.vision-section-banner {
    background-image: url("../images/about/vision-banner.jpg");
}

.project-section-banner {
    background-image: url("../images/project/project-section-banner.jpg");
}

.career-section-banner {
    background-image: url("../images/career/career-banner.jpg");
}

.contact-section-banner {
    background-image: url("../images/contact/contactus-banner.jpg");
}

.gallery-section-banner {
    background-image: url("../images/gallery/gallery-banner.png");
}

/* ===============================
   MOBILE FIX
================================= */

@media (max-width: 768px) {

    .breatcome-section {
        min-height: 280px;
        padding: 90px 0 60px;
    }

    .breatcome-title h1 {
        font-size: 32px;
        text-align: center;
        margin-bottom: 10px;
    }

    /* Breadcrumb below title */
    .bratcome-text {
        position: static;
        transform: none;
        background: transparent;
        padding: 0;
        margin-top: 8px;
        text-align: center;
    }

    .bratcome-text ul li,
    .bratcome-text ul li a {
        color: #ffffff;
    }

    .bratcome-text ul li + li::before {
        content: "/";
        color: #ffffff;
        padding: 0 6px;
    }

    .bratcome-text ul li a::before {
        display: none !important;
    }
}


/*==================================================
 <-- Solar Panel  Blog  Css-->
===================================================*/

.blog-items-box.style-two {
    border: none;
    margin-bottom: 10px;
}

.blog-thumb.style-two {
    margin: 0;
}

.blog-thumb.style-two img {
    width: 100%;
}

.blog-content.style-two {
    background-color: #ffffff;
    filter: drop-shadow(0px 3px 12.5px rgba(0, 0, 0, 0.1));
    padding: 27px 29px 34px;
    border-radius: 0px 0px 6px 6px;
}

.blog-meta.style-two {
    margin: 0;
}

.blog-disctiption p {
    font-size: 16px;
    line-height: 28px;
    color: #434141;
    font-weight: 400;
}

/* pagination css */

.as-pagination {
    margin-top: 18px;
}

.as-pagination ul {
    list-style: none;
}

.as-pagination ul li {
    display: inline-block;
}

.as-pagination ul li a {
    display: inline-block;
    font-size: 16px;
    color: #292930;
    font-weight: 500;
    border: 1px solid #dddddd;
    height: 38px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 3px;
    margin-left: 5px;
    transition: .5s;
    text-decoration: none;
    position: relative;
    transition: .5s;
}

.as-pagination ul li a:hover {
    color: #ffffff;
}

.as-pagination ul li a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e63a27;
    transform: scale(0);
    border-radius: 3px;
    z-index: -1;
    transition: .5s;
}

.as-pagination ul li a:hover::before {
    transform: scale(1);
}


/* sidebar css */

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #606060;
    font-weight: 400;
    border: 0;
    border: 1px solid #dddddd;
    outline: 0;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #e63a27;
    border-radius: 0 3px 3px 0;
}

.categories-title h4 {
    font-size: 24px;
    margin-bottom: 25px;
}

.widget-categories-menu {
    margin-bottom: 45px;
}

.widget-categories-menu ul li {
    list-style: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
    position: relative;
    margin-bottom: 10px;
}

.widget-categories-menu ul li::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    transition: all 0.5s linear 0s;
    background-color: #e63a27;
    content: "";
}

.widget-categories-menu ul li:hover::after {
    width: 100%;
    right: auto;
    left: 0;
}

.widget-categories-menu ul li a {
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: .5s;
    font-weight: 500;
}

.widget-categories-menu ul li a:hover {
    color: #e63a27;
}

.widget-categories-menu ul li a span {
    float: right;
}

.sidber-widget-recent-post {
    margin: 44px 0 62px;
}

.recent-widget-thumb {
    float: left;
    margin-right: 16px;
    margin-top: -15px;
    transition: .5s;
}

.recent-widget-content a {
    font-size: 20px;
    line-height: 26px;
    color: #292930;
    font-weight: 600;
    display: block;
    text-decoration: none;
    margin-bottom: 6px;
    transition: .5s;
}

.recent-widget-content a:hover {
    color: #e63a27;
}

.recent-widget-content span {
    font-size: 16px;
    line-height: 26px;
    color: #434141;
    font-weight: 400;
}

.recent-widget-content span i {
    font-size: 13px;
    margin-right: 4px;
}

.widget-tags a {
    display: inline-block;
    text-decoration: none;
    border: 1px solid #dddddd;
    padding: 3px 14px;
    margin: 11px 5px;
    border-radius: 2px;
    font-size: 16px;
    color: #434141;
    font-weight: 400;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:hover {
    color: #fff;
}

.widget-tags a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    background: #e63a27;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover:before {
    width: 104%;
}

.ba-blog-widget-title {
    font-size: 24px;
    margin: 27px 0 22px;
}

.ba-blog-widget-subscribe-form form {
    position: relative;
}

.ba-blog-widget-subscribe-form input {
    border: 0;
    width: 100%;
    padding-right: 30px;
    outline: 0;
    border-bottom: 1px solid #DDD;
    color: #434141;
    padding-bottom: 3px;
    transition: all 0.3s linear 0s;
}

.ba-blog-widget-subscribe-form input:focus {
    border-color: #e63a27;
}

.ba-blog-widget-subscribe-form button[type=submit] {
    padding: 0;
    position: absolute;
    right: 0;
    bottom: 2px;
    background: transparent;
    border: 0;
    color: #e63a27;
}


/*==================================================
 <-- Solar Panel  Blog Details Css-->
===================================================*/

.blog-content.style-two.inner {
    background: none;
}

.blog-disctiption.inner {
    margin-bottom: 32px;
}

.blog-details-thumb img {
    width: 100%;
}

.blog-details-list {
    margin-bottom: 32px;
}

.blog-details-list ul li {
    list-style: none;
    margin-bottom: 12px;
    font-size: 18px;
    color: #292930;
    font-weight: 600;
}

.blog-details-list ul li i {
    font-size: 22px;
    padding-right: 8px;
}

.blog-details-list ul li.active {
    color: #e63a27;
}

.blog-details-title h5 {
    font-size: 24px;
    line-height: 26px;
    color: #292930;
    font-weight: 600;
    margin-bottom: 15px;
}

blockquote {
    filter: drop-shadow(0 0 45px rgba(0, 0, 0, 0.1));
    background-color: #ffffff;
    padding: 25px 34px 30px;
    text-align: center;
}

.blog-details-social-box {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 4px 0;
    padding-bottom: 9px;
}

.ba-blog-details-social-icons h6 {
    display: inline-block;
    margin-right: 15px;
    color: #e6004a;
}

.ba-blog-details-social-icons a {
    margin-right: 10px;
    vertical-align: middle;
}

.ba-blog-details-social-icons a:hover {
    color: #e63a27;
}

.ba-blog-details-social-icons a i {
    font-size: 20px;
    color: #292930;
    font-weight: 600;
}

.text-sm-end {
    text-align: right !important;
}

.ba-blog-details-comment-count i {
    font-size: 15px;
    color: #e63a27;
}

.ba-blog-details-comment-count span {
    display: inline-block;
    margin-left: 10px;
}

.ba-section-title-2 {
    position: relative;
    padding-bottom: 16px;
}

.ba-section-title-2::after {
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 90px;
    background: #e63a27;
    content: "";
    left: 0;
}

.ba-blog-comment-list ul {
    list-style: none;
}

.ba-blog-comment-list ul li .ba-blog-comment-box {
    border-bottom: 1px solid #DDD;
    padding-bottom: 38px;
}

.ba-blog-comment-list ul li .ba-blog-comment-box.inner-2 {
    border-bottom: none;
}

.ba-blog-comment-list ul li .ba-blog-comment-box.inner {
    margin: 25px 67px 28px;
}

.ba-blog-comment-list ul li .image {
    float: left;
    margin-right: 30px;
}

.ba-blog-comment-list ul li .content {
    overflow: hidden;
}

.ba-blog-comment-list .title {
    margin-bottom: 5px;
}

.text-sm-end {
    text-align: right !important;
}

.ba-blog-comment-list ul li .replay-link {
    text-decoration: none;
}


/* comment box css */

.choose-contact-box.inner {
    background: 0;
    padding: 0;
}

.choose-contact-title.inner h4 {
    font-size: 24px;
    color: #292930;
    position: relative;
    margin-bottom: 50px;
}

.choose-contact-title.inner h4::before {
    position: absolute;
    content: "";
    height: 2px;
    width: 90px;
    background: #e6004a;
    bottom: -10px;
}

.form-box.inner textarea {
    width: 100%;
    height: 220px;
}

.form-box-button.inner button {
    width: 196px;
    height: 55px;
    border-radius: 5px;
    background-color: #e63a27;
}


/*==================================================
 <-- Solar Panel  Service Innerp Page Css-->
===================================================*/

.service-section.style-two {
    padding: 106px 0 78px;
}

.service-box.style-two {
    margin-bottom: 40px;
}


/*==================================================
 <-- Solar Panel  Project Grid Innerp Page Css-->
===================================================*/

.project-grid-section {
    padding: 118px 0 88px;
}

.protfolio-menu ul {
    list-style: none;
}

.protfolio-menu ul li {
    display: inline-block;
    padding: 12px 33px;
    font-size: 18px;
    color: #ffffff;
    background: #1c1632;
    font-weight: 500;
    margin: 0px 13px 50px;
    border-radius: 5px;
    cursor: pointer;
}

.protfolio-menu ul li.current_menu_item {
    position: relative;
    color: #ffffff;
    z-index: 1;
}

.protfolio-menu ul li.current_menu_item::before {
    position: absolute;
    content: "";
    background: #e63a27;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transform: scale(0);
    border-radius: 5px;
    z-index: -1;
    transition: .5s;
}

.protfolio-menu ul li.current_menu_item:hover::before {
    transform: scale(1);
}

/* project grid box */

.project-thumb img {
    width: 100%;
    height: 200px;
}

.project-content {
    background: #1c1632;
    padding: 22px 42px 30px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
}

.project-content::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e63a27;
    border-radius: 5px;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
}

.project-grid-box:hover .project-content::before {
    transform: scale(1);
}

.project-content h4 {
    font-size: 24px;
    line-height: 30px;
    color: #e2e2e2;
    font-weight: 500;
    margin-bottom: 14px;
}

.project-content span {
    font-size: 16px;
    line-height: 30px;
    color: #dddddd;
    font-weight: 400;
}


/*==================================================
 <-- Solar Panel  Error Innerp Page Css-->
===================================================*/

.error-section {
    padding: 118px 0 120px;
}

/*==================================================
 <-- Solar Panel  Faq Innerp Page Css-->
===================================================*/

.faq-section {
    padding: 108px 0 94px;
}

.faq-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #434141;
    font-weight: 400;
    margin-bottom: 33px;
}

/* faq contact css */

.choose-contact-box.faq {
    background: #f8f8f8;
    padding: 46px 82px 60px;
}

.choose-contact-title.faq h4 {
    font-size: 30px;
    line-height: 34px;
    color: #292930;
    font-weight: 600;
    margin-bottom: 47px;
}

.form-box.faq input {
    height: 62px;
    background-color: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 13px;
}

.form-box.faq textarea {
    width: 100%;
    height: 118px;
    border-radius: 5px;
    background-color: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 45px;
}

.form-box-button.faq button {
    width: 216px;
    height: 62px;
    border-radius: 5px;
    background-color: #e63a27;
}


/*==================================================
 <-- Solar Panel  Service Details Innerp Page Css-->
===================================================*/

.service-details-section {
    padding: 120px 0 77px;
}

.service-details-thumb img {
    width: 100%;
}

.service-details-thumb-two img {
    width: 100%;
}

.service-details-title h4 {
    font-size: 26px;
    color: #0d1c37;
    font-weight: 700;
    padding: 13px 0;
}

.service-details-discription p {
    font-size: 16px;
    color: #434141;
    font-weight: 400;
    font-family: "Jost";
    padding: 4px 0 31px 0;
    margin: 0;
}

.widget_search.box {
    padding: 29px 22px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: #f5f5f5;
}

.widget-categories-box.two {
    padding: 47px 22px 5px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: #f5f5f5;
}

.widget-categories-menu ul li {
    list-style: none;
    padding: 13px;
    position: relative;
    margin-bottom: 10px;
    background: #fff;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.widget-categories-menu.asd ul li::after {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 2px;
    height: 53px;
    transition: all 0.5s linear 0s;
    background-color: #e63a27;
    content: "";
    z-index: -1;
}

.widget-categories-menu.asd ul li:hover::after {
    width: 100%;

}

.widget-categories-menu.asd ul li a {
    transition: .5s;
}

.widget-categories-menu.asd ul li:hover a {
    color: #fff !important;
}

.widget-content {
    padding: 0 21px 31px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.widget-content h4 {
    padding: 28px 0 15px;
    font-size: 24px;
    color: #292930;
    font-weight: 600;
}

.widget-content p {
    font-size: 16px;
    color: #434141;
    font-weight: 400;
    margin: 0;
}

.widget-info-social-link ul li {
    list-style: none;
    padding: 21px 0 0;
}

.widget-info-social-link ul li a {
    text-decoration: none;

}

.widget-info-social-link ul li span {
    font-size: 17px;
    color: #292930;
    font-weight: 500;
    transition: .3s;
}

.widget-info-social-link ul li a i {
    font-size: 24px;
    color: #e63a27;
    font-weight: 400;
    padding-right: 9px;
}

.widget-info-social-link ul li span:hover {
    color: #e63a27;
}

/* service style three */

.service-section.style-three {
    padding: 15px 0 75px;
    background: none;
    margin-bottom: 0;
}



/*==================================================
 <-- Solar Panel  Team Details Innerp Page Css-->
===================================================*/



/*==================================================
 <-- Solar Panel  Project Details Inner Page Css-->
===================================================*/

.project-details-section {
    padding: 118px 0 120px;
}

.project-details-section .info-area {
    padding-left: 60px;
}

.project-details-section .sub-title h5 {
    font-size: 25px;
    font-weight: 700;
    text-transform: capitalize;
}

.project-details-section .info li {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

.project-details-section .info li h6 {
    font-weight: 700;
    text-transform: capitalize;
    width: 50%;
}

.project-details-section .info li p {
    width: 50%;
    text-transform: capitalize;
}

.project-details-section .info li ul li {
    border: 0;
    padding: 0;
    padding-right: 15px;
}

.project-details-section .title h4 {
    font-size: 29px;
    line-height: 44px;
    text-transform: capitalize;
    font-weight: 700;
}

.project-details-section .list-part {
    padding-top: 10px;
}

.project-details-section .desc-list {
    padding-top: 20px;
}

.project-details-section .desc-list li {
    position: relative;
    padding: 5px 0 5px 30px;
    list-style: none;
}

.project-details-section .desc-list li:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background: #e63a27;
}




/*** 
====================================================================
    Search Popup
====================================================================
***/
.search-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0, 0, 0, 0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    /* easeInOutQuint */
}

.search-popup {
    width: 100%;
}

.search-active .search-popup {
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #e63a27;
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-active .search-popup .close-search {
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form {
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin: -35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form {
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group {
    position: relative;
    margin: 0px;
    overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 50px;
    color: #000000;
    height: 70px;
    width: 100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    font-weight: 500;
    text-transform: capitalize;
}

.search-popup .form-group input[type="submit"],
.search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #e63a27;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
    color: #000000;
}

.search-popup .close-search.style-two {
    position: absolute;
    right: 25px;
    left: auto;
    color: #ffffff;
    width: auto;
    height: auto;
    top: 25px;
    margin: 0px;
    border: none;
    background: none !important;
    box-shadow: none !important;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.flaticon-multiply:before {
    content: inherit;
}

button.close-search i {
    font-size: 25px;
    color: #fff;
    display: inline-block;
}

span.flaticon-multiply i {
    display: inline-block;
    color: #e63a27;
}




/*
<!-- ============================================================== -->
<!-- Solar Panel  Scrollup Section -->
<!-- ============================================================== -->*/
.scroll-area {
    position: relative;
    z-index: 999;
}

.scroll-area .go-top {
    position: fixed;
    cursor: pointer;
    top: 0;
    right: 30px;
    color: #ffffff;
    background-image: -moz-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    background-image: -webkit-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    z-index: 9999;
    width: 45px;
    text-align: center;
    height: 45px;
    line-height: 42px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.9s ease-out 0s;
    -moz-transition: all 0.9s ease-out 0s;
    transition: all 0.9s ease-out 0s;
    border-radius: 10px;
}

.scroll-area .go-top i {
    position: absolute;
    top: 50%;
    left: -4px;
    right: 0;
    margin: 0 auto;
    font-size: 15px;
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}

.scroll-area .go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%;
}

.scroll-area .go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(to right, #00132b 0%, #00132b 100%);
    background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
    ;
    border-radius: 100%;
}

.scroll-area .go-top:focus,
.scroll-area .go-top:hover {
    color: #fff;
}

.scroll-area .go-top:focus::before,
.scroll-area .go-top:hover::before {
    opacity: 1;
    visibility: visible;
}

.scroll-area .go-top:focus i:first-child,
.scroll-area .go-top:hover i:first-child {
    opacity: 0;
    top: 0;
    visibility: hidden;
}

.scroll-area .go-top:focus i:last-child,
.scroll-area .go-top:hover i:last-child {
    opacity: 1;
    visibility: visible;
    top: 50%;
}

.scroll-area .go-top.active {
    top: 95%;
    -webkit-transform: translateY(-98%);
    -moz-transform: translateY(-98%);
    transform: translateY(-98%);
    opacity: 1;
    visibility: visible;
    border-radius: 0;
    right: 30px;
    border-radius: 100%;
}

.top-wrap {
    position: relative;
}

.top-wrap .go-top-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    top: 3px;
    z-index: 1;
    background: #FF3C00;
}

.top-wrap .go-top-button i {
    font-size: 20px;
    font-weight: 700;
    padding-left: 4px;
    color: #fff;
}

.top-wrap .go-top-button::after {
    z-index: -1;
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 45px;
    height: 45px;
    -webkit-animation: ripple 1.6s ease-out infinite;
    -moz-animation: ripple 1.6s ease-out infinite;
    animation: ripple 1.6s ease-out infinite;
    opacity: 0;
    background-image: -moz-linear-gradient(0deg, #69DDCC 0%, #69DDCC 100%);
    background-image: -webkit-linear-gradient(0deg, #fb8a42 0%, #fb8a42 100%);
    border-radius: 100%;
}

.top-wrap .go-top-button:hover {
    background-color: #222;
    color: #fff;
}

@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

/*
<!-- ============================================================== -->
<!-- Solar Panel  Bounce Animation Css -->
<!-- ============================================================== -->*/
/* bounce-animate */
.bounce-animate {
    animation-name: float-bob;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate2 {
    animation-name: float-bob2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob2;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob2;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob2;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate3 {
    animation-name: float-bob3;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob3;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob3;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob3;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate4 {
    animation-name: float-bob4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob4;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob4;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob4;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate5 {
    animation-name: float-bob5;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate-slow {
    animation-name: float-bob5;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 15s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate-3 {
    animation-name: float-bob6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob6;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob6;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob6;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@keyframes float-bob {
    0% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

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

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

@keyframes float-bob2 {
    0% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }

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

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

@keyframes float-bob3 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

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

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

@keyframes float-bob4 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

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

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

@keyframes float-bob5 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

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

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

@keyframes float-bob6 {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }

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

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

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

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

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


@keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

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



/*--==============================================->
  <!-- Solar Panel  Animation Dance -->
 ==================================================-*/
/**/
.dance3 {
    -webkit-animation: dance3 8s alternate infinite;
    animation: dance3 8s alternate infinite;
}

@keyframes dance3 {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

.dance {
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
}

@keyframes dance {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1.2);
    }
}

.dance2 {
    -webkit-animation: dance2 4s alternate infinite;
    animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(25px, -25px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -25px, 25px);
    }
}

.watermark-animate {
    -webkit-animation: watermark-animate 8s infinite;
    animation: watermark-animate 8s infinite;
    animation-direction: alternate-reverse;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes watermark-animate {
    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}




/*===========================
<-- Solar Panel  Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 666;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 3px solid transparent;
    border-top-color: #e63a27;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.loader:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: #1c1632;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:after {
    position: absolute;
    content: '';
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #fff;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    -o-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/*/ Here the Magic /*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
    left: -100%;
}

.loaded .loder-section.right-section {
    right: -100%;
}

.loaded .loader-wrapper {
    visibility: hidden;
}

.loaded .loader {
    top: -100%;
    opacity: 0;
}




/* active menu */
.solar-menu ul li a.active {
    color: #e63a27;
}



/* 21 services section */
.about-feature-section {
    padding-top: 30px;
    padding-bottom: 80px;
    background: #f5f5f5;
}

/* layout */
.about-feature-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

/* left image */
.about-feature-image {
    width: 50%;
}

.about-feature-image img {
    width: 100%;
    border-radius: 6px;
    box-shadow: rgba(196, 5, 5, 0.2) 0px 7px 29px 0px;
    transition: transform 0.4s ease;

}

/* right content */
.about-feature-content {
    width: 50%;

}

.about-feature-content h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #202020;
}

/* points list */
.feature-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-points li {
    font-size: 16px;
    color: #555;
    padding-left: 28px;
    margin-bottom: 14px;
    position: relative;
    line-height: 1.6;
}

/* custom bullet  ◆ ◇ ⋄ ■ □ ▪*/
.feature-points li::before {
    content: "◈";
    position: absolute;
    left: 0;
    top: 0;
    color: #e63a27;
    font-size: 16px;
    font-weight: 600;
}

.service-section-title {
    text-align: center;
    color: #e63a27;
    padding-bottom: 30px;
    text-transform: uppercase;

}

/* mobile responsive */
@media (max-width: 900px) {

    .about-feature-wrap {
        flex-direction: column;
        /* image top, content bottom */
        gap: 30px;
    }

    .about-feature-image,
    .about-feature-content {
        width: 100%;
    }

    .about-feature-content h2 {
        font-size: 26px;
        text-align: left;
    }

    .feature-points li {
        font-size: 15px;
    }
    .service-section-title {
    font-size: 22px;

}
}

.about-feature-image-two-image {
    width: 80%;
    position: relative;


}

@media (min-width: 900px) {

    .about-feature-image-two-image {
        width: 50%;
        position: relative;

    }

    .about-feature-image-two-image img:first-child {
        width: 100%;
        border-radius: 6px;
        transition: transform 0.4s ease;
    }

    .about-feature-image-two-image img:last-child {
        width: 55%;
        position: absolute;
        bottom: -60px;
        right: -30px;
        border-radius: 6px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        background: #fff;
        transition: transform 0.4s ease;

    }
}

.about-feature-image-two-image img:first-child {
    width: 100%;
    border-radius: 6px;
    box-shadow: rgba(196, 5, 5, 0.2) 0px 7px 29px 0px;
    transition: transform 0.4s ease;
}

.about-feature-image-two-image img:last-child {
    width: 55%;
    position: absolute;
    bottom: -20px;
    right: -30px;
    border-radius: 6px;
    box-shadow: rgba(196, 5, 5, 0.2) 0px 7px 29px 0px;
    background: #fff;
    transition: transform 0.4s ease;

}

.about-feature-image-three-image {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

/* first image – full width on top */
.about-feature-image-three-image img:first-child {
    grid-column: 1 / -1;
    max-height: 190px;
    object-fit: cover;

}


/* images common */
.about-feature-image-three-image img {
    width: 100%;
    max-height: 150px;
    display: block;
    border-radius: 10px;
    border: 1px solid rgb(185, 185, 185);
    box-shadow: rgba(254, 153, 153, 0.2) 0px 7px 29px 0px;
    transition: transform 0.4s ease;
}

@media (min-width: 900px) {

    .about-feature-image-three-image {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    /* first image – full width on top */
    .about-feature-image-three-image img:first-child {
        grid-column: 1 / -1;
        max-height: 220px;
        object-fit: cover;

    }

    .about-feature-image-three-image img {
        width: 100%;
        max-height: 220px;
        display: block;
        border-radius: 10px;
        border: 1px solid rgb(185, 185, 185);
        box-shadow: rgba(254, 153, 153, 0.2) 0px 7px 29px 0px;
        transition: transform 0.4s ease;
    }
}

/* fourth serivce image style */
.about-feature-image-four-image {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    /* left small | right big */
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;

}

/* common image style */
.about-feature-image-four-image img {
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    /* rounded like image */
    display: block;
    transition: transform 0.4s ease;
}

/* right big image */
.about-feature-image-four-image img:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* full height */
}

/* hover zoom */
.about-feature-image-four-image img:hover {
    transform: scale(1.04);
}

.about-feature-image img:hover {
    transform: scale(1.04);
}

.about-feature-image-two-image img:hover {
    transform: scale(1.04);
}

.about-feature-image-three-image img:hover {
    transform: scale(1.04);
}

/* -----------------tekala service style------------------ */
.tekla-content.two-column {
    column-count: 2;
    column-gap: 40px;
}

/* Two-column list */
.tekla-content.two-column {
    column-count: 2;
    column-gap: 40px;
}


/* Bottom images wrapper */
.bottom-image-wrap {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Individual image */
.bottom-image-tekla img {
    width: 100%;
    max-width: 320px;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

/* Mobile view */
@media (max-width: 768px) {
    .tekla-content.two-column {
        column-count: 1;
    }

    .bottom-image-tekla img {
        max-width: 100%;
        height: 200px;
    }
}

/* --------------------- erection service style------------------------ */

.erection-list.two-column {
    column-count: 2;
    column-gap: 40px;
}

.bottom-image-erection {
    margin-top: 40px;
    text-align: center;
}

.bottom-image-erection img {
    width: 100%;
    max-width: 700px;
    max-height: 350px;
    object-fit: cover;
    border-radius: 12px;
}
.erection-list.two-column {
    column-count: 2;
    column-gap: 40px;
}
@media (max-width: 768px) {
    .erection-list.two-column {
        column-count: 1;
    }

    .bottom-image-erection img {
        max-height: 250px;
    }
}

/* computer programming service style */
.computer-program-image img{
    max-height: 400px;
}
/* ---------------- company profile ---------------------- */
.about-banner-inner img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 7px;
    filter: brightness(40%);
}

.about-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.about-img img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.about-img img:hover {
    transform: scale(1.03);
    transition: 0.3s ease;
}


/* Third image full width */
.about-img.full-width {
    grid-column: span 2;
}

@media (max-width: 991px) {
    .about-img img {
        height: 200px;
    }


}

.stats-section {
    background: #b72b1e;
    padding: 60px 0;
}

/* TOP BOX */
.stats-top {
    background: #fff;
    border-radius: 60px;
    padding: 30px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    border: 4px solid #000;
    margin-bottom: 40px;
}

.stat-item h2 {
    color: #e63a27;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 5px;
}

.stat-item p {
    color: #e63a27;
    font-size: 18px;
    font-weight: 500;
}

/* BOTTOM BOXES */
.stats-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.info-box {
    border: 3px solid #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #fff;
}

.info-box h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    color: rgb(232, 232, 232);
}

.info-box p {
    font-size: 18px;
    margin: 0;
}

/* Full width last box */

@media (max-width: 768px) {
    .stat-item h2 {
        color: #e63a27;
        font-size: 25px;
        font-weight: 400;
        margin-bottom: 5px;
    }

    .stat-item p {
        color: #e63a27;
        font-size: 16px;
        font-weight: 300;
    }

    .stats-top {
        padding: 15px 7px;
    }

    .stats-bottom {
        grid-template-columns: 1fr;
    }

    .info-box.full {
        grid-column: span 1;
    }
}

/* --------------------gallery------------------ */
.project-grid-section-gallery {
    padding: 40px 20px;
}

.protfolio-menu-gallery ul {
    list-style: none;
}

.protfolio-menu-gallery ul li {
    display: inline-block;
    padding: 6px 10px;
    font-size: 18px;
    color: #ffffff;
    background: #1c1632;
    font-weight: 500;
    margin: 6px;
    border-radius: 5px;
    cursor: pointer;
}
.protfolio-menu-gallery ul li:hover {
    background: #e63a27;
}

.protfolio-menu-gallery ul li.current_menu_item {
    position: relative;
    color: #ffffff;
    z-index: 1;
}

.protfolio-menu-gallery ul li.current_menu_item::before {
    position: absolute;
    content: "";
    background: #e63a27;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transform: scale(0);
    border-radius: 5px;
    z-index: -1;
    transition: .5s;
}

.protfolio-menu-gallery ul li.current_menu_item:hover::before {
    transform: scale(1);
}
.protfolio-menu-gallery ul li.current_menu_item {
    background: #e63a27; 
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 42, 104, 0.35);
}

/* project grid box */

.project-thumb-gallery img {
    width: 100%;
    height: 200px;

}

.project-content-gallery {
    background: #e63a27;
    padding: 15px 10px 15px;
    border-radius: 5px;
    position: relative;
    z-index: 1;

}

.project-content-gallery::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e63a27;
    border-radius: 5px;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
}

/* .project-grid-box-gallery:hover .project-content-gallery::before{
    transform: scale(1);
} */

.project-grid-box-gallery {
    border-radius: 50px 10px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.project-thumb-gallery img {
    height: 200px;
    object-fit: cover;
    display: block;
}

.project-content-gallery {
    background: #e63a27;
    padding: 15px 10px;
    text-align: center;
}

/* TITLE */
.project-content-gallery h4 {
    font-size: 18px;
    color: #e2e2e2;
    font-weight: 400;
    margin: 0;
}

.project-content-gallery span {
    font-size: 16px;
    line-height: 30px;
    color: #dddddd;
    font-weight: 400;
}

/* ------------------------ vision mission value section start ---------------------------- */

/* SECTION */
.vmv-section {
    padding-top: 50px;
}

/* WRAPPER */
.vmv-wrapper {
    position: relative;
    text-align: center;
}

/* ICON */
.vmv-icon {
    width: 70px;
    height: 70px;
    background: #1c1632;
    color: #ffffff;
    font-size: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto -35px;
    z-index: 2;
    position: relative;
    transition: all 0.4s ease;
    border: 1px solid white;
}

/* CARD */
.vmv-box {
    
    padding: 50px 30px 35px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    background: #1c1632;
    
}

/* HOVER */
.vmv-wrapper:hover .vmv-box {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.15);
    
    border: 1px solid white;
    
}

.vmv-wrapper:hover .vmv-icon {
    background: #e63a27;
    border: 1px solid white;
    transform: scale(1.1);
    
}

/* TITLE */
.vmv-box h3 {
    color: white;
    font-weight: 700;
    margin-bottom: 15px;
}



/* TEXT */
.vmv-box p,
.vmv-box ul li {
    color: #a6a6a6;
    line-height: 1.7;
    font-size: 15px;
}

.vmv-box ul {
    padding-left: 18px;
    text-align: left;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .vmv-icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
        margin-bottom: -30px;
    }

    .vmv-box {
        padding: 45px 25px 30px;
    }
}

.vmv-btn {
    background: #e63a27;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 30px;
    cursor: pointer;
}

.vmv-detail-section {
    padding: 60px 0;
    background: #fafafa;
}

.vmv-img {
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    width: 90%;
    height: 250px;
    background-size: cover;
}

.vmv-detail-section h2 {
    color: #1c1632;
    margin-bottom: 20px;
}

.vmv-detail-section p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* ---------------------career page style------------------ */

/* WHY CHOOSE US */
.career-why {
    padding: 50px 0;
}

.career-why h2 {
    color: #1c1632;
    font-weight: 700;
    padding-bottom: 10px;
}
.career-points {
    list-style: none;
    padding-left: 0;
}

.career-points li {
    position: relative;
    padding-left: 22px;  
    margin-bottom: 10px;
    color: #555;
    line-height: 1.6;
}
/* custom bullet  ◆ ◇ ⋄ ■ □ ▪*/
.career-points li::before {
    content: "◈";
    position: absolute;
    left: 0;
    top: 4px;  
    color: #e63a27;
    font-size: 14px;
}


.career-img {
    border-radius: 12px;
}

/* OPENINGS */
.section-title-career h2{
    padding-bottom: 10px;
    color: #1c1632;
}
.career-openings {
    background: #f7f7f7;
    padding: 30px 0;
}

.opening-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    height: 100%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.opening-box:hover {
    transform: translateY(-8px);
}

.opening-box h4 {
    color: #e63a27;
    margin-bottom: 10px;
}

/* FORM */
.career-form-section {
    padding: 70px 0;
}

.career-form-box {
    background: #1c1632;
    padding: 40px;
    border-radius: 15px;
    color: #fff;
}

.career-form-box h2 {
    color: #fff;
}

.career-form-box .form-control {
    border-radius: 8px;
    padding: 12px;
}

.career-btn {
    background: #e63a27;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    border: none;
}
/* service section travelling grate */


/* ===============================
   Travelling Grate – 3 Image Layout
================================= */
		.service-section-title {
			text-align: center;
			color: #e63a27;
			text-transform: uppercase;
			padding: 30px 20px 30px;
			/* top | left-right | bottom */

		}

		/* points list */
		.feature-points {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.feature-points li {
			font-size: 16px;
			color: #030303;
			padding-left: 28px;
			margin-bottom: 14px;
			position: relative;
			line-height: 1.6;
		}

		/* custom bullet  ◆ ◇ ⋄ ■ □ ▪*/
		.feature-points li::before {
			content: "◈";
			position: absolute;
			left: 0;
			top: 0;
			color: #e63a27;
			font-size: 16px;
			font-weight: 600;
		}

		.tg-feature-wrap {
			display: flex;
			align-items: center;
			gap: 50px;
		}

		/* LEFT IMAGE CONTAINER */
		.tg-image-box {
			position: relative;
			width: 50%;
			min-height: 360px;
		}

		/* COMMON IMAGE STYLE */
		.tg-img {
			position: absolute;
			width: 260px;
			border-radius: 10px;
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
			object-fit: cover;
		}

		/* IMAGE POSITIONS */
		.tg-img-1 {
			top: 0;
			left: 0;
			z-index: 1;
		}

		.tg-img-2 {
			top: 70px;
			left: 130px;
			z-index: 2;
		}

		.tg-img-3 {
			top: 160px;
			left: 40px;
			z-index: 3;
		}

		/* RIGHT CONTENT */
		.tg-content-box {
			width: 50%;
		}

		/* RESPONSIVE */
		@media (max-width: 991px) {
			.tg-feature-wrap {
				flex-direction: column;
			}

			.tg-image-box {
				width: 100%;
				min-height: 420px;
			}

			.tg-content-box {
				width: 100%;
			}

			.tg-img {
				position: relative;
				width: 100%;
				margin-bottom: 15px;
				left: 0;
				top: 0;
			}
		}