public/css/styles.css

@@ -306,6 +306,80 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.plus-minus {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background: var(--body-bg-color);
+  gap: 20px;
+  margin: 0 0 20px 0;
+  border-radius: 12px;
+  padding: 20px;
+}
+@media (max-width: 768px) {
+  .plus-minus {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 16px 12px;
+  }
+}
+.plus-minus__column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: #fff;
+  border-radius: 8px;
+  font-size: 16px;
+  padding: 20px;
+}
+@media (max-width: 768px) {
+  .plus-minus__column {
+    padding: 16px;
+  }
+}
+.plus-minus__column:first-child .plus-minus__item:before {
+  content: "";
+  display: block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  background: url("../images/icon-property-on.svg") no-repeat center center;
+}
+.plus-minus__column:last-child .plus-minus__item:before {
+  content: "";
+  display: block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  background: url("../images/icon-property-off.svg") no-repeat center center;
+}
+.plus-minus__item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-left: 40px;
+  position: relative;
+}
+@media (max-width: 768px) {
+  .plus-minus__item {
+    gap: 12px;
+  }
+}
+.plus-minus__item .icon {
+  flex-shrink: 0;
+}
+@media (max-width: 768px) {
+  .plus-minus__item .icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 .header {
   position: fixed;
   width: 100%;
@@ -399,8 +473,6 @@ h1, h2, h3, h4, h5, h6 {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .header__btn--secondary {
-  border: 1px solid var(--accent-color);
-  background: var(--accent-color);
   color: #fff;
 }
 .header__btn--secondary:hover {
@@ -547,7 +619,7 @@ h1, h2, h3, h4, h5, h6 {
   font-style: normal;
   font-weight: 400;
   line-height: 20px; /* 142.857% */
-  color: var(--body-bg-color);
+  color: #fff;
 }
 @media (max-width: 768px) {
   .footer__text {
@@ -824,7 +896,7 @@ h1, h2, h3, h4, h5, h6 {
   aspect-ratio: 1/1;
   font-weight: 600;
   background-color: var(--accent-color);
-  color: var(--body-bg-color);
+  color: #fff;
   flex-shrink: 0;
   border-radius: 50%;
 }
@@ -1039,7 +1111,7 @@ h1, h2, h3, h4, h5, h6 {
   position: absolute;
   bottom: 12px;
   right: 12px;
-  color: var(--text-color);
+  color: #fff;
   font-size: 12px;
   font-style: normal;
   font-weight: 700;

public/images/icon-property-off.svg

@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 24 24"   xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="#F5294D" />
+<rect id="Rectangle 21" x="5.25" y="10.8003" width="13.5" height="2.4" rx="1.2" fill="white"/>
+</svg>

public/images/icon-property-on.svg

@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 24 24"   xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12"  fill="#42C22D"/>
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M17.1556 8.29289C17.5487 8.68342 17.5487 9.31658 17.1556 9.70711L10.6955 16.1238C10.3024 16.5143 9.66494 16.5143 9.27177 16.1238L6.3354 13.2071C5.94224 12.8166 5.94224 12.1834 6.3354 11.7929C6.72856 11.4024 7.36601 11.4024 7.75917 11.7929L9.98366 14.0025L15.7318 8.29289C16.125 7.90237 16.7624 7.90237 17.1556 8.29289Z" fill="white"/>
+</svg>

resources/sass/base/_typography.scss

@@ -253,5 +253,79 @@ table{
 		 }
 	 }
  }
+}
+
 
-}
+.plus-minus{
+	display:grid;
+	grid-template-columns: 1fr 1fr;
+	background: var(--body-bg-color);
+	gap: 20px;
+	margin: 0 0  20px 0;
+	border-radius: 12px;
+	padding: 20px;
+	@include mobile{
+		grid-template-columns: 1fr;
+		gap: 12px;
+		padding: 16px 12px;
+	}
+	&__column{
+		display: flex;
+		flex-direction: column;
+		gap:16px;
+		background: #fff;
+		border-radius: 8px;
+		font-size: 16px;
+		padding: 20px;
+		@include mobile{
+			padding: 16px;
+		}
+		&:first-child{
+			.plus-minus__item{
+					&:before{
+						content:'';
+						display:block;
+						width:24px;
+						height:24px;
+						position:absolute;
+						top:50%;
+						left:0;
+						transform: translate(0, -50%);
+						background:url('../images/icon-property-on.svg') no-repeat center center;
+					}
+			}
+		}
+		&:last-child{
+				.plus-minus__item{
+					&:before{
+						content:'';
+						display:block;
+						width:24px;
+						height:24px;
+						position:absolute; 
+						top:50%;
+						left:0;
+						transform: translate(0, -50%);
+						background:url('../images/icon-property-off.svg') no-repeat center center;
+					}
+			  }
+		}
+	}
+	&__item{
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		padding-left:40px;
+		position:relative;
+		@include mobile{
+			gap: 12px;
+		}
+		.icon{
+			flex-shrink: 0;
+			@include mobile{
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+}

resources/sass/components/_faq.scss

@@ -87,7 +87,7 @@
         aspect-ratio: 1/1;
         font-weight: 600;
         background-color: var(--accent-color);
-        color: var(--body-bg-color);
+        color: #fff;
         flex-shrink: 0;
         border-radius:50%;
         @include mobile{

resources/sass/components/_slot-item.scss

@@ -63,7 +63,7 @@
 		position:absolute;
 		bottom:12px;
 		right:12px;
-		color: var(--text-color);
+		color: #fff;
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 700;

resources/sass/layout/_footer.scss

@@ -26,7 +26,7 @@
         font-style: normal;
         font-weight: 400;
         line-height: 20px; /* 142.857% */
-        color:var(--body-bg-color);
+        color: #fff;
         @include mobile{
             font-size:12px;
             line-height: 18px;

resources/sass/layout/_header.scss

@@ -99,8 +99,8 @@
         }
 
         &--secondary {
-            border: 1px solid var(--accent-color);
-            background: var(--accent-color);
+            // border: 1px solid var(--accent-color);
+            // background: var(--accent-color);
             color: #fff;
             &:hover {
                 transform: translateY(-1px);

resources/view/home.php

@@ -47,7 +47,7 @@ ob_start();
     <section class="section text">
         <?= $topContent ?>
         <div class="btn-wrapper">
-            <button class="btn btn--accent">Click Here to Learn More</button>
+            <button class="btn btn--accent redirect-js">Click Here to Learn More</button>
         </div>
     </section>
     <section class="section">
@@ -78,7 +78,7 @@ ob_start();
     <section class="section text">
         <?=  $pageContent  ?>
         <div class="btn-wrapper">
-            <button class="btn btn--accent">Get Started Now</button>
+            <button class="btn btn--accent redirect-js">Get Started Now</button>
         </div>
     </section>