* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.content.home-content {
  width: 100%;
  overflow-x: hidden;
}
.home-content .hero-section {
    position: relative;
    height: 100vh;
    background-image: url('../home-images/home-hero.png'); /* Replace with the actual path of your image */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-content .overlay {
    text-align: center;
}

.home-content .hero-section h1 {
    /* margin: 0 auto 24px; */
    font-weight: 600;
    font-size: 50px;
    line-height: 59px;
    color: #FFFFFF;
    margin-bottom: 12px;
font-family: Raleway, sans-serif;

}

.home-content h1 span {
    color: #36A9E1;
    font-weight: 600;
    font-size: 50px;
    line-height: 59px;
}

.home-content .hero-section p{
    margin: 0 auto 32px;    
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
font-family: Lato, sans-serif;
}

.home-content .right-container{
    position: absolute;
    width: 70%;
    height: 52px;
    right: 0;
    bottom: 0;
    background: #36A9E1;
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
}
.home-content .left-container{
    position: absolute;
    width: 30%;
    height: 46px;
    left: 0;
    bottom: -46px;
    background: #E30613;
    clip-path: polygon(0% 0, 100% 0, 90% 100%, 0 100%);
}
.home-content .hero-button{
    width: 265px;
    height: 50px;
    background: radial-gradient(72.43% 247.55% at 49.47% -144.28%, #FFFFFF 0%, #FFFFFF 100%);
    box-shadow: 0px 2.2546px 4.41543px #36A9E1;
    border-radius: 27.478px;
    font-weight: 600;
    font-size: 18px;
    line-height: 17px;
    text-transform: capitalize;
    color: #2E2E2E;
    border: none;
font-family: Raleway, sans-serif;

}
.home-content .who-we-are-section{
    background-color: #FFFFFF;
    padding-top: 140px;
}
.home-content .who-we-are-section p{
    max-width: 896px;
    margin: 0 auto;
}
.home-content .who-we-are-section p span{
    position: relative;
    padding: 5px;
}
.home-content .who-we-are-section  h1{
    font-weight: 600;
    font-size: 50px;
    line-height: 59px;
    color: #2E2E2E;
    margin-bottom: 10px;
font-family: Raleway, sans-serif;
}
.home-content .who-we-are-section p{
    font-weight: 500;
    font-size: 20px;
    line-height: 126.77%;
    text-align: center;
    color: #494949;
    margin-bottom: 30px;
font-family: Lato, sans-serif;
}
.home-content .who-we-are-section img.wave{
    width: 100%;
    height: auto;
    bottom: -4px;
    position: relative;
}
.home-content .product-section {
  background-color: #36A9E1;
  
}
.left-border{
padding:  0 80px;
border-left: 2px solid rgba(255, 255, 255, 0.5);
padding-left: 0 !important;
 position: relative;
}


.left-border {
  position: relative;
}

.border-line2 {
  position: sticky; /* So it scrolls with the page */
  top: 100px;       /* Initial position from top */
  left: 0;
  width: 5px;
  height: 100px;
  background-color: #FFFFFF;
  transition: top .2s ease-out;
  z-index: 999;
border-top: none;
}
.left-border1{
padding:  0 80px;
border-left: 2px solid rgba(83, 83, 83, 0.5);
padding-left: 0 !important;
 position: relative;
}
.border-line-blue {
  position: sticky; /* So it scrolls with the page */
  top: 100px;       /* Initial position from top */
  left: 0;
  width: 5px;
  height: 100px;
  background-color: #36A9E1;
  transition: top .2s ease-out;
border-top: none;
z-index: 2;
}

.home-content .product-content {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
padding: 154px 0;
margin-top: -50px
}

.home-content .section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0;
margin-bottom: 30px
}

.home-content .section-heading h1 {
font-family: Raleway, sans-serif;
  font-weight: 600;
  font-size: 50px;
  color: #fff;
  line-height: 59px;    
  padding: 0 20px 0;
}

.home-content .section-heading p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;

  max-width: 600px;
font-family: Lato, sans-serif;
}

/* Arrows */
.home-content .buttn-np {
  position: absolute;
  top: 70px;
  right: 0;
  display: flex;
  gap: 29px;
}

