all files updated

CSS/general.css

@@ -0,0 +1,191 @@
+/* 
+! GUIDELINES WE FOLLOW THROUGH THIS CSS CODING
+. font sizing
+? ---> Helpful trick: setting 1rem to 10px for easy calculations
+10px / 12px / 14px / 16px / 18px / 20px / 24px / 30px / 36px / 44px / 52px / 62px / 74px / 86px / 98px 
+
+.margin-padding
+2px/ 4px/ 8px/ 12px/ 16px/ 24px/ 32px/ 80px /96px/ 128px
+
+.font-weights 
+DEFAULT: 400 , 500, 600
+ 
+.line-heights
+(DEFAULT : 1) , 
+small : 1.05, 
+H2: 1.2
+paragraph-default : 1.6
+
+.letter-spacing:
+0.75px;
+
+.shadows 
+
+
+.border-radius
+Default: 9px (because that is something where we dont want any responsivness) 
+
+.color shades : https://maketintsandshades.com/#e67e22
+
+
+Extra color That Is Used Here 
+#2f9e44 , #f08c00
+*/
+
+
+
+/*. ------------------------------- */
+/*! GENERAL REUSABLE COMPONENTS */
+/*. ------------------------------- */
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+
+html {
+    scroll-behavior: smooth;
+    font-size: 62.5%;
+    /* for main-nav when we move it on the right side of the page */
+    overflow-x: hidden;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Rubik', sans-serif;
+    line-height: 1;
+    font-weight: 400;
+    color: rgb(85, 85, 85);
+    background-color: #fffaf9;
+    /* for main-nav when we move it on the right side of the page */
+    overflow-x: hidden;
+}
+
+:root {
+    --primary-color: #2b8a3e;
+    --secondry-color: #1e612b;
+    --tertiary-color: #95c59f;
+    --bg-color: #eaf3ec;
+    --bg-color-2: #aad0b2;
+    --text-color: #0d2913;
+    --box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.2);
+
+}
+
+/* -> Different Headings */
+.heading-primary,
+.heading-secondary,
+.heading-tertiary {
+    color: var(--text-color);
+    font-weight: bold;
+    letter-spacing: -0.5px;
+}
+
+.heading-primary {
+    font-size: 5.2rem;
+    line-height: 1.05;
+    margin-bottom: 3.2rem;
+
+}
+
+.heading-secondary {
+    font-size: 4.4rem;
+    line-height: 1.2;
+    margin-bottom: 9.6rem;
+}
+
+.heading-tertiary {
+    font-size: 3rem;
+    line-height: 1.2;
+    margin-bottom: 3.2rem;
+}
+
+.subheading {
+    display: block;
+    /* bcz it is span */
+    font-size: 1.6rem;
+    font-weight: 500;
+    color: var(--secondry-color);
+    text-transform: uppercase;
+    margin-bottom: 1.6rem;
+    letter-spacing: 0.75px;
+
+}
+
+/*. ------------------------------- */
+/*! Helper CLASSES and REUSABLE GRIDS */
+/*. ------------------------------- */
+.margin-right {
+    margin-right: 1.6rem !important;
+}
+
+.margin-bottom {
+    margin-bottom: 4.8rem !important;
+}
+
+strong {
+    font-weight: 500;
+}
+
+.center-text {
+    text-align: center;
+}
+
+
+.container {
+    /* 1140px approx to 1200px or 120rem */
+    max-width: 120rem;
+    margin: 0 auto;
+    padding: 0 3.2rem;
+}
+
+.grid {
+    display: grid;
+    gap: 9.6rem 6.4rem;
+    align-items: center;
+}
+
+.grid--2-cols {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.grid--3-cols {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.grid--4-cols {
+    grid-template-columns: repeat(4, 1fr);
+}
+
+
+/* .flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    grid-area: 1.6rem;
+}
+
+.flex-space-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    grid-area: 1.6rem;
+} */
+
+
+.link:link,
+.link:visited {
+    display: inline-block;
+    color: var(--primary-color);
+    text-decoration: none;
+    border-bottom: 1px solid var(--primary-color);
+    padding-bottom: 2px;
+    transition: all 0.3s;
+}
+
+.link:hover,
+.link:active {
+    color: var(--secondry-color);
+    border-bottom: 1px solid transparent;
+}