style.css

.calculate button  {
   padding: 10px 20px;
   font-size: 16px;
}

.calculate div {
   margin-top: 20px;
}

.calculate div h3 {
   font-size: 24px;
   margin-bottom: 10px;
}

.calculate div p {
   font-size: 18px;
   margin: 5px 0;
}

.calculate div span {
   font-weight: bold;
}
.calculate {
   max-width: 500px;
   margin: 0 auto;
   padding: 20px;
   border: 1px solid #ccc;
   background-color: #f9f9f9;
   border-radius: 10px;
   text-align: center;
}
.product {
   max-width: 500px;
   margin: 0 auto;
   padding: 20px;
   border: 1px solid #ccc;
   background-color: #f9f9f9;
   border-radius: 10px;
}

.form-group {
   margin-bottom: 20px;
}

.form-group label {
   font-weight: bold;
}

.form-group input, .form-group select {
   width: 100%;
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 5px;
   box-sizing: border-box;
}
.captcha-group {
   display: flex;
   align-items: center;
}
:root{
   --main-color:#29d978;
   --primary:#f0fff7;
   --black:#141414;
   --white:#fff;
   --bg: #f2f2f2;
   --light-black:#666;
}
.captcha-group input {
   flex-grow: 1;
}
.captcha-group button:disabled {
   pointer-events: none;
   background-color: #ccc;
}
.captchaResult, .captchaCorrect {
   margin-top: 10px;
}
.calculate form {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.calculate label, .calculate input, .calculate select {
   margin: 10px 0;
}
*{
   font-family: 'Poppins', sans-serif;
   margin: 0; padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none; text-decoration: none;
   text-transform: capitalize;
   transition: .2s linear;
}
html{
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 6rem;
}
html::-webkit-scrollbar{
   width: 1rem;
}
html::-webkit-scrollbar-track{
   background: var(--white);
}
html::-webkit-scrollbar-thumb{
   background: var(--main-color);
}
section{
   padding: 3rem 9%;
}
.heading{
   text-align: center;
   color: var(--main-color);
   text-transform: uppercase;
   margin-bottom: 4rem;
   margin-top: 2rem;
   font-size: 4rem;
}
.btn{
   display: inline-block;
   margin-top: 1rem;
   padding: 1rem 3rem;
   border: .1rem solid var(--main-color);
   border-radius: .5rem;
   cursor: pointer;
   font-size: 1.7rem;
   color: var(--main-color);
}
.btn:hover{
   background: var(--main-color);
   color: var(--white);
}
.header{
   position: fixed;
   top: 0; left: 0;
   right: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 2rem 9%;
   background: var(--primary);
   box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
}
.header .logo{
   font-size: 2.2rem;
   font-weight: bolder;
   color: var(--main-color);
}
.header .navbar a{
   font-size: 1.7rem;
   margin-left: 2rem;
   color: var(--black);
}
.header .navbar a:hover{
   color: var(--main-color);
}
#menu{
   font-size: 2.5rem;
   cursor: pointer;
   color: var(--main-color);
   display: none;
}
.home{
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: url(images/home.jpg) no-repeat;
   background-size: cover;
   background-attachment: fixed;
}
.home .content{
   max-width: 60rem;
   text-align: center;
}
.home .content h3{
   font-size: 5rem;
   text-transform: uppercase;
   color: var(--white);
   padding-bottom: 3.5rem;
}
nav ul {
   list-style: none;
   display: flex;
 }
 nav a {
   text-decoration: none;
   color: rgb(247, 235, 235);
   margin-right: 1rem;
   
 }
 nav a:hover{
   color: #eff4f7;
 }
.about .row{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 2rem;
}
.about .row .content{
   flex: 1 1 40rem;
}
.about .row .content h3{
   font-size: 3.5rem;
   color: var(--black);
   text-transform: uppercase;
}
.about .row .content p{
   font-size: 1.6rem;
   color: var(--light-black);
   padding: 2rem 0;
   line-height: 2;
}
.about .row .image{
   flex: 1 1 40rem;
}
.about .row .image img{
   width: 100%;
}
.reviews .slide p{
   padding: 2rem;
   font-size: 1.5rem;
   font-style: italic;
   background: var(--primary);
   border-radius: .5rem;
   color: var(--black);
   line-height: 2;
   position: relative;
   z-index: 0;
   margin-bottom: 3rem;
}
.reviews .slide p::before{
   content: '';
   position: absolute;
   bottom: -1.5rem; left: .7rem;
   height: 3rem; width: 3rem;
   background: var(--primary);
   transform: rotate(45deg);
}
.reviews .slide .user{
   display: flex;
   align-items: center;
   gap: 1rem;
}
.reviews .slide .user img{
   height: 7rem; 
   width: 7rem;
   border-radius: 50%;
}
.reviews .slide .user h3{
   font-size: 2rem;
   color: var(--black);
}
.reviews .slide .user span{
   color: var(--main-color);
   font-size: 1.5rem;
}
.footer .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   gap: 1.5rem;
}
.footer .box-container .box h3{
   font-size: 2rem;
   padding: 1.5rem 0;
   color: var(--main-color);
}
.footer .box-container .box a{
   display: block;
   font-size: 1.4rem;
   color: var(--black);
   padding: 1rem 0;
}
.footer .box-container .box a i{
   color: var(--main-color);
   padding-right: .5rem;
}
.footer .box-container .box a:hover i{
   padding-right: 2rem;
}
.footer .credit{
   text-align: center;
   margin-top: 2.5rem;
   padding: 1rem;
   padding-top: 2.5rem;
   font-size: 2rem;
   color: var(--black);
}
.footer .credit span{
   color: var(--main-color);
}