.home-content .slick-dots li button:before {
    font-family: 'slick';
    font-size: 7px;
    line-height: 20px;
    position: absolute;
    top: -3px;
    left: -3px;
    width: 13px;
    height: 13px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.home-content .slick-dots li {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50px;
}

.home-content .slider-content {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  max-height: 227px;
  box-sizing: border-box;
  margin-right:10px;
  gap: 20px;
  overflow: hidden;
}

.home-content .slider-content h2 {
  font-weight: 600;
  font-size: 28px;
  color: #494949;
  max-width: 200px;
font-family: Raleway, sans-serif;
}


.home-content .slider-content img {
  max-height: 227px;
  max-width: 370px;
  object-fit: contain;
}

/* Dots */
.home-content .slick-dots {
  text-align: center;
  margin-top: 50px;
}

.home-content .slick-dots li button:before {
  font-size: 7px;
  color: #fff;
  opacity: 1;
}

.home-content .slick-dots li.slick-active button:before {
    color: #fff !important;
    border: 2px solid #fff !important;
    padding: 2px;
    border-radius: 50%;
    width: 20px;
    height: 20px
}
.home-content .slick-prev:before, .slick-next:before{
    opacity: 1 !important;

}
.home-content .slick-dots li button{
    color: #fff !important;

}
.home-content .slick-dots li button:before{
    color: #fff !important;

}

.home-content .slick-dots {
    bottom: -60px !important;
}
.home-content .slick-prev:before, .slick-next:before {
     font-family: unset !important;
}
.home-content .slick-next {
    right: 0px !important;
}
.home-content .slick-prev {
    left: -50px !important;
}
.why-space-section{
    background-color: #fff;
}
.why-space-section .section-content{
    max-width: 1600px;
    margin: 0 auto;
}
.why-space-section  h1{
    font-weight: 600;
    font-size: 50px;
    line-height: 59px;
    color: #2E2E2E;
}
.home-content .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 26px; 
margin: 100px 0;
}
.home-content .card {
  flex: 1 1 calc(33.33% - 20px);
  box-sizing: border-box;
  background: #f5f5f5;
  box-shadow: 0px 2px 23.4px rgba(0, 0, 0, 0.25);
  padding: 20px;
  border-radius: 8px;
  position: relative;

}

.why-space-section .cards .card{
    padding: 45px 54px 0px;
    background-color: #FFFFFF;
}
.why-space-section .cards .card:hover{
    background-color: #36A9E1;
}
.home-content .cards .card:first-child:hover {
background-color: #ffffff;
}
.why-space-section .cards .card:hover h2, .why-space-section .cards .card:hover p{
  color: #ffffff;
}
.home-content .cards .card:nth-child(1){
     box-shadow: unset;
     margin: auto 0;
     padding-top: 0px;
    padding: 0 20px 0;
    border-radius: unset;
border: none
}
.home-content .card img{
    height: 86px;
    width: 307px;
}

.why-space-section h2{
    font-weight: 600;
    font-size: 28px;
    line-height: 127%;
    letter-spacing: 0.01em;
    color: #2E2E2E;
    margin-bottom: 22px;
font-family: Raleway, sans-serif;
}
.why-space-section p{
    font-weight: 500;
    font-size: 20px;
    line-height: 126.77%;
    color: #494949;
    margin-bottom: 36px;
}
.home-content p.number{
    font-weight: 400;
    font-size: 128px;
    line-height: 66%;    
    letter-spacing: 0.01em;
    color: #36A9E1;
    opacity: 0.35;
    margin-bottom: -9px;
    text-align: right;

}

.trina-solor-section{
    position: relative;
    height: 100vh;
      background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 109.12%), 
              url(../home-images/solor.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    height: 433px;
    text-align: center;
    padding-top: 50px;
}
.trina-solor-section h1{
    font-weight: 600;
    font-size: 50px;
    line-height: 59px;
    color: #36A9E1;
    margin-bottom: 10px;
font-family: Raleway, sans-serif;
}
.trina-solor-section h1 img{
height: 47px;
}
.trina-solor-section p{
    font-weight: 500;
    font-size: 20px;
    line-height: 126.77%;
    text-align: center;
    color: #494949;
    margin-bottom: 30px;
font-family: Lato, sans-serif;
}

