/*===============================================
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: 18px 0;
    background: #19142d;
}

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

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

.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:#37AC8A;
    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: #37AC8A;
}


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


.solar-header-section {
    background: #1C1632;
    position: relative; 
    z-index: 999;
}

.solar-header-section::before {
    position: absolute;
    content: "";
    height: 15%;
    width: 215%;
    bottom: 0%;
    left: -145%;
    background: #37AC8A;
    transform: skew(-30deg, 0deg);
    z-index: -1;
}
.solar-header-section::after {  
    position: absolute;
    content: "";    
    height: 15%;
    width: 215%;
    top: 0%;
    right: -180%;
    background: #37AC8A;        
    transform: skew(30deg, 0deg);
    z-index: -1;
}
.menubar::before{
    position: absolute;
    content: "";
    height: 101%;
    width: 215%;
    top: 0%;
    left: -185%;
    background: white;
    transform: skew(-30deg, 0deg);
    z-index: -1;
   
    
}
    .solar-menu {
        text-align: right;
        Width: 100%,
    }

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

.solar-menu ul li {
    display: inline;
    margin-right: 18px;
}
.solar-menu ul li a {
    display: inline;
    color: white;
    font-size: 17px;
    font-weight: 500;
    padding: 38px 0;
    text-decoration: none;
    transition: .5s;
}
.experience-box {
    background: linear-gradient(135deg, #42426e, #141422); 
    color: white;
    font-size: 1.5rem; 
    border-radius: 10px; 
    height: 170px;
    padding-top: 2px;
    width: 210px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.left-text span {
    font-size: 2.5rem; 
    font-weight: bold;
    display: block;
    padding-bottom: 2px;
    margin-top: 5px;
}


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

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

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

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

.solar-social-menu ul li {
    display: inline;
    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: #37AC8A;
    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:  #1C1632!important;
    z-index: 9999 !important;
    animation-name: slideInDown;
    padding: 2 30px;
  }

/* sub menu area css */
.solar-menu ul .sub-menu {
    background: #fff;

    position: absolute;
    top: 125%;
    border-radius: 5px;
    width: 300px;
    text-align: left;
    margin: 0;
    -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #37AC8A;
    opacity: 0;
    z-index: 11;
    right: 100px;
  }
  .solar-menu ul .sub-menu ul li {
    position: relative; /* Make sure the sub-grandchildmenu is positioned relative to its parent */
    display: inline-block;
    margin-left: 0;
    width: 100%;
}

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

.solar-menu ul .sub-menu ul li a:hover {
    background: #37AC8A !important;
    color: #fff;
}

.solar-menu ul li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    top: 99%;
}
.solar-menu ul .sub-grandchildmenu {
    display: none; /* Initially hidden */
    position: absolute;
    top: 0;
    right: 100%; /* Position to the left of the parent menu item */
    background-color: #37AC8A;
    min-width: 270px; /* Adjust width as needed */
    z-index: 1000;
}

.solar-menu ul .sub-grandchildmenu ul {
    padding: 0;
    margin: 0;
}

.solar-menu ul .sub-grandchildmenu ul li {
    display: block;
    width: 100%;
}

.solar-menu ul .sub-grandchildmenu ul li a {
    padding: 12px 20px;
    background-color: #03422f;
    color: white;
}

.solar-menu ul .sub-grandchildmenu ul li a:hover {
    background: #040725 !important;
    color: #fff;
}

/* Show the sub-grandchildmenu on hover */
.solar-menu ul .sub-menu ul li:hover .sub-grandchildmenu {
    display: block;
}

/* Show the sub-grandchildmenu on hover */
.solar-menu ul .sub-menu ul li:hover .sub-grandchildmenu {
    display: block;
}


/* header style two */

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

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

/* logo style two */
/* Default logo style */
.logo img {
    width: 100%; 
    max-width: 240px; 
    height: 60px;
}

/* Style for smaller screens */
@media (max-width: 768px) {
    .logo img {
        max-width: 150px; /* Adjust this as needed */
    }
}

/* Style for very small screens */
@media (max-width: 480px) {
    .logo img {
        max-width: 100px; /* Adjust this as needed */
    }
}






/* 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: #37AC8A;
    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:#37AC8A;
}

.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: #37AC8A;
}

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

.slider-content {
    position: relative;
    overflow: hidden;
  }
  @media only screen and (max-width: 767px) {
    .slider-content h3.custom-animation {
      font-size: 14px; /* Adjust the font size as per your preference */
    }
  }
  
  
  
  /* Custom CSS for h3 text background */
