Access_New/pages/demo-green-energy-about.html
2024-09-05 11:33:27 +05:45

518 lines
26 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<link rel="stylesheet" href="demos/green-energy/green-energy.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-light bg-white header-reverse" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto">
<a class="navbar-brand" href="demo-green-energy.html">
<img src="images/demo-green-energy-logo-black.png" data-at2x="images/demo-green-energy-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-green-energy-logo-black.png" data-at2x="images/demo-green-energy-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-green-energy-logo-black.png" data-at2x="images/demo-green-energy-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order left-nav">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="demo-green-energy.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-green-energy-about.html" class="nav-link">About</a></li>
<li class="nav-item dropdown dropdown-with-icon-style02"><a href="demo-green-energy-services.html" class="nav-link">Services</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
<li><a href="demo-green-energy-services-details.html"><i class="line-icon-Solar align-middle text-base-color"></i>Solar panel solutions</a></li>
<li><a href="demo-green-energy-services-details.html"><i class="line-icon-Battery-Charge align-middle text-base-color"></i>Battery materials</a></li>
<li><a href="demo-green-energy-services-details.html"><i class="line-icon-Wind-Turbine align-middle text-base-color"></i>Wind turbine installation</a></li>
<li><a href="demo-green-energy-services-details.html"><i class="line-icon-Green-Energy align-middle text-base-color"></i>Renewable energy</a></li>
</ul>
</li>
<li class="nav-item"><a href="demo-green-energy-project.html" class="nav-link">Project</a></li>
<li class="nav-item"><a href="demo-green-energy-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-green-energy-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto ms-auto ps-lg-0 d-none d-sm-flex">
<div class="d-none d-xl-flex me-25px xl-me-0">
<div class="d-flex align-items-center widget-text fw-600"><a href="tel:1800222000"><span class="d-inline-block align-middle me-10px bg-very-light-green h-45px w-45px lh-44 text-center rounded-circle text-base-color"><i class="feather icon-feather-phone-call"></i></span><span class="d-none d-xxl-inline-block align-middle">1 800 222 000</span></a></div>
</div>
<div class="header-icon">
<div class="header-button">
<a href="cdn-cgi/l/email-protection.html#543d3a323b14303b39353d3a7a373b39" class="btn border-1 btn-base-color btn-small btn-rounded btn-box-shadow left-icon btn-switch-text">
<span>
<span><i class="fa-regular fa-envelope"></i></span>
<span class="btn-double-text" data-text="Send a message">Send a message</span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="top-space-margin overflow-hidden p-0 bg-very-light-gray page-title-big-typography">
<div class="container-fluid p-0">
<div class="row justify-content-center small-screen sm-h-400px g-0">
<div class="col-md-6 d-flex justify-content-center flex-column ps-7 pe-15px sm-ps-15px cover-background text-white text-md-start text-center page-title-large" style="background-image: url('images/demo-green-energy-about-title-left-bg-01.jpg');" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h1 class="fw-600 mb-10px ls-minus-2px">About us</h1>
<h2 class="opacity-6 mb-0 fw-300">Eco-friendly energy solutions</h2>
</div>
<div class="col-md-6">
<div class="h-100 position-relative cover-background sm-pt-50px" style="background-image: url('images/demo-green-energy-about-title-right-bg-01.jpg');" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="fs-140 xl-fs-120 lg-fs-100 md-fs-80 ls-minus-6px md-ls-minus-4px sm-ls-minus-2px text-white position-absolute bottom-minus-20px sm-bottom-minus-10px w-100 text-center">since <span class="fw-700">1998</span></div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center justify-content-md-center g-xl-0 g-1">
<div class="col-lg-6 col-md-10 text-end md-mb-10 sm-mb-15" data-anime="{&quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<figure class="position-relative m-0">
<img class="lg-w-90 border-radius-10px" src="images/demo-green-energy-about-img-01.jpg" alt>
<figcaption class="position-absolute box-shadow-double-large border-radius-8px overflow-hidden bottom-minus-50px lg-bottom-minus-30px left-0px xl-left-minus-20px lg-left-0px w-300px lg-w-250px pt-60px pb-60px lg-pt-50px lg-pb-50px ps-5px pe-5px text-center cover-background" style="background-image: url('images/demo-green-energy-about-img-02.jpg');" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<span class="fs-65 text-white ls-minus-4px position-relative fw-600">6145+</span>
<span class="d-block mx-auto fs-20 lh-26 w-70 text-center text-white">Projects completed in last 5 years.</span>
</figcaption>
</figure>
</div>
<div class="col-md-10 col-xl-5 offset-xl-1 col-lg-6" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="mb-10px">
<span class="w-30px h-2px fs-15 d-inline-block bg-base-color me-5px align-middle"></span>
<span class="text-uppercase text-base-color fs-16 fw-600 d-inline-block">About renewable energy</span>
</div>
<h3 class="text-dark-gray fw-700 ls-minus-2px">Leaders in eco-friendly energy business.</h3>
<p class="w-80 sm-w-100">Geothermal energy is a clean and reliable source of renewable energy that uses heat from the earths core to generate electricity.</p>
<div class="mb-20px">
<div class="icon-with-text-style-08 mb-10px">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon feature-box-icon-rounded w-40px h-40px bg-very-light-green rounded-circle me-10px">
<i class="fa-solid fa-check fs-14 text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="text-dark-gray fw-600">Solutions can help reduce the risk of oil spills.</span>
</div>
</div>
</div>
<div class="icon-with-text-style-08">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon feature-box-icon-rounded w-40px h-40px bg-very-light-green rounded-circle me-10px">
<i class="fa-solid fa-check fs-14 text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="text-dark-gray fw-600">Help reduce the impact of climate change.</span>
</div>
</div>
</div>
</div>
<div class="d-inline-flex flex-wrap">
<a href="demo-green-energy-services.html" class="btn btn-extra-large btn-base-color btn-rounded btn-switch-text btn-box-shadow d-inline-block me-20px mt-15px sm-me-10px align-middle left-icon">
<span>
<span><i class="feather icon-feather-thumbs-up"></i></span>
<span class="btn-double-text ls-minus-05px" data-text="Explore services">Explore services</span>
</span>
</a>
<div class="feature-box feature-box-left-icon-middle xs-m-10px mt-15px">
<div class="feature-box-icon feature-box-icon-rounded bg-very-light-green w-65px h-65px rounded-circle me-10px">
<i class="feather icon-feather-phone-call icon-extra-medium text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="d-block fs-14">Have any question?</span>
<a href="tel:1800222000" class="d-block text-dark-gray text-dark-gray-hover fs-22 fw-700 ls-minus-1px">1 800 222 000</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cover-background" style="background-image: url('images/demo-green-energy-about-bg-01.jpg');">
<div class="container">
<div class="row mb-4 sm-mb-30px text-center">
<div class="col" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-16 text-uppercase text-base-color fw-600 mb-5px d-block">Why choose green energy</span>
<h2 class="fw-700 mb-0 text-dark-gray ls-minus-2px">Why you should work with us?</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-md-2 row-cols-sm-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col custom-icon-with-text-style-02 border-end border-color-transparent-dark-very-light xs-border-end-0 md-mb-30px">
<div class="feature-box last-paragraph-no-margin">
<div class="feature-box-icon">
<img class="custom-image-icon mb-30px" src="images/demo-green-energy-about-icon-01.png" alt />
</div>
<div class="feature-box-content">
<span class="d-block fs-20 fw-600 text-dark-gray mb-10px">Save more money</span>
<p class="w-80 xl-w-100 mx-auto">Energy solutions delivers resource and environmental impacts benefit society.</p>
</div>
</div>
</div>
<div class="col custom-icon-with-text-style-02 border-end border-color-transparent-dark-very-light md-border-end-0 md-mb-30px">
<div class="feature-box last-paragraph-no-margin">
<div class="feature-box-icon">
<img class="custom-image-icon mb-30px" src="images/demo-green-energy-about-icon-02.png" alt />
</div>
<div class="feature-box-content">
<span class="d-block fs-20 fw-600 text-dark-gray mb-10px">5 stars service</span>
<p class="w-80 xl-w-100 mx-auto">Energy solutions delivers resource and environmental impacts benefit society.</p>
</div>
</div>
</div>
<div class="col custom-icon-with-text-style-02 border-end border-color-transparent-dark-very-light xs-border-end-0 xs-mb-30px">
<div class="feature-box last-paragraph-no-margin">
<div class="feature-box-icon">
<img class="custom-image-icon mb-30px" src="images/demo-green-energy-about-icon-03.png" alt />
</div>
<div class="feature-box-content">
<span class="d-block fs-20 fw-600 text-dark-gray mb-10px">Award winning</span>
<p class="w-80 xl-w-100 mx-auto">Energy solutions delivers resource and environmental impacts benefit society.</p>
</div>
</div>
</div>
<div class="col custom-icon-with-text-style-02">
<div class="feature-box last-paragraph-no-margin">
<div class="feature-box-icon">
<img class="custom-image-icon mb-30px" src="images/demo-green-energy-about-icon-04.png" alt />
</div>
<div class="feature-box-content">
<span class="d-block fs-20 fw-600 text-dark-gray mb-10px">Help any time</span>
<p class="w-80 xl-w-100 mx-auto">Energy solutions delivers resource and environmental impacts benefit society.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-0 sm-pt-50px" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="container overlap-section">
<div class="row justify-content-center g-0">
<div class="col-auto text-center pt-15px pb-15px ps-40px pe-40px md-ps-25px md-pe-25px bg-white border border-color-extra-medium-gray box-shadow-medium-bottom border-radius-100px xs-border-radius-10px">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon me-10px">
<img src="images/demo-green-energy-home-icon-06.png" alt>
</div>
<div class="feature-box-content text-dark-gray fs-18">
Discover independence through the power of solar. <a href="demo-green-energy-project.html" class="text-dark-gray fw-600">Explore our plans</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pb-0">
<div class="container">
<div class="row">
<div class="col-lg-5 md-mb-50px sm-mb-30px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-16 text-uppercase text-base-color fw-600 mb-5px d-block">Green energy leaders</span>
<h3 class="fw-700 mb-0 text-dark-gray ls-minus-2px w-85">We believe in power of unity and its impact in future.</h3>
</div>
<div class="col-lg-7" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row">
<div class="col-md-5">
<div class="fs-20 fw-600 text-dark-gray ls-minus-05px w-85 xl-w-100 sm-mb-10px">Successfully finished projects in last 5 years.</div>
</div>
<div class="col-md-7 last-paragraph-no-margin">
<p>With a focus on renewable energy sources and green technology, we are dedicated to reducing carbon footprints and promoting environmental stewardship.</p>
</div>
</div>
<div class="separator-line-1px border-bottom border-color-extra-medium-gray mt-30px mb-30px"></div>
<div class="row">
<div class="col-md-5">
<div class="fs-20 fw-600 text-dark-gray ls-minus-05px w-85 xl-w-100 sm-mb-10px">The go-to experts for green energy solutions.</div>
</div>
<div class="col-md-7 last-paragraph-no-margin">
<p>By offering comprehensive energy solutions that prioritize efficiency and sustainability, we are driving the transition towards a cleaner, greener future.</p>
</div>
</div>
<div class="separator-line-1px border-bottom border-color-extra-medium-gray mt-30px mb-30px"></div>
<div class="row">
<div class="col-md-5">
<div class="fs-20 fw-600 text-dark-gray ls-minus-05px w-85 xl-w-100 sm-mb-10px">Innovators in green technology consulting.</div>
</div>
<div class="col-md-7 last-paragraph-no-margin">
<p>Our experts team is dedicated to providing innovative, eco-friendly energy solutions to help build a sustainable future.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center">
<div class="col team-style-08 md-mb-30px" data-bottom-top="transform:scale(1, 1) translateY(-30px);" data-top-bottom="transform:scale(0.7, 0.7) translateY(30px);">
<figure class="mb-0 position-relative border-radius-8px overflow-hidden">
<img src="images/team-09.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-8 md-p-13 sm-p-9 bg-gradient-gray-light-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-19 fw-500 text-white d-block">Jeremy dupont</span>
<span class="member-designation fs-16 lh-26 text-white d-block">Director</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.twitter.com/" target="_blank" class="text-black bg-white w-55px h-55px"><i class="fa-brands fa-twitter icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 mt-2 md-mt-0 md-mb-30px" data-bottom-top="transform:scale(1, 1)" data-top-bottom="transform:scale(1.2, 1.2)">
<figure class="mb-0 position-relative border-radius-8px overflow-hidden">
<img src="images/team-11.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-8 md-p-13 sm-p-9 bg-gradient-gray-light-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-19 fw-500 text-white d-block">Matthew taylor</span>
<span class="member-designation fs-16 lh-26 text-white d-block">Manager</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.linkedin.com/" target="_blank" class="text-black bg-white w-55px h-55px"><i class="fa-brands fa-linkedin-in icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08" data-bottom-top="transform:scale(1, 1) translateY(-30px);" data-top-bottom="transform:scale(0.7, 0.7) translateY(30px);">
<figure class="mb-0 position-relative border-radius-8px overflow-hidden">
<img src="images/team-10.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-8 md-p-13 sm-p-9 bg-gradient-gray-light-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-19 fw-500 text-white d-block">Jessica dover</span>
<span class="member-designation fs-16 lh-26 text-white d-block">Designer</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.facebook.com/" target="_blank" class="text-black bg-white w-55px h-55px"><i class="fa-brands fa-facebook-f icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="half-section pb-7 sm-pb-50px lg-pt-0">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-5 last-paragraph-no-margin lg-mb-30px">
<div data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-16 text-uppercase text-base-color fw-600 mb-5px d-block">International awards</span>
<h3 class="text-dark-gray fw-700 ls-minus-1px mb-20px">These awards reflect the work.</h3>
<p>Our buildings combine minimalism & elegance of lines and shapes. We want them to be an integral part of the surrounding landscape.</p>
</div>
</div>
<div class="col-lg-7 offset-xl-1 last-paragraph-no-margin" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row align-items-center pb-25px border-bottom border-color-extra-medium-gray g-0 position-relative sm-pe-40px">
<div class="col-md-2">
<span class="fw-500 text-dark-gray">2005</span>
</div>
<div class="col-md-6">
<span class="text-dark-gray fw-600 fs-18">International energy technology</span>
</div>
<div class="col-md-3">
<span>Technology</span>
</div>
<div class="col-auto col-md-1 sm-position-absolute right-0px">
<a href="demo-green-energy-about.html#"><i class="fa-solid fa-arrow-right-long text-dark-gray"></i></a>
</div>
</div>
<div class="row align-items-center pt-25px pb-25px border-bottom border-color-extra-medium-gray g-0 position-relative sm-pe-40px">
<div class="col-md-2">
<span class="fw-500 text-dark-gray">2010</span>
</div>
<div class="col-md-6">
<span class="text-dark-gray fw-600 fs-18">International energy agency awards</span>
</div>
<div class="col-md-3">
<span>Agency</span>
</div>
<div class="col-auto col-md-1 sm-position-absolute right-0px">
<a href="demo-green-energy-about.html#"><i class="fa-solid fa-arrow-right-long text-dark-gray"></i></a>
</div>
</div>
<div class="row align-items-center pt-25px pb-25px border-bottom border-color-extra-medium-gray g-0 position-relative sm-pe-40px">
<div class="col-md-2">
<span class="fw-500 text-dark-gray">2018</span>
</div>
<div class="col-md-6">
<span class="text-dark-gray fw-600 fs-18">Best project of the year awards</span>
</div>
<div class="col-md-3">
<span>Project</span>
</div>
<div class="col-auto col-md-1 sm-position-absolute right-0px">
<a href="demo-green-energy-about.html#"><i class="fa-solid fa-arrow-right-long text-dark-gray"></i></a>
</div>
</div>
<div class="row align-items-center pt-25px pb-25px g-0 position-relative sm-pe-40px sm-pb-0">
<div class="col-md-2">
<span class="fw-500 text-dark-gray">2021</span>
</div>
<div class="col-md-6">
<span class="text-dark-gray fw-600 fs-18">Solar technology innovation awards</span>
</div>
<div class="col-md-3">
<span>Innovation</span>
</div>
<div class="col-auto col-md-1 sm-position-absolute right-0px">
<a href="demo-green-energy-about.html#"><i class="fa-solid fa-arrow-right-long text-dark-gray"></i></a>
</div>
</div>
</div>
</div>
<div class="row align-items-center clients-style-06 mt-5 sm-mt-6 xs-mt-9">
<div class="col-lg-2 border-end md-border-end-0 border-color-extra-medium-gray md-mb-30px text-center text-lg-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-22 ls-minus-1px w-80 lg-w-100 d-inline-block text-dark-gray fw-700 mb-0">Honorable awards.</span>
</div>
<div class="col-lg-10">
<div class="row" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-md-3 col-sm-6 client-box text-center sm-mb-30px">
<a href="demo-green-energy-about.html#"><img src="images/demo-green-energy-projects-01.png" alt /></a>
</div>
<div class="col-md-3 col-sm-6 client-box text-center sm-mb-30px">
<a href="demo-green-energy-about.html#"><img src="images/demo-green-energy-projects-02.png" alt /></a>
</div>
<div class="col-md-3 col-sm-6 client-box text-center xs-mb-30px">
<a href="demo-green-energy-about.html#"><img src="images/demo-green-energy-projects-03.png" alt /></a>
</div>
<div class="col-md-3 col-sm-6 client-box text-center">
<a href="demo-green-energy-about.html#"><img src="images/demo-green-energy-projects-04.png" alt /></a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-dark-gray pb-30px">
<div class="container">
<div class="row mb-5 xs-mb-30px">
<div class="col-xl-5 col-md-7 sm-mb-30px order-2 order-xl-1">
<h3 class="text-white fw-600 mb-30px ls-minus-2px">Quality solar panels for home and business.</h3>
<div class="row">
<div class="col-xxl-5 col-sm-6 sm-mb-20px">
<span class="fs-18 fw-500 text-white d-block">Say hello</span>
<a href="cdn-cgi/l/email-protection.html#5b32353d341b22342e293f34363a323575383436"><span class="__cf_email__" data-cfemail="8fe6e1e9e0cff6e0fafdebe0e2eee6e1a1ece0e2">[email&#160;protected]</span></a>
</div>
<div class="col-xxl-5 col-sm-6">
<span class="fs-18 fw-500 text-white d-block">Call anytime</span>
<a href="tel:1800222000">1 800 222 000</a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-6 order-3 order-md-2">
<span class="fs-18 fw-500 d-block text-white mb-5px">Information</span>
<ul>
<li><a href="demo-green-energy-about.html">Our company</a></li>
<li><a href="demo-green-energy-services.html">Our services</a></li>
<li><a href="demo-green-energy-project.html">Recent projects</a></li>
<li><a href="demo-green-energy-blog.html">Latest news</a></li>
<li><a href="demo-green-energy-contact.html">Contact us</a></li>
</ul>
</div>
<div class="col-md-2 col-6 order-3 order-md-3">
<span class="fs-18 fw-500 d-block text-white mb-5px">Socials</span>
<ul>
<li><a href="https://www.facebook.com/" target="_blank">Facebook</a></li>
<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
<li><a href="http://www.dribbble.com" target="_blank">Dribbble</a></li>
<li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
<li><a href="http://www.linkedin.com" target="_blank">Linkedin</a></li>
</ul>
</div>
<div class="col-xl-3 order-1 order-xl-4 lg-mb-30px">
<a href="demo-green-energy.html" class="footer-logo"><img src="images/demo-green-energy-logo-white.png" data-at2x="images/demo-green-energy-logo-white@2x.png" alt></a>
</div>
</div>
<div class="row g-0 border-top border-color-transparent-white-light"></div>
<div class="row align-items-center footer-bottom pt-30px">
<div class="col-md-7 last-paragraph-no-margin">
<p class="fs-14 lh-24 w-90 sm-w-100">This site is protected by reCAPTCHA and the Google privacy policy and terms of service apply. You must not use this website if you disagree with any of these website standard terms and conditions.</p>
</div>
<div class="col-md-5 text-md-end sm-mt-15px last-paragraph-no-margin">
<p class="fs-14 lh-24">&copy; 2024 Crafto is Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-white text-decoration-line-bottom">ThemeZaa</a></p>
</div>
</div>
</div>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-green-energy-about.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>