:root{
  --primary-font: "Poppins", sans-serif;
   --font-two:#15629e;
  --font-color:#e59924;
  --secondary-font: "Montserrat", sans-serif;
  --inter-font:"Inter Tight", sans-serif;
}
@media(max-width:997px){
    
.card-body1 {
    padding: 20px 10px!important;
}
    .card-1{
    margin-bottom: 20px!important;
}
    .work{
        padding: 0px!important;
    }
   .bg-img{
    height: auto!important;
   } 
   .content-img{
    margin-top: 130px!important;
    width: auto!important;
}
.sanju-img img{
    margin-top: 10px!important;
    height: 400px;
}
.main-service{
    display: flex;
     gap: 45px!important;
    padding-top: 100px;
}
}
.bg-img{
    background-image: url(/Images/residential-solar-img2.webp);
    height: 600px;
    background-repeat: no-repeat;
    background-size: cover;
}
.content-img h1{
    border-radius: 5px;
    font-family: var(--primary-font);
    font-weight: 600;
    background-color: white;
    width: fit-content;
    padding: 5px 6px;
   font-size: 35px;
    color: var(--font-color);
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    
}
.content-img{
    margin-top: 220px;
 
}
.content-img p{
    font-weight: 500;
    color: whitesmoke;
    text-align: justify;
    margin-top: 30px;
    margin-bottom: 20px;
    font-family: var(--secondary-font);
    font-size: 17px;
}
.content-arow{
    display: flex;
    gap: 20px;
}
.content-arow h5 a{
    padding: 5px;
    background-color: #15629e;
    border-radius: 5px;
    text-decoration: none;
    color: whitesmoke;
    font-weight: 500;
}

.content-arow i{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    color: white;
}
.sanju-img img{
    margin-top: 170px;
    height: 400px;
}
.sanju-img {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* how its work  */
.img-content img{
    border-top: 5px solid var(--font-color);
    border-bottom: 5px solid var(--font-color);
    border-radius: 20px;
    height: 400px;
    width: 600px;
}
.work{
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
}
.how-it-work{
    margin-top: 100px;
    margin-bottom: 70px;
}
.work h2{
    color: var(--font-two);
    font-family: var(--inter-font);
    font-weight: 600;
    margin-bottom: 20px;
}
.work p{
    font-family: var(--primary-font);
    font-size: 17px;
    line-height: 26px;
    text-align: justify;
    color: gray;
}

/* Benefits of Installing Residential Rooftop Solar  */
.heading h2{
    text-align: center;
    font-family: var(--primary-font);
    font-weight: 600;
    margin-bottom: 50px;
 color: var(--font-two);
}
.card-1{
    margin-bottom: 60px;
}
.card-1:hover{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* service  */
.bg-service{
      background-attachment: fixed !important;
    background: linear-gradient(#15639efb, rgba(0, 0, 0, 0.711)), url(/Images/blogs/commercial-gemini.jpg), no-repeat center center;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
        --swiper-theme-color: #000;

}
.main-service{
    display: flex;
     gap: 20px;
    padding-top: 100px;
}
.our-service h5{
    padding: 5px;
    font-size: 18px;
    border-radius: 20px;
    width: fit-content;
    border:3px solid #e59924;
    color: whitesmoke;


}
.our-service{
    width: 15%;
}
.header-content h2{
    font-family: var(--primary-font);
    color: white;
}
.header-content p{
    line-height: 30px;
    font-family: var(--secondary-font);
    color: white;
}
.card-2{
    margin-top: 30px;
    color: white;
    background-color:transparent;
    border: none;
}
.card-body1{
    padding: 40px 10px;
}
.card-2 img{
    border: 8px solid #e59824ee;
    border-radius: 20px;
}
.card-title1{
    font-family: var(--primary-font)!important;
  
}
.card-title{
    font-size: 20px!important;
}