h3.custom-animation {
    position: relative;
    display: inline-block;
    padding: 15px 20px; /* Adjust padding as needed */
    background: linear-gradient(to right, #37AC8A, #1c1632); /* Gradient background color */
    color: #fff; /* Text color */
    border-radius: 30px; /* Rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Box shadow */
    font-size: 1.2rem; /* Adjust font size as needed */
    font-weight: bold; /* Bold font */
    text-transform: uppercase; /* Uppercase text */
    animation: gradientChange 15s infinite alternate; /* Animation effect */
}

/* Keyframes for gradient change animation */
@keyframes gradientChange {
    0% {
        background: linear-gradient(to right, #37AC8A,#24347A); /* Initial gradient */
    }
    100% {
        background: linear-gradient(to right,  #24347A,#37AC8A); /* Final gradient */
    }
}

/* Positioning the h3 text in the right corner */

h3.custom-animation::before {
    content: '';
    position: absolute;
    top: -15px; /* Adjust as needed */
    right: -15px; /* Adjust as needed */
    width: 30px; /* Adjust as needed */
    height: 30px; /* Adjust as needed */
    background-color:  #37AC8A; /* Triangle color */
    clip-path: polygon(100% 0, 0 100%, 100% 100%); /* Triangle shape */
    box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.3); /* Box shadow */
}

  .custom-animation {
    position: relative;
    display: inline-block;
    color: #333;
    font-size: 24px;
    font-family: Arial, sans-serif; /* Specify font-family as needed */
  }

  .custom-animation::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #00bfff; /* Waterdrop color */
    border-radius: 50%;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    animation: waterdrop 0.5s infinite ease-in-out alternate;
    z-index: -1; /* Ensure waterdrop is behind text */
  }

  @keyframes waterdrop {
    0% {
      transform: translateY(-50%) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateY(100%) scale(0.2);
      opacity: 0;
    }
  }.slider-section {
    height: 800px;
    position: relative;
}

.slider-section.style-one {
    background: url(../images/resource/resize.jpg) no-repeat center/cover;
}

.slider-section.style-two {
    background: url(../images/resource/green.jpg) no-repeat center/cover;
}


.slider-section.style-three {
    background: url(../images/slider/slide4.jpg) no-repeat center/cover;
}

.slider-section.style-four {
    background: url(../images/resource/2.jpg) no-repeat center/cover;
}

h3 {
    color: rgb(20, 23, 56);
    background-color: transparent;
}
.slider-container {
    text-align: center;
}


.slider-content {
    text-align: center; /* Center-align the text */
    position: absolute; /* Position the content absolutely within its container */
    top: 40%; /* Move the content down by 50% of the container's height */
    left: 50%; /* Move the content right by 50% of the container's width */
    transform: translate(-50%, -50%); /* Center the content horizontally and vertically */
    width: 100%; /* Ensure the content takes up the full width of its container */
}

.service-icon-thumb img {
    width: 80%;
    height: auto; 
}


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

.slider-content h1 {
    font-size: 75px;
    line-height: 72px;
    color: #ffffff;
    font-weight: 600;
}

.slider-content p {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    width: 53%;
    margin: 37px 0 50px;
}
.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: #37AC8A;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    color: #1c1632;
    font-size: 24px;
    transition: .5s;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

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

 .owl-prev i::after{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    right: 0;
    bottom: 0;
    background: #1c1632;
    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: #1c1632;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    color: #37AC8A;
    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: #37AC8A;
    transform: scale(0);
    border-radius: 50%;
    z-index: -1;
    transition: .5s;
}

.owl-next i:hover::after{
    transform:scale(1);
}
.widget-categories-menu ul li.active {
    background-color: #1c1632; 
    color: white; 
}

.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;
}


/* Define the keyframes for the text animation */
@keyframes textFade {
    0% {
        opacity: 0; /* Start with the text fully transparent */
    }
    50% {
        opacity: 1; /* Text fully visible */
    }
    100% {
        opacity: 0; /* Text fully transparent again */
    }
}

/* Apply the animation to h3 elements */
.slider-section .slider-content h3.custom-animation {
    animation: textFade 8s infinite; /* Apply the textFade animation infinitely */
}

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

.container .card
{
    max-width: 300px;
    height: 410px;
    margin: 30px 10px;
    padding: 30px 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    transition: 0.3s ease-in-out;
    background-color: #e9f0f0;
}

