<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<title>index</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg ">
<div class="container ">
<a class="navbar-brand" href="#"><img src="images/KT_Solar__Logo.png" class="img-fluid" alt="KT_Solar__Logo"></a>
<button class="navbar-toggler" href="#offcanvasExample" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" >
<span class="toggle-btn"> <i class="fa-solid fa-bars"></i></span>
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExample"><img src="images/KT_Solar__Logo.png" class="img-fluid" alt="KT_Solar__Logo"></h5>
<button type="button" class="close-btn" data-bs-dismiss="offcanvas" aria-label="Close"><span class=""><i class="fa-solid fa-x"></i></span></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link"href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">Stockists</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item active">
<a class="nav-link"href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">Stockists</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">Contact</a>
</li>
</ul>
<div class="right-call">
<div class="call-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="38" height="37" viewBox="0 0 38 37" fill="none">
<path d="M12.4944 33.8539C10.7746 33.8491 9.127 33.1614 7.91421 31.9419C6.70142 30.7224 6.02272 29.0712 6.02737 27.3513L6.06414 14.1025C6.06414 10.6708 7.42741 7.3796 9.85401 4.95301C12.2806 2.52642 15.5718 1.16315 19.0035 1.16315C22.4352 1.16315 25.7264 2.52642 28.1529 4.95301C30.5795 7.3796 31.9428 10.6708 31.9428 14.1025V18.6427L31.9784 27.1469C31.9788 27.2012 32.0005 27.2532 32.039 27.2915C32.0775 27.3298 32.1296 27.3513 32.1839 27.3513H34.6363C34.948 27.3504 35.2566 27.2882 35.5443 27.1681C35.832 27.048 36.0932 26.8724 36.3131 26.6514C36.5329 26.4303 36.7071 26.1681 36.8256 25.8798C36.9441 25.5914 37.0047 25.2826 37.0039 24.9708V19.066C37.0047 18.7543 36.9441 18.4454 36.8256 18.1571C36.7071 17.8687 36.5329 17.6065 36.3131 17.3854C36.0932 17.1644 35.832 16.9888 35.5443 16.8687C35.2566 16.7486 34.948 16.6864 34.6363 16.6855H31.9767" stroke="#282B8B" stroke-width="1.75163" stroke-linecap="round"/>
<path d="M6.02719 27.3482H3.3676C3.05583 27.3474 2.74727 27.2852 2.45956 27.1651C2.17185 27.045 1.91065 26.8694 1.6908 26.6484C1.47094 26.4274 1.29672 26.1651 1.17819 25.8768C1.05967 25.5884 0.999164 25.2796 1.00001 24.9678V19.063C0.999164 18.7513 1.05967 18.4424 1.17819 18.154C1.29672 17.8657 1.47094 17.6035 1.6908 17.3825C1.91065 17.1614 2.17185 16.9858 2.45956 16.8657C2.74727 16.7456 3.05583 16.6834 3.3676 16.6826H6.02719" stroke="#282B8B" stroke-width="1.75163" stroke-linecap="round"/>
<path d="M14.1457 35.5057H16.0275C16.9411 35.5057 17.6816 34.7652 17.6816 33.8518C17.6816 32.9385 16.9411 32.198 16.0275 32.198H14.1457C13.2321 32.198 12.4915 32.9385 12.4915 33.8518C12.4915 34.7652 13.2321 35.5057 14.1457 35.5057Z" stroke="#282B8B" stroke-width="1.75163" stroke-linecap="round"/>
</svg>
</div>
<div class="call-detail">
<p>Call Us</p>
<p><a href="tel:+000 123456789">+000 123456789</a></p>
</div>
</div>
</div>
</nav>
</header>
<section class="main-hero">
<div class="hero-bg">
<img src="images/hero-img.png" class="img-fluid hero-bg" alt="hero-img">
<img src="images/hero-overlay.png" class="img-fluid hero-overlay" alt="hero-img">
<img src="images/hero-outr.png" class="img-fluid hero-outr" alt="hero-img">
<img src="images/Bulb_icon.png" class="img-fluid Bulb" alt="hero-img">
</div>
<div class="container">
<div class="hero-content">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="left-hro-text">
<h1>Energize Society Using Sustainable & Reliable Energy</h1>
<a href="javascript:;" class="common-btn">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="icon-image-text py-100">
<div class="container">
<div class="inner-i-i-t">
<div class="row align-items-center">
<div class="col col-md-6 col-lg-3">
<div class="image-box">
<img src="images/Renewavle-Energy.png" class="img-fluid" alt="Renewavle-Energy">
<h3>Renewable Energy</h3>
<p>Sagittis orci a scelerisque purus semper nullam ac eget.</p>
</div>
</div>
<div class="col col-md-6 col-lg-3">
<div class="image-box">
<img src="images/Eco-Friendly.png" class="img-fluid" alt="Eco-Friendly">
<h3>Eco Friendly</h3>
<p>Aenean euismod elementum nisi quis eleifend consequat nisl vel.</p>
</div>
</div>
<div class="col col-md-6 col-lg-3">
<div class="image-box">
<img src="images/Cost-Savings.png" class="img-fluid" alt="Cost-Savings">
<h3>Cost Savings</h3>
<p>Facilisis gravida neque convallis a cras facilisi morbi tempus iaculis.</p>
</div>
</div>
<div class="col col-md-6 col-lg-3">
<div class="image-box">
<img src="images/Low-Maintenance.png" class="img-fluid" alt="Low-Maintenance">
<h3>Low Maintenance</h3>
<p>Posuere sollicitudin aliquam ultrices sagittis interdum.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <section class="kt-solar">
<div class="inner-kt">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="left-kt">
<img src="images/kt-solar-img.png" class="img-fluid" alt="kt-solar-img">
</div>
</div>
<div class="col-lg-6">
<div class="right-kt">
<div class="kt-head-img">
<img src="images/head-img.png" class="img-fluid head-img" alt="head-img">
<h2>KT Solar Power Calculator</h2>
</div>
<p><a href="javascript:;">How to understand the KT Solar Calculator Final Results</a></p>
<p>A Green Indicator: Your system is capable of running all selected loads with the battery & solar capacity selected.</p>
<p>An Amber Indicator: Your system is capable of running all selected loads with the battery & solar capacity selected, however is close to exceeding your limit.You will need to either reduce your loads & time in use, or simply increase your battery capacity & solar capacity.</p>
<p>A Red Indicator: Your system is incapable of running all selected loads with the battery & solar capacity selected.You will need to either reduce your loads & time in use, or simply increase your battery capacity & solar capacity.</p>
<a href="javascript:;" class="common-btn">Read more</a>
</div>
</div>
</div>
</div>
</section> -->
<section class="kt-solar">
<div class="inner-kt">
<div class="left-kt">
<img src="images/kt-solar-img.png" class="img-fluid" alt="kt-solar-img">
</div>
<div class="right-kt">
<div class="kt-head-img">
<img src="images/head-img.png" class="img-fluid head-img" alt="head-img">
<h2>KT Solar Power Calculator</h2>
</div>
<p><a href="javascript:;">How to understand the KT Solar Calculator Final Results</a></p>
<p>A Green Indicator: Your system is capable of running all selected loads with the battery & solar capacity selected.</p>
<p>An Amber Indicator: Your system is capable of running all selected loads with the battery & solar capacity selected, however is close to exceeding your limit.You will need to either reduce your loads & time in use, or simply increase your battery capacity & solar capacity.</p>
<p>A Red Indicator: Your system is incapable of running all selected loads with the battery & solar capacity selected.You will need to either reduce your loads & time in use, or simply increase your battery capacity & solar capacity.</p>
<a href="javascript:;" class="common-btn">Read more</a>
</div>
</div>
</section>
<section class="services">
<div class="container">
<div class="inn-services">
<div class="row">
<div class="col-lg-6">
<div class="left-video">
<video width="100%" poster="images/video-img.png" controls="">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<span class="video-icon"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62" fill="none">
<g clip-path="url(#clip0_34_793)">
<path d="M9.12261 52.2242C6.21328 49.4142 3.89269 46.053 2.29627 42.3367C0.699841 38.6203 -0.140461 34.6232 -0.175608 30.5786C-0.210754 26.5341 0.559959 22.523 2.09156 18.7794C3.62316 15.0359 5.88498 11.6349 8.74504 8.77483C11.6051 5.91477 15.0061 3.65295 18.7497 2.12135C22.4932 0.589745 26.5043 -0.180969 30.5489 -0.145823C34.5934 -0.110676 38.5905 0.729626 42.3069 2.32605C46.0232 3.92248 49.3844 6.24306 52.1944 9.15239C57.7431 14.8974 60.8134 22.5919 60.744 30.5786C60.6746 38.5654 57.471 46.2054 51.8233 51.8531C46.1756 57.5008 38.5356 60.7043 30.5489 60.7737C22.5621 60.8431 14.8676 57.7729 9.12261 52.2242ZM47.8994 47.9292C52.4719 43.3566 55.0408 37.1549 55.0408 30.6883C55.0408 24.2217 52.4719 18.02 47.8994 13.4474C43.3268 8.87481 37.1251 6.30597 30.6585 6.30597C24.1919 6.30597 17.9902 8.87481 13.4176 13.4474C8.84503 18.02 6.27619 24.2217 6.27619 30.6883C6.27619 37.1549 8.84503 43.3566 13.4176 47.9292C17.9902 52.5017 24.1919 55.0706 30.6585 55.0706C37.1251 55.0706 43.3268 52.5017 47.8994 47.9292ZM21.5202 18.5039L45.889 30.6883L21.5202 42.8726V18.5039Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_34_793">
<rect width="60.9219" height="60.9219" fill="white" transform="translate(0.197266 0.227539)"/>
</clipPath>
</defs>
</svg>
</span>
</div>
</div>
<div class="col-lg-6">
<div class="right-gallery">
<div class="in-img-gall">
<img src="images/car.png" class="img-fluid car" alt="car">
<p>4x4</p>
</div>
<div class="in-img-gall">
<img src="images/cravan.png" class="img-fluid cravan" alt="cravan">
<p>Caravan & Campper Trailer</p>
</div>
<div class="in-img-gall">
<img src="images/hand-press.png" class="img-fluid hand-press" alt="hand-press">
<p>Hand Press Locker</p>
</div>
<div class="in-img-gall">
<img src="images/alarm.png" class="img-fluid alarm" alt="alarm">
<p>Alarm System</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blog-sec">
<div class="container">
<div class="inner-blog">
<div class="blog-head text-center">
<h2>Latest News & Blogs</h2>
<p>At auctor urna nunc id cursus metus aliquam. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Odio pellentesque diam volutpat commodo. Pellentesque id nibh tortor id. Condimentum vitae sapien pellentesque habitant morbi tristique velit laoreet id.</p>
</div>
<div class="blog-box">
<div class="row ">
<div class="col col-md-6 col-lg-4">
<div class="blog-in-box">
<img src="images/blog-1.png" class="img-fluid" alt="blog-1">
<div class="blog-text">
<span class="date">May 15</span>
<p>What are the different types of solar panels, and how long do they last?</p>
<a href="javascript:;" class="blog-btn">Read More <span class="arrow-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
<g clip-path="url(#clip0_34_839)">
<path d="M6.39842 4.00684C6.26789 4.22076 6.27396 4.47127 6.39396 4.67912L8.25397 7.90075L1.89734 11.5707C1.58557 11.7507 1.47575 12.1605 1.65575 12.4723C1.83575 12.7841 2.24556 12.8939 2.55733 12.7139L8.91395 9.04388L10.774 12.2655C10.894 12.4734 11.1252 12.5939 11.3584 12.5978C11.6089 12.5917 11.8241 12.4444 11.9373 12.2405L15.9134 4.88727C16.0832 4.58139 15.9698 4.18498 15.6539 3.99785C15.552 3.94125 15.4527 3.92931 15.3534 3.91735L6.9973 3.68414C6.76409 3.68021 6.52894 3.79292 6.39842 4.00684Z" fill="#282B8B"/>
</g>
<defs>
<clipPath id="clip0_34_839">
<rect width="16" height="16" fill="white" transform="translate(0.769531 0.239258)"/>
</clipPath>
</defs>
</svg></span>
</a>
</div>
</div>
</div>
<div class="col col-md-6 col-lg-4">
<div class="blog-in-box">
<img src="images/blog-2.png" class="img-fluid" alt="blog-2">
<div class="blog-text">
<span class="date">May 15</span>
<p>Sustainability of solar power systems & the future of energy security</p>
<a href="javascript:;" class="blog-btn">Read More <span class="arrow-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
<g clip-path="url(#clip0_34_839)">
<path d="M6.39842 4.00684C6.26789 4.22076 6.27396 4.47127 6.39396 4.67912L8.25397 7.90075L1.89734 11.5707C1.58557 11.7507 1.47575 12.1605 1.65575 12.4723C1.83575 12.7841 2.24556 12.8939 2.55733 12.7139L8.91395 9.04388L10.774 12.2655C10.894 12.4734 11.1252 12.5939 11.3584 12.5978C11.6089 12.5917 11.8241 12.4444 11.9373 12.2405L15.9134 4.88727C16.0832 4.58139 15.9698 4.18498 15.6539 3.99785C15.552 3.94125 15.4527 3.92931 15.3534 3.91735L6.9973 3.68414C6.76409 3.68021 6.52894 3.79292 6.39842 4.00684Z" fill="#282B8B"/>
</g>
<defs>
<clipPath id="clip0_34_839">
<rect width="16" height="16" fill="white" transform="translate(0.769531 0.239258)"/>
</clipPath>
</defs>
</svg></span>
</a>
</div>
</div>
</div>
<div class="col col-md-6 col-lg-4">
<div class="blog-in-box">
<img src="images/blog-3.png" class="img-fluid" alt="blog-3">
<div class="blog-text">
<span class="date">May 15</span>
<p>Top ten solar energy- generating countries in the world</p>
<a href="javascript:;" class="blog-btn">Read More <span class="arrow-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
<g clip-path="url(#clip0_34_839)">
<path d="M6.39842 4.00684C6.26789 4.22076 6.27396 4.47127 6.39396 4.67912L8.25397 7.90075L1.89734 11.5707C1.58557 11.7507 1.47575 12.1605 1.65575 12.4723C1.83575 12.7841 2.24556 12.8939 2.55733 12.7139L8.91395 9.04388L10.774 12.2655C10.894 12.4734 11.1252 12.5939 11.3584 12.5978C11.6089 12.5917 11.8241 12.4444 11.9373 12.2405L15.9134 4.88727C16.0832 4.58139 15.9698 4.18498 15.6539 3.99785C15.552 3.94125 15.4527 3.92931 15.3534 3.91735L6.9973 3.68414C6.76409 3.68021 6.52894 3.79292 6.39842 4.00684Z" fill="#282B8B"/>
</g>
<defs>
<clipPath id="clip0_34_839">
<rect width="16" height="16" fill="white" transform="translate(0.769531 0.239258)"/>
</clipPath>
</defs>
</svg></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="request-quote py-100">
<div class="container">
<div class="inn-ouote">
<div class="row">
<div class="col-lg-6">
<div class="left-quote">
<img src="images/KT_Solar__Logo.png" class="img-fluid" alt="KT_Solar__Logo">
<h2>Where your energy comes from</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
<div class="col-lg-6">
<div class="right-quote">
<form>
<h2>Request a Quote</h2>
<div class="inn-input">
<div class="both-input">
<input type="text" name="n1" placeholder="Name">
<input type="email" name="E1" placeholder="Name">
</div>
<input type="number" name="phone" placeholder="Phone">
<textarea name="comment" rows="4" cols="10" placeholder="Message"></textarea>
<input class="submit-btn" type="submit" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="line">
<img src="images/line.png" class="img-fluid" alt="line">
</div>
<div class="container">
<div class="footer-logo text-center">
<img src="images/footer-logo.png" class="img-fluid" alt="footer-logo">
</div>
<div class="text-social">
<p>We ara a lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud equip ex ea commodo consequat... Read More</p>
<div class="socail-icon">
<a href="javascript:;"><img src="images/facebook.png" class="img-fluid" alt="facebook"></a>
<a href="javascript:;"><img src="images/Youtube.png" class="img-fluid" alt="Youtube"></a>
<a href="javascript:;"><img src="images/Dribbble.png" class="img-fluid" alt="Dribbble"></a>
<a href="javascript:;"><img src="images/Figma.png" class="img-fluid" alt="Figma"></a>
<a href="javascript:;"><img src="images/Whatsapp.png" class="img-fluid" alt="Whatsapp"></a>
</div>
<ul class="footer-menu">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Find a Stocklist</a></li>
<li><a href="javascript:;">About Us</a></li>
<li><a href="javascript:;">Contact Us</a></li>
</ul>
</div>
<div class="bottom-footer">
<div class="left-bottom-foot">
<div class="phone-number">
<div class="phone-icon"><img src="images/call.png" class="img-fluid" alt="call"></div>
<div class="phone-detail">
<p>Have a question?</p>
<p><a href="tel:310-437-2766">310-437-2766</a></p>
</div>
</div>
<div class="phone-number foot-email">
<div class="phone-icon"><img src="images/message.png" class="img-fluid" alt="message"></div>
<div class="phone-detail">
<p>Contact us at</p>
<p><a href="mailto:unreal@outlook.com">unreal@outlook.com</a></p>
</div>
</div>
</div>
<div class="right-copyright">
<p>Copyrights 2023. Designed by Auspicoussoft.</p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script>
$(".video-icon").click(function(){
$(this).parents('.left-video').find('video').trigger('play');
$(this).hide();
$(this).parents('.left-video').addClass('played');
});
</script>
</body>
</html>
html{
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: 'Kumbh Sans', sans-serif;
}
a,
input,
select,
textarea,
p, ul, li {
margin: 0;
padding: 0;
text-decoration: none;
}
a, a:hover{
text-decoration: none;
transition: all ease-in-out 0.3s;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
}
.common-btn {
background: #FFF;
color: #282B8B;
font-size: 16px;
font-weight: 600;
line-height: normal;
letter-spacing: 2.6px;
text-transform: uppercase;
padding: 20px 35px;
display: inline-block;
transition: all ease-in-out 0.3s;
}
.common-btn:hover{
background:#8cc53f;
color: #fff;
}
.py-100{
padding-top: 100px;
padding-bottom: 100px;
}
/*-------------- navbar---------------------*/
header .navbar-nav .nav-item .nav-link {
color: #282B8B;
font-size: 16px;
font-weight: 600;
line-height: 28.8px;
text-transform: capitalize;
padding: 0;
}
header .navbar-nav .nav-item.active .nav-link {
color: #FFCA00;
}
header .navbar-nav .nav-item .nav-link:hover {
color: #FFCA00;
}
.right-call .call-detail p, .right-call .call-detail p a{
color: #282B8B;
font-family: Kumbh Sans;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28.8px;
}
.right-call .call-detail p a{
font-weight: 700;
}
.right-call {
display: flex;
align-items: center;
gap: 17px;
}
header .navbar {
padding: 23px 0;
}
.nav-btn a {
color: #fff;
background: #000;
font-size: 18px;
font-weight: 500;
width: 100%;
}
.nav-btn a:hover {
color: #fff;
}
ul.navbar-nav {
gap: 80px;
}
.offcanvas-header .close-btn {
border: 0;
background: transparent;
top: 15px;
position: absolute;
right: 15px;
color: #ffffff;
background: #8cc53f;
padding: 5px 10px;
}
header .navbar .navbar-brand {
margin: 0;
}
/*=========================== Hero-section css Start=============================*/
.main-hero {
position: relative;
}
.main-hero .hero-bg {
position: relative;
}
.main-hero .hero-bg .hero-bg {
position: relative;
width: 100%;
}
.main-hero .hero-bg .hero-overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0.2;
width: 100%;
}
.main-hero .hero-bg .hero-outr {
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
height: 100%;
}
.main-hero .hero-bg .Bulb {
position: absolute;
bottom: 0;
left: 34.5%;
transform: translateX(-50%);
}
.hero-content .left-hro-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.hero-content .left-hro-text h1 {
max-width: 610px;
color: #FFF;
font-size: 56px;
font-weight: 600;
line-height: 72.8px;
text-transform: capitalize;
}
.hero-content .left-hro-text .common-btn {
margin-top: 40px;
}
/*=========================== Hero-section css End=============================*/
/*=========================== icon-image-section css Start=============================*/
.inner-i-i-t .image-box {
text-align: center;
padding: 0 40px;
}
.inner-i-i-t .image-box h3 {
color: #414042;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 51px;
margin-bottom: 0;
}
.inner-i-i-t .image-box p {
color: #414042;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
/*=========================== icon-image-section css End=============================*/
/*=========================== Kt-solar-section css End=============================*/
.kt-solar .inner-kt-solar .left-kt img {
width: 100%;
}
.inner-kt .left-kt img {
width: 100%;
}
.inner-kt .col-lg-6 {
padding: 0;
}
.inner-kt {
background: #414042;
}
.right-kt {
position: relative;
padding: 80px 150px 125px 100px;
width: 50%;
margin: 0 0 0 auto;
}
.inner-kt .left-kt img {
width: 100%;
height: 966px;
}
.right-kt .kt-head-img {
position: relative;
}
.right-kt .kt-head-img h2 {
position: absolute;
top: 34%;
left: 57px;
transform: translateY(-50%);
color: #FFF;
font-size: 36px;
font-weight: 600;
line-height: normal;
margin: 0;
}
.kt-solar {
position: relative;
}
.inner-kt .left-kt {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50%;
}
.kt-solar {
position: relative;
/* padding-top: 160px; */
margin-top: 50px;
}
.right-kt p {
margin-top: 30px;
}
.right-kt p {
margin-top: 30px;
color: #FFF;
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
.right-kt p a {
text-decoration: underline;
font-weight: 600;
color: #fff;
}
.right-kt .common-btn {
margin-top: 60px;
}
/*=========================== Kt-solar-section css End=============================*/
/*=========================== Services-section css Start=============================*/
.right-gallery {
display: grid;
grid-template-columns: auto auto;
gap: 9px;
}
.inn-services .col-lg-6 {
padding: 0;
width: 49%;
}
.inn-services .row {
gap: 9px;
}
.inn-services .left-video {
height: 100%;
position: relative;
}
.inn-services .left-video span.video-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.inn-services .left-video video {
height: 100%;
object-fit: cover;
}
.right-gallery .in-img-gall {
position: relative;
}
.right-gallery .in-img-gall img {
width: 100%;
position: relative;
height: 100%;
}
.right-gallery .in-img-gall p {
position: absolute;
bottom: 45px;
color: #FFF;
font-size: 26px;
font-style: normal;
font-weight: 600;
line-height: 43.516px;
left: 38px;
}
.services {
padding-top: 162px;
padding-bottom: 100px;
}
/*=========================== Services-section css End=============================*/
/*=========================== Blog-section css Start=============================*/
.blog-sec {
background: linear-gradient(180deg, #82C341 -0.36%, #A1DE65 100.86%);
padding-top: 100px;
}
.blog-head h2 {
color: #FFF;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: 72.8px;
text-transform: capitalize;
}
.blog-head p {
max-width: 1230px;
margin: 0 auto;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28.8px;
text-transform: capitalize;
}
.inner-blog .blog-box {
margin-top: 45px;
}
.inner-blog .blog-box .blog-in-box {
background: #FFF;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
height: 655px;
position: relative;
}
.inner-blog .blog-box .blog-in-box img {
width: 100%;
position: relative;
height: 500px;
}
.inner-blog .blog-box .blog-in-box .blog-text {
background: #FFF;
padding: 40px 25px;
width: 400px;
position: absolute;
bottom: 0;
}
.inner-blog .blog-box .blog-in-box .blog-text span.date {
color: #282B8B;
font-size: 16px;
font-weight: 500;
line-height: 25px;
text-transform: capitalize;
display: inline-block;
margin-bottom: 20px;
}
.inner-blog .blog-box .blog-in-box .blog-text p {
color: #282B8B;
font-size: 18px;
font-weight: 500;
line-height: 30px;
margin-bottom: 28px;
}
.inner-blog .blog-box .blog-in-box .blog-text .blog-btn {
color: #282B8B;
font-size: 16px;
font-weight: 500;
line-height: normal;
letter-spacing: 2.6px;
text-transform: capitalize;
display: flex;
align-items: center;
}
.inner-blog .blog-box .blog-in-box .blog-text .blog-btn .arrow-icon {
display: inline-flex;
width: 60px;
height: 60px;
justify-content: center;
align-items: center;
border-radius: 30px;
border: 2px solid #FFCA00;
}
/*=========================== Blog-section css End=============================*/
/*=========================== request-quote-section css Start=============================*/
.inn-ouote .left-quote h2 {
color: #414042;
font-size: 36px;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
max-width: 486px;
margin-top: 30px;
margin-bottom: 20px;
}
.inn-ouote .left-quote p {
color: #414042;
font-family: Kumbh Sans;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 30px;
padding-right: 130px;
}
.inn-ouote .right-quote {
background: #FFF;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
padding: 60px;
}
.inn-ouote .right-quote form h2 {
color: #414042;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: 72.8px;
margin-bottom: 20px;
}
.inn-ouote .right-quote .inn-input input {
width: 100%;
border: 1px solid #C1C1C1;
background: #FFF;
padding: 20px 30px;
}
.inn-ouote .right-quote .inn-input textarea {
width: 100%;
margin-top: 22px;
border: 1px solid #C1C1C1;
background: #FFF;
padding: 20px 30px;
}
.inn-ouote .right-quote .inn-input .both-input input {
flex: 0 0 48%;
}
.inn-ouote .right-quote .inn-input .both-input {
display: flex;
justify-content: space-between;
margin-bottom: 22px;
}
.inn-ouote .right-quote .inn-input input::placeholder, .inn-ouote .right-quote .inn-input textarea::placeholder {
color: #8283A5;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.inn-ouote .right-quote .inn-input input:focus-visible, .inn-ouote .right-quote .inn-input textarea:focus-visible {
outline: none;
}
.inn-ouote .right-quote .inn-input .submit-btn {
display: block;
width: auto;
padding: 20px 63px;
border: 1px solid #282B8B;
background: #FFF;
color: #282B8B;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 2.6px;
text-transform: uppercase;
margin-top: 70px;
transition: all ease-in-out 0.3s;
}
.inn-ouote .right-quote .inn-input .submit-btn:hover{
background:#8cc53f;
color: #fff;
border-color: #8cc53f;
}
/*=========================== request-quote-section css End=============================*/
/*=========================== footer css Start=============================*/
footer {
background: #414042;
padding-top: 70px;
padding-bottom: 30px;
position: relative;
}
footer .line {
position: absolute;
top: 70px;
left: 0;
}
footer .lineimg {
width: 100%;
}
footer .footer-logo {
margin-top: 110px;
/* position: relative; */
}
footer .text-social {
margin-top: 42px;
text-align: center;
}
footer .text-social p {
color: #FFF;
text-align: center;
font-family: Kumbh Sans;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28.8px;
max-width: 1050px;
margin: 0 auto;
}
footer .text-social .socail-icon {
margin-top: 42px;
}
footer .text-social .socail-icon a {
display: inline-flex;
/* gap: 26px; */
padding: 0 13px;
}
footer .text-social .footer-menu {
margin-top: 42px;
display: flex;
justify-content: center;
list-style: none;
gap: 70px;
}
footer .text-social .footer-menu li a {
color: #FFF;
font-size: 18.667px;
font-style: normal;
font-weight: 400;
line-height: normal;
transition: all ease-in-out 0.3s;
}
footer .text-social .footer-menu li a:hover {
color: #FFCA00;
}
.bottom-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 55px;
}
.bottom-footer .left-bottom-foot {
display: flex;
align-items: center;
}
.bottom-footer .left-bottom-foot .phone-number {
display: flex;
align-items: center;
gap: 16px;
}
.bottom-footer .left-bottom-foot .phone-number .phone-detail p {
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: inline-block;
}
.bottom-footer .left-bottom-foot .phone-number .phone-detail p a {
color: #FFF;
font-size: 21.333px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top: 3px;
display: inline-block;
}
.bottom-footer .foot-email {
margin-left: 75px;
}
.bottom-footer .right-copyright p {
color: #FFF;
font-size: 18.667px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.bottom-footer .left-bottom-foot .phone-number .phone-detail {
display: flex;
flex-direction: column;
}
/*=========================== footer css End=============================*/
@media(min-width:1400px){
.container{
max-width: 1670px;
}
.icon-image-text .container {
max-width: 1426px;
}
.blog-sec .container {
max-width: 1560px;
}
}
@media(max-width: 1499px){
.main-hero .hero-bg .Bulb {
left: 38.2%;
}
.right-kt {
padding: 80px 70px 125px 70px;
}
.right-kt .kt-head-img h2 {
left: 40px;
}
}
@media(max-width: 1399px){
.hero-content .left-hro-text h1 {
max-width: 520px;
font-size: 43px;
font-weight: 600;
line-height: 62.8px;
margin: 0;
}
.main-hero .hero-bg .Bulb {
left: 39.8%;
}
.inner-i-i-t .image-box {
text-align: center;
padding: 0 0px;
}
.inner-kt .left-kt img {
width: 100%;
height: 900px;
object-fit: cover;
}
.right-kt {
padding: 60px 60px 60px 60px;
}
.right-kt .common-btn {
margin-top: 40px;
}
.right-gallery .in-img-gall p {
font-size: 18px;
left: 20px;
}
.services {
padding-top: 140px;
padding-bottom: 100px;
}
.inner-blog .blog-box .blog-in-box .blog-text {
width: 90%;
}
.inner-blog .blog-box .blog-in-box {
height: 515px;
}
.inner-blog .blog-box .blog-in-box img {
height: auto;
}
.inn-ouote .left-quote p {
padding-right: 0px;
}
.inn-ouote .right-quote {
padding: 40px;
}
.inn-ouote .right-quote .inn-input .submit-btn {
margin-top: 50px;
}
.bottom-footer .left-bottom-foot .phone-number .phone-detail p a {
font-size: 18.333px;
}
.bottom-footer .left-bottom-foot .phone-number .phone-icon img {
width: 40px;
}
}
@media(max-width: 1199px){
.hero-content .left-hro-text h1 {
font-size: 38px;
line-height: 52.8px;
}
.main-hero .hero-bg .Bulb {
left: 45.6%;
}
.hero-content .left-hro-text .common-btn {
margin-top: 30px;
}
ul.navbar-nav {
gap: 50px;
}
.inner-i-i-t .image-box h3 {
font-size: 20px;
}
.inner-i-i-t .image-box p {
font-size: 14px;
line-height: 25px;
}
.py-100 {
padding-top: 70px;
padding-bottom: 70px;
}
.right-kt {
padding: 40px;
}
.right-kt .kt-head-img h2 {
left: 30px;
font-size: 25px;
}
.right-kt p {
margin-top: 20px;
font-size: 16px;
line-height: 25px;
}
.inner-kt .left-kt img {
width: 100%;
height: 720px;
object-fit: cover;
}
.kt-solar {
margin-top: 30px;
}
.services {
padding-top: 100px;
padding-bottom: 70px;
}
.blog-sec {
background: linear-gradient(180deg, #82C341 -0.36%, #A1DE65 100.86%);
padding-top: 70px;
}
.blog-head p {
font-size: 14px;
}
.inner-blog .blog-box .blog-in-box .blog-text {
padding: 25px 25px;
}
.inner-blog .blog-box .blog-in-box .blog-text span.date {
margin-bottom: 15px;
}
.inner-blog .blog-box .blog-in-box .blog-text p {
margin-bottom: 15px;
}
.inner-blog .blog-box .blog-in-box {
height: 420px;
}
.inner-blog .blog-box .blog-in-box .blog-text p {
font-size: 16px;
line-height: 25px;
}
.right-gallery .in-img-gall p {
font-size: 15px;
left: 15px;
bottom: 20px;
}
.inner-blog .blog-box .blog-in-box .blog-text .blog-btn .arrow-icon {
width: 40px;
height: 40px;
}
.inn-ouote .right-quote form h2 {
line-height: 52.8px;
}
.inn-ouote .right-quote {
padding: 20px;
}
.inn-ouote .right-quote .inn-input input {
padding: 10px 10px;
}
.inn-ouote .right-quote .inn-input .submit-btn {
margin-top: 20px;
}
footer .footer-logo {
margin-top: 70px;
/* position: relative; */
}
footer .text-social .footer-menu {
gap: 50px;
margin-top: 30px;
}
.bottom-footer .left-bottom-foot .phone-number .phone-icon img {
width: 30px;
}
.bottom-footer .left-bottom-foot .phone-number .phone-detail p a {
font-size: 16.333px;
}
.bottom-footer .foot-email {
margin-left: 55px;
}
.bottom-footer .left-bottom-foot .phone-number .phone-detail p {
color: #FFF;
font-size: 14px;
}
.bottom-footer .right-copyright p {
font-size: 16px;
}
footer .text-social {
margin-top: 30px;
}
.bottom-footer {
margin-top: 35px;
}
footer .text-social .socail-icon {
margin-top: 30px;
}
}
@media(max-width: 991px){
}
@media(max-width: 767px){
}
@media(max-width: 575px){
}
