body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.hero {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/banner.jpg");
background-size: cover;
  background-position: center;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  color: white;
}

/*.hero::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 0; left: 0; right: 0; bottom: 0;*/
/*  background: rgba(0, 0, 0, 0.5); */
/*  z-index: 1;*/
/*}*/

.hero-content {
  text-align: center;
  position: relative;
  /*z-index: 2;*/
}

.hero-content h1 {
  margin: 0;
}

.hero-content p {
  font-size: 1.2rem;
  margin-top: 10px;
}

.primary-font {
    font-family: Raleway;
}
.hero-title {
    font-family: Raleway;
font-weight: 600;
font-size: 50px;
line-height: 100%;
letter-spacing: 0%;
}
.hero-description {
     font-family: Raleway;
    font-family: Lato;
font-weight: 300;
font-size: 20px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.hero-bottom-line {
    width: 1035.5;
height: 52;
top: 606px;
left: 1444.5px;
angle: -180 deg;

}
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/banner.jpg");
background-size: cover;
  background-position: center;
  height: 550px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: left;
  padding: 0 80px;
}

/*.hero::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 0; left: 0; right: 0; bottom: 0;*/
/*  background: rgba(0, 0, 0, 0.4);*/
/*  z-index: 1;*/
/*}*/

.hero-content {
  position: relative;
  /*z-index: 2;*/
  max-width: 600px;
}

.hero-title {
  font-family: Raleway, sans-serif;
  font-weight: 600;
  font-size: 50px;
  line-height: 1;
  position: relative;
  display: inline-block;
}

.hero-span {
  display: inline-block;
}

.red-line {
  position: absolute;
 background-color: #E30613;
 width: 30%;
height: 46px;
top: 100%;
left: -31px;
 transform: skewX(-43deg);
}

.hero-description {
  font-family: Lato, sans-serif;
  font-size: 20px;
  margin-top: 20px;
  color: white;
}

.blue-line {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 71%;
  height: 52px;
  background-color: #009FE3;
  z-index: 2;
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 104%);
}
.tabs-section {
  padding: 175px 80px 80px 80px;
  font-family: 'Raleway', sans-serif;
}

.tabs {
  display: flex;
  gap: 21px;
  justify-content: center;
  margin-bottom: 60px;
}

.tab-btn {
  padding: 18px 45px;
  border: 1px solid #C5C5C5;
  background-color: white;
  color: #565656;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Raleway', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;

}

.tab-btn.active {
  background-color: #009FE3;
  color: white;
  border: none;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

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

.grid-item {
  background-color: #ffffff; 
  padding: 20px;
  justify-content: space-around;
  font-weight: 500;
  height: 300px;
  text-align: center;
  display: flex;
  border-radius: 8px;
  border: 1px solid #0000001A; 
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);

}

.tab-solar-images {
width: 100px;
height: 100px;

}


.tab-solar-title {
  color: #2E2E2E;
font-weight: 600;
font-size: 20px;
letter-spacing: 1%;
text-align: left;
}

.installation-support {
  background-color: #36A9E1;
  padding: 80px;
  color: white;
  text-align: center;
}

.support-heading {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
  font-family: 'Raleway', sans-serif;
}

.support-heading span {
  font-style: italic;
}

.support-subtext {
  font-size: 16px;
  margin-bottom: 40px;
}

.support-grid {
  display: block;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  /* max-width: 1000px;
  margin: 0 auto; */
}

.support-box {
  background-color: #FFFFFF;
  color: #333;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 20px;
  width: 50%;
}

.support-box img {
  background: #EEEEEE;
  padding: 20px;

  object-fit: contain;
  flex-shrink: 0;
}

.support-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 17px 0;
}

.support-content p {
  font-size: 14px;
  margin: 0;
  color: #666;
text-align: left
}
.support-title{
 font-family: Raleway, sans-serif;
font-weight: 600;
color: #2E2E2E;
font-size: 26px;
line-height: 100%;
letter-spacing: 0%;
}

.support-description {
font-family: Raleway, sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
color: #494949;
}
.installation-first-container {
  margin-bottom:  20px;
}

.support-installation {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
gap: 20px
}

.testimonials {
  padding: 80px;
  background: #fff;
  /* text-align: center; */
}

.testimonials-heading {
  font-size: 50px;
  margin-bottom: 40px;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  font-weight: 700;
  line-height: 48px;
}

.testimonials-heading span {
  color: #009fe3;
  font-style: italic;
  font-weight: 600;
}

.testimonial-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.testimonial-name {
  font-weight: 600;
  margin: 4px 0;
  font-size: 26px;
  line-height: 48px;
  color: #2E2E2E;
}

.testimonial-title {
  color: #232323;
  font-size: 18px;
  margin-bottom: 25px;
  font-weight: 600;
  line-height: 20px;
  margin-top: 0;
text-align: left;
}

.testimonial-text {
  font-size: 18px;
  color: #494949;
  font-weight: 400;
  line-height: 24px;
text-align: left;
margin-top: 24px
}
.testimonial-img{
  display: flex;
  justify-content: space-between;
}
.slick-track{
  justify-content: center;
  display: flex !important;
}
@media (max-width: 1024px) {
  .tabs-section .img{
  width: 50%;
          height: 250px;
        
}
}
@media (max-width: 768px) {
  .grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .tabs-section{
    padding: 100px 30px 50px 30px;
  }
  .support-box{
    width: calc(50% - 10px);
  }
  .installation-support{
    padding: 50px 20px;
  }
  .testimonials{
    padding: 50px 20px;
margin-bottom: 50px
  }
}
@media (max-width: 576px) {
.hero{
height: 277px
}
  .tabs-section {
    padding: 80px 16px 30px 16px;
    font-family: 'Raleway', sans-serif;
}
  .tabs-section .img{
  width: 100%;
                height: 230px;
object-fit: cover;
       
}
.grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}
.grid-item {
  display: grid;
}
.support-installation{
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
gap: 0
}
.support-box {
  width: 100%;
  margin-bottom: 20px;
}
.testimonials{
  padding: 30px 16px;
margin-bottom: 30px
}
.tabs {
  margin-bottom: 20px;
}
.installation-support{
  padding: 30px 16px 30px 16px;
}
.hero-content h1{
  font-size: 20px;
}
.hero-content p{
  font-size: 12px;
}
.testimonials-heading{
  font-size: 20px;
  margin-bottom: 20px;
}
.tab-btn{
  font-size: 12px;
padding: 10px 10px;
}
.tab-solar-title{
  font-size: 16px;
text-align: center;
}
.support-heading{
  font-size: 20px;
}
.support-subtext{
  font-size: 12px;
}
.support-content h3{
  font-size: 16px;
}
.support-content p{
  font-size: 12px;
}
.testimonial-name{
  font-size: 20px;
}
.testimonial-title{
  font-size: 12px;
}
.testimonial-text{
  font-size: 12px;
}
.slick-track{
  justify-content: center;
 
}
.slick-track{
  margin: 0  !important;
}

}
@media (max-width: 375px){

{
  font-size: 12px;
padding: 10px ;
}
}
.custom-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-left: 0;
    list-style: none;
  }

  .custom-dots li {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #36a9e1; /* Light blue fill */
    margin: 0 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .custom-dots li.active {
    background-color: #36a9e1; /* Darker blue center */
  }

  .custom-dots li.active::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    width: 22px;
    height: 22px;
    border: 2px solid #36a9e1;
    border-radius: 50%;
    box-sizing: border-box;
  }