.container .card .imgContainer
{
    position: relative;
    width:250px;
    top:-50px;
    left:10px;
    z-index: 1;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.container .card .imgContainer img
{
    max-width: 100%;
    height: 240px;
    border-radius: 4px;
}
.container .card .content
{
    position: relative;
    margin-top: -40px;
    padding: 20px 15px;
    text-align: center;
    color:#111;
    pointer-events: none;
    
}



@media (max-width: 330px){
    .container .card .imgContainer{
        left: -2px;
    }
}
/*==================================================
 <-- Solar Panel  About Section Css-->
===================================================*/

  
  .section-title {
    margin-bottom: 20px; 
  }
  
  .section-sub-title.choose h4 {
    font-size: 2rem; 
    font-weight: bold;
  }
  
  .choose-us-description p {
    font-size: 1rem;
    color: #333; 
    line-height: 1.6; 
  }
  

.about-section {
    padding: 30px 0 30px;
}
.about-thumb {
    position: relative;
    width: 100%;
    height: 100%;
  
}

.about-thumb img {
    width: 100%;
    height: 95%;
    display: block;
    transition: opacity 0.5s ease-in-out;
}

.slide-hidden {
    opacity: 0;
}


.about-counter {
    position: absolute;
    background: #1c1632;
    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 rgb(57, 109, 206);
    border-radius: 3px;
    width: 325px;
    height: 125px;
}

.about-counter-img {
    margin-right: 34px;
    margin-top: 9px;
}
.about-counter-img img {
    width: 57px; /* You can adjust the width as per your requirement */
    height: auto; /* This ensures the aspect ratio is maintained */
}
.about-list img {
    width: 140px; 
    height: auto; 
}

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

.about-number-two span {
    font-size: 36px;
    color: #1c1632;
    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: #37AC8A;
    top: 6px;
    right: 0;
}

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

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

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

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

.about-list {
    margin-bottom: 40px;
}

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


.about-list ul li i {
    color: #37AC8A;
    margin-right: 7px;
}
.about1-list {
    margin-bottom: 10px;
}

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


.about1-list ul li i {
    color: #e9f0ee;
    margin-right: 7px;
}
.certification-heading {
    color: #ffffff; /* Text color */
    font-weight: 700; /* Bolder text */
    height: 30px;
    text-transform: uppercase; /* Keep uppercase */
    padding: 20px; /* Increase padding for more space */
    background: linear-gradient(135deg, #0f0b1f, #674fb4); /* Gradient background for a modern effect */
    border-left: 6px solid #1c1632; /* Slightly thicker left border */
    font-family: 'Roboto', sans-serif; /* Keep font */
    letter-spacing: 1.8px; /* Increase letter spacing */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow for more depth */
    border-radius: 12px; /* Increase border radius for smoother corners */
    margin-bottom: 20px; /* Add margin for spacing */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.certification-heading::after {
    content: '✔'; /* Add a checkmark icon */
    font-size: 24px; /* Size of the icon */
    color: #4b4268; /* Color matching the gradient */
    margin-left: 10px; /* Space between text and icon */
}


.arrow-bullets {
    list-style: none;
    padding-left: 0px;
    font-family: 'Arial', sans-serif;

    
}

.arrow-bullets li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;

}

.arrow-bullets li:before {
    content: '\2192'; 
    position: absolute;
    left: 0;
    top: 0;
    color: white; 
    font-weight: bold;
}

.detail{
    padding: 10px;

}

/* about tab css */
.carousel-inner,.carousel,.item,.container,.fill {
    height:100%;
    width:100%;
    background-position:center center;
    background-size:cover;
      }
  .slide-wrapper{display:inline;}
  .slide-wrapper .container{padding:0px;}
  
  /*------------------------------ vertical bootstrap slider----------------------------*/
  
  .carousel-inner> .item.next ,  .carousel-inner > .item.active.right{ transform: translateY(100%); -webkit-transform: translateY(100%); -ms-transform: translateY(100%);
  -moz-transform: translateY(100%); -o-transform: translateY(100%);  top: 0;left:0;}
  .carousel-inner > .item.prev ,.carousel-inner > .item.active.left{ transform: translateY(-100%); -webkit-transform: translateY(-100%);  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%); -o-transform: translateY(-100%); top: 0; left:0;}
  .carousel-inner > .item.next.left , .carousel-inner > .item.prev.right , .carousel-inner > .item.active{transform:translateY(0); -webkit-transform:translateY(0);
  -ms-transform:translateY(0);-moz-transform:translateY(0); -o-transform:translateY(0); top:0; left:0;}
  
  /*------------------------------- vertical carousel indicators ------------------------------*/
  .carousel-indicators{
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  height:20px;
  right:10px; left:auto;
  width:auto;
  }
  .carousel-indicators li{display:block; margin-bottom:5px; border:1px solid #00a199; }
  .carousel-indicators li.active{margin-bottom:5px; background:#00a199;}
  /*-------- Animation slider ------*/
  
  .animated{
      animation-duration:1.5s;
      -webkit-animation-duration:1.5s;
      -moz-animation-duration:1.5s;
      -ms-animation-duration:1.5s;
      -o-animation-duration:1.5s;
      visibility:visible;
      opacity:1;
      transition:all 0.3s ease;
  }
  .carousel-img{   
       display: inline-block;
      margin: 0 auto;
      width: 100%;
      text-align: center;
      }
  .item img{margin:auto;visibility:hidden; opacity:0; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease;}
  .item1 .carousel-img img , .item1.active .carousel-img img{max-height:300px;}
  .item1.active .carousel-img img.animated{visibility:visible; opacity:1; transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease;
  animation-duration:0.5s; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; -ms-animation-duration:0.5s; -o-animation-duration:0.5s; animation-delay:0.3s ; -webkit-animation-delay:0.3s;
  -moz-animation-delay:0.3s;-ms-animation-delay:0.3s; }
  .item .carousel-desc{color:#fff; text-align:center;}
  .item  h2{font-size:50px; animation-delay:1.5s;animation-duration:1s; }
  .item  p{animation-delay:2.5s;animation-duration:1s; width:50%; margin:auto;}
  
  .item2 .carousel-img img , .item2.active .carousel-img img{max-height:300px;}
  .item2.active .carousel-img img.animated{visibility:visible; opacity:1; transition:all 0.3s ease; animation-duration:1.5s; animation-delay:0.3s}
  .item2 h2 , item2.active h2{visibility:hidden; opacity:0; transition:all 5s ease;}
  .item2.active h2.animated{visibility:visible; opacity:1;  animation-delay:1.5s;}
  
  .item .fill{padding:0px 30px; display:table; }
  .item .inner-content{display: table-cell;vertical-align: middle;}
  .item3 .col-md-6{float:none; display:inline-block; vertical-align:middle; width:49%;}
  
  .item3.active .carousel-img img.animated{visibility:visible; opacity:1; transition:all 0.3s ease; animation-duration:0.5s; animation-delay:0.3s}
  .item3 h2 , item3.active h2{visibility:hidden; opacity:0; transition:all 5s ease; }
  .item.item3 .carousel-desc{text-align:left;}
  .item3.active h2.animated{visibility:visible; opacity:1;  animation-delay:1.5s}
  .item3 p , item3.active p{visibility:hidden; opacity:0; transition:all 5s ease; width:100%;  }
  .item3.active p.animated{visibility:visible; opacity:1;  animation-delay:2.5s;}
  
  @media(max-width:991px)
  {
      .item .carousel-desc , .item.item3 .carousel-desc{text-align:center;}
      .item .carousel-desc p {width:80%;}
      .item3 .col-md-6{width:100%; text-align:center;}
  }
  @media(max-width:768px)
  {
  .item .carousel-img img, .item.active .carousel-img img{max-height:155px;}
  .item  h2{font-size:30px; margin-top:0px;}
  .item .carousel-desc p{width:100%; font-size:12px;}
  }
  @media(max-width:480px)
  {
  .item  h2{font-size:30px;}
  .item .carousel-desc p{width:100%;}
  }

.tab ul {
    list-style: none;
}
/* For desktop view */
.detail h5 {
    font-size: 700; 
    text-align: justify;
}

/* For mobile view */
@media (max-width: 768px) {
    .detail h5 {
        font-size: 18px; /* Or any desired font size for mobile */
    }
}


.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: 40px;
}

.tab ul li.current a {
    background: #37AC8A !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: #37AC8A;
    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: #37AC8A;
    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 {
    background-color: rgb(252, 251, 251);
}

/*==================================================
 <-- Solar Panel  Section title Css-->
===================================================*/
.carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 20px;
}
.text-color {
    color: white;
}
.py-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
/*==================================================
 <-- 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: #37AC8A;
    left: 0;
    top: 19px;
}

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

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

.section-main-title h5 {
    padding: 0 70px 0;
}

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

.section-sub-title h4::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 35px;
    background: #37AC8A;
    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-->
===================================================*/


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

.service-content {
    background: url(../images/resource/g.jpg);
    background-repeat: no-repeat;
    padding: 0 34px 20px;
    position: relative;
    z-index: 1;
    margin: -90px 13px 23px;
}

.service-content::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 0%;
    background: url(../images/resource/gb.jpg);
    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 {
    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 img{
    filter: brightness(0)invert(1);
}

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

.service-text h4 {
    line-height: 24px;
    color: #1c1632;
    font-weight: 500;
}

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

.service-box:hover .service-text h4 {
    color: #37AC8A;
}
.service-box:hover .service-text p {
    color: white;
}

.service-text p {
    font-size: 16px;
    line-height: 24px;
    color: #1c1632;
    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:  white;
}

.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-->
===================================================*/

.contact-us-section {
    position: relative;
}

.contact-us-section::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: url(../images/resource/contact-us.png);
    background-repeat: no-repeat;
}

.row.contact-us {
    background: #1C1632;
    padding: 50px 0 50px;
}

.contact-us-discription p {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}



/*==================================================
 <-- 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: #37AC8A;
    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: #37AC8A;
    position: absolute;
    right: 37px;
    content: " ";
    top: 18px;
    transform: rotate(0deg);
    transition: all 0.0.5s ease-in-out;
}

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

.accordion a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.0.5s ease-in-out;
    transition: all 0.0.5s 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;
}
@media (max-width: 768px) {
    h2 {
        font-size: 20px;
        text-align: left;
        padding-left: 0;
        margin-left: 0;
    }
}


.pricing-box::before {
    position: absolute;
    content: "";
    height: 0%;
    width: 100%;
    background: #37AC8A;
    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: #37AC8A;
    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:#37AC8A;
}

.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:#37AC8A;
}
/*========================== What Makes us Special ====================*/
.blog-thumb.style-two img {
    width: 100%; /* Make the images fill their parent container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure proper alignment */
    margin-bottom: 20px; /* Add some spacing between images */
}

/* General styling */
.makesUs_special {
    background: url(../images/resource/black.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 620px;

}
.overlay {
    border-bottom: 2px solid #dcdbdf; /* Adjust the color and thickness as needed */
  }
.makesUs_special .overlay {
    width:100%;
    height:100%;
    padding: 114px 0 70px 0;
}

.makesUs_special .overlay .special_item {
    margin-top:43px;
}
.makesUs_special .overlay .special_item .text {
    margin-left:30px;
}
.makesUs_special .overlay h2,
.makesUs_special .overlay .special_item span,
.makesUs_special .overlay .special_item p {
    color:#fff;
}
.makesUs_special .overlay .special_item span {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 48px;
}
.makesUs_special .overlay .special_item p { 
    font-weight: 700;
    font-size: 18px;
    margin-top:-9px;
}
.makesUs_special .overlay .special_item .icon {
    margin-top:6px;
    
}
.makesUs_special .overlay .special_item .ficon:before {
    font-size: 60px;
}
.container3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust minmax value for item size */
    gap: 20px; /* Adjust the gap as needed */
}

.special_item1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon {
    text-align: center;
}

.product-image {
    max-width: 100%; /* Ensure image scales correctly */
    height: auto; /* Maintain aspect ratio */
}



@media only screen and (max-width: 768px) {
    .makesUs_special {
        height: auto;
        margin: 50px 0;
    }
    .makesUs_special .overlay {
        padding: 50px 0;
    }
    .makesUs_special .overlay .special_item {
        margin-top: 30px;
    }
    .makesUs_special .overlay .special_item .text {
        margin-left: 0;
        text-align: center;
        font-size: 30px
    }
    .makesUs_special .overlay .special_item .icon {
        text-align: center;
    }
    .makesUs_special .overlay .special_item .icon img {
        width: 70px;
        border: 2px solid white;
        border-radius: 5%;
    }
}


/* General styling */
.makesUs {
    background: url(../images/external/style-rawpixel-bg.jpg)
    no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 480px;
}
.makesUs .overlay {
    width:100%;
    height:100%;
}
.makesUs .overlay .special_item {
    margin-top:43px;
}
.makesUs .overlay .special_item .text {
    margin-left:30px;
}
.makesUs .overlay h2,
.makesUs.overlay .special_item span,
.makesUs.overlay .special_item p {
    color: black;
}
.makesUs .overlay .special_item span {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 35px;
    color:rgb(35, 110, 81)
}
.makesUs .overlay .special_item p { 
    font-weight: 700;
    font-size: 18px;
    margin-top:-9px;
}
.makesUs.overlay .special_item .icon {
    margin-top:6px;
    
}
.makesUs .overlay .special_item .ficon:before {
    font-size: 60px;
}


@media only screen and (max-width: 768px) {
    .makesUs {
        height: auto;
        margin: 50px 0;
    }
    .makesUs .overlay {
        padding: 50px 0;
    }
    .makesUs .overlay .special_item {
        margin-top: 30px;
    }
    .makesUs .overlay .special_item .text {
        margin-left: 0;
        text-align: center;
        font-size: 30px
    }
    .makesUs .overlay .special_item .icon {
        text-align: center;
    }
    .makesUs .overlay .special_item .icon img {
        width: 70px;
        border: 2px solid white;
        border-radius: 5%;
    }
}


/* General styling */
.makesUs1 {
    background-size: cover;
    background-attachment: fixed;
}
.makesUs1 .overlay {
    background:white;
    color: #fff;
}
.makesUs1 .theme_title h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: #091242;
    font-size: 2.5em;
    text-transform: uppercase;
}
.makesUs1 .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.makesUs1 .special_item {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 30px;    
    width: 100%;
    height: 250px; /* Set a fixed height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.makesUs1 .special_item:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.makesUs1 .special_item .icon {
    margin-bottom: 15px;
}
.makesUs1 .special_item .card-icon {
    width: 80px;
    border-radius: 10%;
}
.makesUs1 .special_item .text {
    font-size: 14px;
}
.makesUs1 .special_item h3 {
    color: #333;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}
.makesUs1 .special_item span {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: #1e7e34;
}


/* Responsive */
@media only screen and (max-width: 768px) {
    .makesUs1 .theme_title h2 {
        font-size: 2em;
    }
    .makesUs1 .special_item {
        padding: 15px;
        max-width: 100%;
        height: auto;
    }
    .makesUs1 .special_item .card-icon {
        width: 60px;
    }
    .makesUs .special_item .text {
        font-size: 12px;
    }
    .makesUs1 .special_item h3 {
        font-size: 16px;
    }
 
}


 

/*==================================================
 <-- Solar Panel  Call Do Section Css-->
===================================================*/
.call-do-action-section {
    padding: 120px 0 120px;
    background: url(../images/resource/Anugraha.jpg) no-repeat center center;
    background-size: cover;
    height: 800px;
    margin-bottom: -330px;
}

@media (max-width: 768px) {
    .call-do-action-section {
        padding: 60px 0 60px;
        height: 400px;
        margin-bottom: -165px;
    }
}

@media (max-width: 480px) {
    .call-do-action-section {
        padding: 40px 0 40px;
        height: 300px;
        margin-bottom: -120px;
    }
}


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

.video-icon a {
    height: 105px;
    width: 105px;
    background: #37AC8A;
    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 2px;
}

.row.choose {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px 30px 10px;
    border-radius: 3px;
    background-color:white;
}
.choose-us-discription p {
    font-size: 18px;
    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: #37AC8A;
    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: #37AC8A;
    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;
}
.bullets {
    list-style: none; /* Remove default bullets */
    padding-left: 0; /* Remove left padding */
    margin: 20px 0; /* Add some margin */
}

.bullets li {
    position: relative;
    padding-left: 30px; /* Space for custom bullet */
    margin-bottom: 10px; /* Spacing between items */
    font-size: 16px; /* Adjust font size */
    color: #333; /* Text color */
    font-weight: 500; /* Slightly bold text */
    line-height: 1.6; /* Increase line spacing */
}

.bullets li::before {
    content: ''; /* Empty content for custom bullet */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Center bullet vertically */
    width: 10px;
    height: 10px;
    background-color: white; /* Bullet color */
    border-radius: 50%; /* Round bullet */
    box-shadow: 0 0 5px rgba(0, 128, 0, 0.5); /* Add a subtle shadow */
}



/* choose form box */

.choose-contact-box {
    background: #1C1632 ;
    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: #37AC8A;
}

.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:#37AC8A ;
}

.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: #37AC8A;
}

.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: #37AC8A;
}

