body {
 background-color: #ECF3EB;
 font-family: "Helvetica", Sans-serif;
}

.green_bg {
   background: linear-gradient(to bottom, #03662F 80%, transparent 30%);
}
.green_bg2 {
  background: #03662F;    
}
.side_bg {
/* background: linear-gradient(67deg, #cde0ca 40%, transparent 69%); */
  background: linear-gradient(140deg, #cde0ca 0%, transparent 55%);
}
.side_bg_2 {
 background: linear-gradient(90deg, #cde0ca 2%, transparent 2%);
}
.side_bg_r {
 background: linear-gradient(-140deg, #cde0ca 0%, transparent 55%);
}

.navbar {
 z-index: 1053;
 
 
}
.navbar-toggler {
 background-color: #03662f;
 width: 93px;
 height: 93px;

}

.main_text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center content */
  align-items: flex-start;
/*  height: 70vh;  Full height of the viewport */  
  min-height: 375px;
  padding-left: 2%; /* Optional padding for spacing */
   transform: translateY(-75px);
}

.h1-main {
  font-size: 80px;
  font-weight: 700;
  text-transform: none;
  line-height: 80px;
  letter-spacing: -2.25px;
  color: #f6da75;
  margin-right: 30%;
}
.h2_green {
  font-family: "Helvetica", Sans-serif;
  font-size: 40px;
  font-weight: bold;
  text-transform: none;
  line-height: 44px;
  letter-spacing: -1.13px;
  color: #03662F;
}
.h3_thumbs {
 color: #fff;
}
.h3_green {
  font-size: 19px;
  font-weight: bold;
  line-height: 19px;
  color: #03662F;
}

.p-home {
font-family: "Helvetica", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0px;
  color: #f6da75;
  max-width: 535px;
}
p  {
  color: #000000;
  font-family: "Helvetica", Sans-serif;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0px;
}
.green_link {
 color: #03662F;
 font-size: 15px;
 font-weight: 700;
}

.flex {
 align-self: flex-start;
}


.home_image2 {
 margin-left: -25%;
 display: inline-block;
 
 max-width: 100%;
 vertical-align: middle;
 z-index: 1;
}

.square_img {
 z-index: 2;
 transform: translate(-225px, -25px);
 box-shadow: 10px 15px 15px 0px rgba(0, 0, 0, 0.4);
}

.svgs {
 width: 130px;
 height: auto;
}
.svg_footer { 
 width: 24px;
filter: invert(88%) sepia(90%) saturate(500%) hue-rotate(355deg) brightness(85%) contrast(90%);

}
.pk_tr_im {
 max-width: 375px;}
.left_footer {
 background-color: #cde0ca;
}
.right_footer {
 background-image: url(/images/outdoor_patio.jpg);
 background-size: cover;
 background-position: bottom center; 
 height: 310px;

}
.pre_footer { 
 margin-top: 150px;
 border-top: 1px solid #97c190;
}
.footer {
 background: #03662F;

}
.footer_bar {
 background: #062919;
}
.footer_bar a {
 color: #F2E6BA;
 text-decoration: none;
}
.footer_bar  a:hover {
 color: #54a17e;
}


.footer p {
 font-size: 16px;
 color: #F2E6BA;
}
.footer h4 {
 color: #F2E6BA;
 font-size: 17px; 
}
.footer a {
 color: #f6da75;
 text-decoration: none;
}
.footer  a:hover {
 color: #54a17e;
}
.footer_logo {
 max-width: 135px;
}
.offer_imgs {
 box-shadow: 10px 15px 15px 0px rgba(0, 0, 0, 0.3);
}


@media (max-width: 1599px) {
  .home_image2 {
    margin-left: -10%;
   
  }
}

@media (max-width: 1399px) {
  .h1-main {
   font-size: 60px;  
   ling-height: 60px;
  }
  .p-home {
   padding-right: 155px;  
  }
}

@media (max-width: 1199px) {
  .h1-main {
   margin-right: 5%;
   margin-top: 50px; 

  }
  .p-home {
   padding-right: 0;  
  }
  .home_image2 {
   margin-top: -50px;
   margin-left: 0;
   display: flex;
   justify-content: center;
  }
  .h4_footer {
   font-size: 30px;
   line-height: 35px;
  }
}

@media (max-width: 991px) {
  h1 {

  }
}

@media (max-width: 767px) {
  .h1-main {
   font-size: 40px; 
   line-height: 45px;
   letter-spacing: 1px;
  }
  .home_image2 {
   padding-left: 70px;
   padding-right: 40px;
  }
  
  
  .square_img {
  transform: translate(-150px, -30px); /* Center horizontally */
  max-width: 80%; /* Adjust size without breaking responsiveness */
  height: auto;
  }
    .navbar {
    width: 100%; /* Allows full width without padding */
    display: flex;
    justify-content: flex-end; /* Pushes button to the right */
  }
  
}

@media (max-width: 575px) {
  .square_img {
  transform: translate(-110px, -30px); /* Center horizontally */
  max-width: 80%; /* Adjust size without breaking responsiveness */
  height: auto;
  }
  .navbar {
   position: fixed;

   right: 0;
   padding-top: 5%;
   padding-right: 5%;

  }
}