@media (max-width: 1240px) and (min-width: 1024px) {
  .home-content .card {
    flex: 1 1 calc(33% - 20px);

  }
  .home-content .hero-section {
    flex-direction: column;
    padding: 40px 20px;
  }
}
@media screen and (min-width: 1124px) {

   .home-content .cards .card{
        min-height: 343px;
    }

}
@media screen and (min-width: 1024px) {
  .home-content  p.number{
            font-weight: 400;
    font-size: 128px;
    line-height: 66%;
    letter-spacing: 0.01em;
    color: #36A9E1;
    opacity: 0.35;
    margin-bottom: -9px;
    text-align: right;
    position: absolute;
    bottom: 15px;
    right: 15px;
    pointer-events: none;

    }

   .home-content .cards .card:nth-child(1) {
        min-height: unset;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
.trina-solor-section{
  height: 275px;
  max-height: 275px;
}
   .home-content .hero-button{
    display: none;
  }
.home-content .hero-section{
    height: 330px;
  }
  .home-content .right-container{
    height: 13.22px;
}
.home-content .left-container{
    height: 13.22px;
    bottom: -13px;
}
.who-we-are-section .overlay{
 padding: 0 30px;
  
 }
  .who-we-are-section{
padding: 50px 0 0;
padding-top: 50px !important;
}
.who-we-are-section .overlay img{
  height: 20px;
}
.who-we-are-section p span {
    position: relative;
    padding: 5px;
}


 .home-content  h1, .home-content h1 span {
    font-weight: 600  !important;
    font-size: 20px  !important;
    line-height: 23px  !important;
    text-align: center;
    
  }

 .home-content p {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 18px !important;
  }
  .home-content .hero-button {
    width: 100%;
  }
  .home-content .product-section {
    padding: 20px 24px;
  }
.home-content .product-content {
padding: 0px;

}
 .home-content .why-space-section {
    padding: 0px 24px;
  }
 .home-content .why-space-section img{
  max-height: 70px;
  height: 70px;
  width: auto;
}
.home-content .cards .card:nth-child(1) {
   display: flex;
   gap: 10px;
   /*justify-content: center;*/
   align-items: center;
}
  .home-content  p.number {
        font-weight: 400;
        font-size: 80px !important;
        line-height: 67% !important;
        letter-spacing: 0.01em !important;
        opacity: 0.35;
        text-align: right;
        max-width: unset;
    }
  .home-content h2{
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 127% !important;
    letter-spacing: 0.01em;
  }
.home-content .section-content h1, .section-content p {
    max-width: 500px ;
  }
  .trina-solor-section h1 img{
  height: 22px;
}
.home-content .slider-content img {
    max-height: 138px;
    max-width: 370px;
    object-fit: contain;
}
.home-content .slick-dots {
    bottom: -38px !important;
}
  .home-content .card {
    flex: 1 1 calc(50% - 20px);

  }
  .home-content .slider-content img {
      max-height: 136px;
  }

}
@media (max-width: 768px) {
.home-content .product-content{
        padding: 0 0 50px 0;
}
.trina-solor-section{
  height: 275px;
  max-height: 275px;
}
   .home-content .hero-button{
    display: none;
  }
.home-content .hero-section{
    height: 330px;
  }
  .home-content .right-container{
    height: 13.22px;
}
.home-content .left-container{
    height: 13.22px;
    bottom: -13px;
}
.who-we-are-section .overlay{
 padding: 0 30px;
  
 }
  .who-we-are-section{
padding: 50px 0 0;
padding-top: 50px !important;
}
.who-we-are-section .overlay img{
  height: 20px;
}
.who-we-are-section p span {
    position: relative;
    padding: 5px;
}


 .home-content  h1, .home-content h1 span {
    font-weight: 600  !important;
    font-size: 20px  !important;
    line-height: 23px  !important;
    text-align: center;
    
  }

 .home-content p {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 18px !important;
  }
  .home-content .hero-button {
    width: 100%;
  }
  .home-content .product-section {
    padding: 0px 24px;
  }
 .home-content .why-space-section {
    padding: 0px 24px;
  }
.border-line-blue {
height: 60px;

}
 .home-content .why-space-section img{
  max-height: 70px;
  height: 70px;
  width: auto;
}
.home-content .cards .card:nth-child(1) {
   display: flex;
   gap: 10px;
   /*justify-content: center;*/
   align-items: center;
}
  .home-content  p.number {
        font-weight: 400;
        font-size: 80px !important;
        line-height: 67% !important;
        letter-spacing: 0.01em !important;
        opacity: 0.35;
        text-align: right;
        max-width: unset;
    }
  .home-content h2{
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 127% !important;
    letter-spacing: 0.01em;
  }
.home-content .section-content h1, .section-content p {
    max-width: 500px ;
  }
  .trina-solor-section h1 img{
  height: 22px;
}
.home-content .slider-content img {
    max-height: 138px;
    max-width: 370px;
    object-fit: contain;
}
.home-content .slick-dots {
    bottom: -38px !important;
}
}
/* Tablet (max-width 768px) */
@media (max-width: 768px) {
 .home-content .card {
    flex: 1 1 calc(50% - 20px); /* 2 per row */
  }
  .home-content .buttn-np {
    position: absolute;
    top: -23px;
}
    .home-content .product-content {
padding-top: 50px
}
}
/* Mobile (max-width 480px) */
@media (max-width: 480px) {
 .home-content .card {
    flex: 1 1 100%; /* 1 per row */
  }
.home-content p.number{
margin-bottom: -1px
}

}

@media (max-width: 480px) {
.home-content .section-heading{
padding: 30px 0 0px 0;
}
.border-line-blue{
width: 3px;
height: 30px;
z-index: 2
}
.home-content .why-space-section{
padding: 0 20px
}
  .home-content .hero-button{
    display: none;
  }
  .home-content .hero-section{
    height: 277px;
  }
   .home-content .right-container{
    height: 13.22px;
}
.home-content .left-container{
    height: 13.22px;
    bottom: -13px;
}
 .who-we-are-section .overlay{
 padding: 0 30px;
  
}
.who-we-are-section p span {
    position: relative;
    padding: 5px;
}
  .home-content .hero-section,
  .why-space-section,
  .trina-solor-section {
    padding: 40px 24px;
  }
    .who-we-are-section{
        padding: 52px 0 0;
    }
   .home-content .slick-dots{
      display: none !important;  
    }
   .home-content .product-section .section-heading{
    flex-direction: column;
    margin-bottom: 0px;
padding: 0 20px;
}
.border-line2{
width: 3px;
height: 30px;
z-index: 2
}
.home-content .buttn-np {
    top: unset;
    right: 30%;
    display: flex;
    gap: 18px;
    bottom: 5%;
}
.home-content .slider-content.slick-slide{
  flex-direction: column;
  align-items: unset;
border-radius: 0;
}
.home-content .slider-content img {
    max-height: 148px !important;
}
.home-content .product-section
 {
    padding: 0 24px;
  }
.home-content .product-content{
padding: 20px 0 20px 0;
margin-top: -30px
}
.why-space-section img{
  max-height: 40px;
  height: 40px;
  width: auto;
}
.home-content .cards .card:nth-child(1) {
   display: flex;
   gap: 10px;
   justify-content: center;
}
.home-content .cards {
    gap: 10px;
margin: 0
}
.home-content .card h2, .home-content .card p{
  max-width: 220px;
  text-align: left;

}
.why-space-section .cards .card {
    padding:20px 14px 0;
} 
 .home-content h1, .home-content h1 span{
    font-weight: 600  !important;
    font-size: 20px  !important;
    line-height: 23px  !important;
    text-align: center;
    margin-bottom: 12px;
    
  }


 .home-content p {
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    /* text-align: center; */
  }
   .home-content p.number {
font-weight: 400;
font-size: 80px !important;
line-height: 67% !important;
letter-spacing: 0.01em !important;
opacity: 0.35;
text-align: right;
max-width: unset;
bottom: 5px;
        position: relative;
}
.trina-solor-section h1 img{
  height: 22px;
}
.trina-solor-section{
  height: 275px;
  max-height: 275px;
}
 .home-content  h2{
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 127% !important;
    letter-spacing: 0.01em;
  }

 .home-content .card {
    flex: 1 1 100%;
  }
  .why-space-section h1{
      margin-bottom: 0px;
  }
   .home-content .why-space-section img{
  max-height: 40px;
  height: 40px;
  width: auto;
}
}
.home-content .card{
            text-align: left;
}