.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: #37AC8A;
}

/* 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-section {
    padding: 106px 0 286px;
    background: #f6f6f6;
    margin-bottom: -200px;
}

.team-items-box {
    margin-bottom: 127px;
}

.team-thumb {
    position: relative;
}

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

.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: #37AC8A;
    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: #37AC8A;
    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: #37AC8A;
    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: #37AC8A;
}

.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 #37AC8A;
    z-index: 1;
}

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

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

.team-content h4 a {
    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: #37AC8A;
    opacity: 1;
}

/* team style two css */

.team-section.style-two {
    padding: 102px 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;
   background-color: rgb(238, 232, 232);
}

.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: #37AC8A;
    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: #37AC8A;
    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: #37AC8A;
}

.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: #37AC8A;
}

.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: 18px 0 50px;
}
@media only screen and (max-width: 600px) {
    .section-main-title h5 {
      font-size: 14px; 
      padding: 0;
      text-align: left;
      line-height: 0.5; 
    }
  }
  

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

.subscribe-section {
    background: #37AC8A;
    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: #1c1632;
    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-section {
    background: #0a0716;
    padding: 40px 0;
    color: #fff;
}

.footer-widget {
    margin-bottom: 20px;
}

.footer-widget-logo img {
    max-width: 80%;
    height: auto;
    margin: 2px;
}

.footer-widget-title h4 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #fff;
    text-transform: uppercase;
}

.footer-widget-text p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 20px;
    color: #ccc;
}

.footer-widget-social ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
}

.footer-widget-social ul li a {
    color: #fff;
    font-size: 18px;
    transition: color 0.3s;
}

.footer-widget-social ul li a:hover {
    color: orange;
}

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

.footer-widget-menu ul li a {
    font-size: 14px;
    line-height: 24px;
    color: #ccc;
    text-decoration: none;
}

.footer-widget-menu ul li a:hover {
    color: orange;
}

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

.footer-widget-contact-menu ul li {
    font-size: 14px;
    line-height: 24px;
    color: #fff;
}

.footer-line {
    border-top: 1px solid #444;
    margin-top: 20px;
    padding-top: 20px;
}

.copyright-text p {
    margin: 0;
    font-size: 14px;
    color: #ccc;
}

.copyright-text p a {
    color: orange;
    text-decoration: none;
}

.footer-widget-title h4,
.footer-widget-contact-menu ul li {
    position: relative;
    padding-left: 20px;
}

.footer-widget-title h4::before,
.footer-widget-contact-menu ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: orange;
    border-radius: 50%;
}

.footer-widget-menu ul li a::before {
    content: '•';
    color: orange;
    padding-right: 5px;
}

@media (max-width: 768px) {
    .footer-widget {
        text-align: center;
    }
    .footer-widget-social ul {
        justify-content: center;
    }
    .footer-line {
        text-align: center;
    }
}


/*==================================================
 <-- 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: #37AC8A;
    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: #37AC8A;
    margin: 0 2px 0;
    font-size: 14px;
    opacity: 0.800;
}
.bottom-slider-section {
    cursor: pointer; /* Change cursor style to pointer */
}

/* 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 #37AC8A;
    border-radius: 50%;
    display: inline-block;
}

.testimonial-section .owl-dot.active {
    height: 14px;
    width: 14px;
    background: #37AC8A;
    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-->
===================================================*/
.breatcome-section {
    background: url(../images/resource/DJI_0843.jpg) no-repeat center center;
    background-size: cover;
    padding: 200px 0;
    height: auto; /* Default height is auto */
}
.breatcome-content h1,
.breatcome-content p {
    color:#1c1632;
}

.breatcome-content {
    padding: 20px 0;
}

@media (max-width: 768px) {
    .breatcome-content h1 {
        font-size: 24px;
    }

    .breatcome-content p {
        font-size: 16px;
    }
}


/* Mobile responsive styles */
@media (max-width: 768px) {
    .breatcome-section {
        background-position: top center; 
        padding: 100px 0; 
    }
}

@media (max-width: 480px) {
    .breatcome-section {
        background-position: top center; 
        padding: 50px 0;
    }
}

.breatcome4-section {
    background: url(../images/external/contact-bg.jpg) no-repeat center center;
    background-size: cover;
    padding: 200px 0;
    height: auto; 
}
@media (max-width: 767px) {
    .breatcome4-section {
        padding: 120px 120px; /* Add 'px' to the padding values */
        background-position: top center; 
    }
    .breatcome4-section img {
        max-width: 200%; /* Ensure images don't overflow their containers */
          background-position: center; 
    }
}

@media (max-width: 768px) {
    .breatcome-section {
        padding: 100px 0;
        height: 300px; /* Increase height for tablets */
    }
}

@media (max-width: 480px) {
    .breatcome-section {
        padding: 60px 0;
        height: 250px; /* Increase height for mobile devices */
    }
}

.breatcome1-section {
    background: url(../images/resource/green.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 200px 0;
}
.breatcome2-section {
    background: url(../images/resource/image-1920x413.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 200px 0;
}
.breatcome3-section {
    background: url(../images/about/MicrosoftTeams-image-13-jpg_cleanup\ \(1\).webp);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 200px 0;
}
@media (max-width: 767px) {
    .breatcome3-section {
        background-position: top center; 
    }
    .breatcome3-section img {
        max-width: 200%; 
          background-position: center; 
    }
}
.breatcomeinfra-section {
    background: url(../images/resource/infrastructure.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 200px 0;
}
@media (max-width: 767px) {
    .breatcomeinfra-section {
        padding: 120px 120px; /* Add 'px' to the padding values */
        background-position: top center; 
    }
    .breatcomeinfra-section img {
        max-width: 200%; /* Ensure images don't overflow their containers */
          background-position: center; 
    }
}
@media (max-width: 767px) {
    .breatcome2-section {
        padding: 120px 120px; /* Add 'px' to the padding values */
        max-width: 200%;
    }
    .breatcome2-section img {
        max-width: 200%; /* Ensure images don't overflow their containers */
    }
}

.breatPro-section {
    background: url(../images/product.jpeg) no-repeat center center;
    background-size: cover;
    padding: 200px 0;
    height: auto; /* Default height is auto */
    min-height: 400px; /* Ensure a minimum height */
}

@media (max-width: 768px) {
    .breatPro-section {
        padding: 100px 0;
        min-height: 350px; /* Adjust minimum height for tablets */
    }
}

@media (max-width: 480px) {
    .breatPro-section {
        padding: 60px 0;
        min-height: 300px; /* Adjust minimum height for mobile devices */
    }
}


.breatcome-content {
    position: relative;
}

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

.bratcome-text {
    position: absolute;
    right: 0;
    bottom: -149px;
    background:#37AC8A;
    padding: 23px 35px;
    border-radius: 5px 5px 0 0;
  
}

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

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

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

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

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

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

.breatcomeinfra-text {
    position: absolute;
    right: 0;
    bottom: -149px;
    background:#37AC8A;
    padding: 23px 35px;
    border-radius: 5px 5px 0 0;
  
}

.breatcomeinfra-text ul {
    list-style: none;
}

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

.breatcomeinfra-text ul li a {
    display: inline-block;
    font-size: 16px;
    color: white;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: .5s;
}

.breatcomeinfra-text ul li a:hover{
    color: #37AC8A;
}

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


/*==================================================
 <-- 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: #37AC8A;
    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: #37AC8A;
    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:#37AC8A;
    color: white;
    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:#37AC8A ;
}
.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:#37AC8A ;
}
.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: #37AC8A ;
    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: #37AC8A;
}

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


/*==================================================
 <-- 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: #37AC8A;
}

.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: #37AC8A;
}

.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: #37AC8A;
}

.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: #37AC8A;
    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: #37AC8A;
}


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


.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: #37AC8A;
    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%;
}

.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: #37AC8A;
    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  Contact Us Innerp Page Css-->
===================================================*/

.contact-section {
    padding: 118px 0 120px;
    background: #eaeaea;
}

.contact-sub-title h4 {
    font-size: 17px;
    color: #37AC8A;
    font-weight: 400;
}

.contact-main-title h2 {
    font-size: 40px;
    color: #0d1c37;
    font-weight: 700;
}

.contact-discription p {
    font-size: 15px;
    line-height: 46px;
    color: #383737;
    font-weight: 400;
    margin-bottom: 37px;
}

/* contact box item */

.contact-box-item {
    margin-bottom: 30px;
}

.contact-icon {
    float: left;
    margin-right: 22px;
    margin-top: -4px;
}

.contact-icon i {
    height: 60px;
    width: 60px;
    background: #292930;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 23px;
    position: relative;
    z-index: 1;
}

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

.contact-icon:hover i::after{
    transform: scale(1);
}   .contact-address {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: auto;
    font-family: Arial, sans-serif;
    margin-bottom: 20px;
}
.contact-address h5 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #333;
}
.contact-address ul {
    list-style: none;
    padding: 0;
}
.contact-address li {
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #555;
}
.contact-address li a {
    text-decoration: none;
    color: black;
    transition: color 0.3s;
}
.contact-address li a:hover {
    color: #0056b3;
}
.contact-address li::before {
    content: "\1F4CD"; /* Pin icon */
    margin-right: 8px;
    color: black;
}
.contact-info li::before {
    content: "\2709"; /* Envelope icon for email */
    margin-right: 8px;
    color: black;
}
.contact-info li:nth-child(2)::before {
    content: "\1F4DE"; /* Telephone icon for phone */
}
.contact-info li:nth-child(3)::before {
    content: "\1F4E0"; /* Fax icon for fax */
}
.contact-info li {
    color: black;
}
.contact-address li:last-child::before {
    content: "\1F6C8"; /* Info icon */
}
.email-us {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: auto;
    font-family: Arial, sans-serif;
    margin-top: 20px;
}
.email-us span {
    font-size: 1.1em;
    color: #555;
    display: block;
    margin-top: 10px;
}
/* contact-box */

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

.form-box.contact-inner select {
    width: 100%;
}

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

.form-box-button.contact-inner button {
    width: 165px;
    height: 50px;
    border-radius: 4px;
}


/*==================================================
 <-- 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: #37AC8A;
}


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

.service-details-section {
    padding: 30px 0 20px;
    background-color: rgb(247, 243, 243);
    background-size: cover;
}


.service-details-thumb img {
    width: 100%;
    height: 400px; 
    max-width: 700px;
    max-height: 500px; 
    object-fit: cover;
    margin-top: 10px;
}


.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;
    margin-top: 10px;
}

.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: #37AC8A;
    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: #37AC8A;
    font-weight: 400;
    padding-right: 9px;
}

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

/* service style three */

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



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

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

.ba-team-details-author-skill-area {
    margin-bottom: 30px;
}

.team-details-author-img img {
    width: 100%;
}

.team-details-author-name {
    margin-bottom: 14px;
}

.team-details-author-name h4 {
    font-size: 24px;
    line-height: 60px;
    color: #292930;
    font-weight: 600;
}

.team-details-author-name span {
    font-size: 16px;
    line-height: 36px;
    color: #434141;
    font-weight: 400;
}

.team-details-author-experience ul li {
    list-style: none;
    margin-bottom: 12px;
}

.team-details-author-experience ul li .label {
    min-width: 152px;
    float: left;
    font-size: 16px;
    color: #434141;
    font-weight: 500;
}

.team-details-author-experience ul li .value {
    overflow: hidden;
    display: block;
}

.team-details-author-experience ul li .value {
    overflow: hidden;
    display: block;
    text-decoration: none;
    font-size: 16px;
    color: #434141;
}

.team-card-box-social a {
    display: inline-block;
    margin-right: 15px;
    height: 40px;
    width: 40px;
    background: #f3f3f3;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

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

.team-card-box-social a:hover::before{
    transform: scale(1);
}

.team-card-box-social a i{
    transition: .5s;
}

.team-card-box-social a:hover i{
    color: #ffffff;
}

/* progress bar css */

span.process-bar.style-two {
    font-size: 16px;
}

.barfiller.style-two {
    width: 100%;
}

.team-details-title h4 {
    font-size: 24px;
    line-height: 60px;
    color: #292930;
    font-weight: 600;
}


/* form box css */

.choose-contact-title.inner.team h4::before {
    display: none;
}

.choose-contact-title.inner.team h4 {
    border-bottom: 1px solid  #dddddd;
    padding: 0px 0 13px;
    margin-bottom: 28px;
}

.form-box.inner.team input {
    border: 1px solid #dddddd;
    margin-bottom: 16px;
}

.form-box.inner.team textarea {
    border: 1px solid #dddddd;
    height: 135px;
}

.form-box-button.inner.team button:hover::before {
    background: #1c1632;
}


/*==================================================
 <-- 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: #37AC8A;
}




/*** 
====================================================================
    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:#37AC8A;
    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: #37AC8A;
    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: #37AC8A;
}




/*
<!-- ============================================================== -->
<!-- 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: #37AC8A;
}

.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: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 0.5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 0.5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 0.5s;
    -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 0.5s alternate infinite;
    animation: dance 0.5s 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.0.5s 0.0.5s 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: #37AC8A;
    -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 0.5s linear infinite;
    -moz-animation: spin 0.5s linear infinite;
    -o-animation: spin 0.5s linear infinite;
    animation: spin 0.5s 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 0.5s linear infinite;
    -moz-animation: spin 0.5s linear infinite;
    -o-animation: spin 0.5s linear infinite;
    animation: spin 0.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;
} 
.csr-section {
    padding: 50px 0;
    background-color: rgb(191, 230, 191);
}
.csr-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}.styled-image {
    margin-top: 50px;
    margin-bottom: 40px;
    width: 250px;
    height: auto;
    border: 5px solid #0b382b;
    border-radius: 15px;
    transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15), 0 6px 6px rgba(0, 0, 0, 0.05); /* Deeper shadow for 3D effect */
    background: linear-gradient(145deg, #ffffff, #e6e6e6); /* Soft gradient for subtle lighting effect */
}

.styled-image:hover {
    transform: scale(1.1) translateY(-15px) rotate(1deg); /* Increased scale and slight rotation for more dynamic hover */
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.1); /* Stronger shadow on hover */
    filter: brightness(1.05); /* Slightly brighten on hover */
}

.image-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Increased gap for better spacing */
    background: linear-gradient(145deg, #f9f9f9, #e0e0e0); /* Soft background gradient */
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.05); /* More prominent grid shadow */
    border: 1px solid #ccc; /* Light border for a refined look */
}

.top-row, .middle-row, .bottom-row {
    display: flex;
    justify-content: center;
    gap: 25px; /* Slightly wider gaps between images */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .top-row, .middle-row, .bottom-row {
        flex-direction: column;
    }

    .styled-image {
        width: 85%; /* Slight adjustment for medium screens */
    }
}

@media (max-width: 480px) {
    .styled-image {
        width: 100%;
    }
}

.container1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.card1 {
    background: #d2d3db96;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin: 10px;
    width: calc(100% - 40px);
    max-width: 300px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}

.card1 img {
    width: 40%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.card1-content {
    padding: 15px;
}

.card1 h3 {
    margin-top: 0;
    font-size: 1.2em;
}

.card1 p {
    margin: 10px 0;
}

@media (min-width: 600px) {
    .card1 {
        width: calc(50% - 40px);
    }
}

@media (min-width: 900px) {
    .card1 {
        width: calc(33.33% - 40px);
    }
}

.card1-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    background-color: #fff;
    padding: 10px;
}

.service-list {
    list-style: none;
    padding: 0;
  }
  
  .service-list li {
    display: flex;
    align-items: flex-start;
    text-align: justify;
  }
  
  .service-list li::after {
    content: '';
    flex: 1;
  }
  
  .service-list i {
    margin-right: 10px; /* Adjust spacing between icon and text */
  }
  .makesUs1 .overlay {
    background-color: white;
    padding: 20px 0;
    margin-left: 132px;
    margin-right: 132px;
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
}

@media (max-width: 768px) {
    .makesUs1 .overlay {
        margin-left: 50px;
        margin-right: 50px;
        border: none;
    }
}

@media (max-width: 576px) {
    .makesUs1 .overlay {
        margin-left: 20px;
        margin-right: 20px;
        border: none;
    }
}
.makesUs1 p {
    text-align: justify;
    font-size: 16px;
    color: black;
    max-width: 800px;
    margin: 0 auto 30px;
}

.theme_title h2 {
    font-size: 32px;
    color: #333;
    margin-bottom: 30px;
    position: relative;
}

.theme_title1 h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: green;
    margin: 10px auto 0;
}

.special_item1 {
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.special_item1:hover {
    transform: translateY(-10px);
}

.product-image {
    width: 150px;
    display: block;
    margin: 0 auto;
    padding: 10px;
    transition: transform 0.3s ease;
}

.product-image:hover {
    transform: scale(1.1);
}

.icon {
    position: relative;
    padding: 20px;
}

@media (max-width: 768px) {
    .col-lg-2, .col-md-4, .col-sm-6, .col-xs-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    .col-lg-2, .col-md-4, .col-sm-6, .col-xs-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
.modal {
    display: none; 
    position: fixed;
    z-index: 5; 
    left: 0;
    top: 0;
    margin-bottom: 20px;
    width: 100%; 
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; 
    padding: 20px;
    border: 1px solid #888;
    text-align: justify;
    width: 100%; 
    max-width: 900px; 
}.close {
    color: white;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px; /* Slightly smaller font size for a cleaner look */
    font-weight: bold;
    width: 40px; /* Set width and height to the same value for a perfect circle */
    height: 40px;
    background-color: #e53e3e; /* Use a shade of red for better design consistency */
    border-radius: 50%; /* Makes the button a full circle */
    border: 2px solid white; /* Add a white border */
    cursor: pointer;
    display: flex; /* Center the 'X' */
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhance shadow for a more pronounced effect */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.close:hover {
    background-color: #c53030; /* Darker red on hover */
    transform: scale(1.1); /* Subtle scaling effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* More intense shadow on hover */
}

.close:active {
    transform: scale(0.95); /* Slight shrink when clicked */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soften shadow when active */
}


.close:hover,
.close:focus {
    background-color: darkred;
    transform: scale(1.1);
    cursor: pointer;
    outline: none; 
}

.modal-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.custom-list {
    list-style-type: none; 
    padding: 20 px;
    margin: 20px;
}

.custom-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px; 
}

.custom-list img {
    margin: 0px; 
}
.widget-categories-menu ul li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}


.widget-categories-menu ul li img {
    width: 24px; /* Adjust as needed */
    height: 24px; /* Adjust as needed */
    margin-right: 8px; /* Adjust spacing between image and text */
    vertical-align: middle; /* Align image vertically with text */
}
.email-us {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.email-us h5 {
    text-align: center;
}
.email-us form {
    display: flex;
    flex-direction: column;
}
.email-us label,
.email-us input,
.email-us textarea,
.email-us button {
    margin-bottom: 10px;
}

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.row.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.image-enhanced {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-enhanced:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.image-enhanced {
    border-radius: 8px;
}