:root /*psedo--> Logic for all*/
{
  --primary-color:#ff3c78;
  --light-black:rgba(0,0,0,0.89);
  --black:#000;
  --white:#fff;
  --grey:#aaa;
  --transition: all 0.3s linear;
  --spacing: 0.25rem;
  --clr-grey-1: hsl(40, 2%, 35%);
  --clr-primary-5: hsl(16, 95%, 51%);
}
*/* Universal Selector*/
{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body /* Tag Selector*/
{
  font-family: "Poppins",sans-serif;
}

.navbar /* Class Selector*/
{
  display:flex;
  align-items:center;
  padding:20px;
}

nav{
  flex:1;
  text-align:right;
}

nav ul
{
  display:inline-block;
  list-style-type:none;
}

nav ul li
{
  display:inline-block;
  margin-right:20px;
}

a{
  text-decoration:none;
  color:#555;
}

p
{
  color:#555;
}

.container
{
  max-width:1300px;
  margin:auto;
  padding-left:25px;
  padding-right:25px;
}

.row
{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-around;
}

.col-2
{
  flex-basis:50%;
  min-width:300px;
}

.col-2 img
{
  max-width:100%;
  padding:50px 0;
}

.col-2 img h1
{
  font-size:50px;
  line-height:60px;
  margin:25px 0;
}

.btn
{
  display:inline-block;
  background:#ff4c3b;
  color:#ffffff;
  padding:8px 30px;
  margin:30px 0;
  border-radius:30px;
  transition:background 0.5s;
}

.btn:hover
{
  background:#563434;
}

.header
{
  background:radial-gradient(#f3f0ef, #f7ad85);
}

.header .row
{
  margin-top:70px;
}

.footer
{
  background:#000;
  color:#8a8a8a;
  font-size:14px;
  padding:60px 0 20px;
}

.footer p
{
  color:#9a9a9a;
}

.footer h3
{
  color:#fff;
  margin-bottom:20px;
}

.footer-col-1,
.footer-col-2,
.footer-col-3,
.footer-col-4
{
  min-width:250px;
  margin-bottom:20px;
}

.footer-col-1
{
  flex-basis:30%;
}

.footer-col-2
{
  flex:1;
  text-align:center;
}

.footer-col-2 img
{
  width:180px;
  margin-bottom:20px;
}

.footer-col-3,
.footer-col-4
{
  flex-basis:12%;
  text-align:center;
}

ul
{
  list-style-type:none;
}

.app-logo
{
  margin-top:20px;
}

.app-logo img
{
  width:140px;
}

.footer hr
{
  border:none;
  background:#b5b5b5;
  height:1px;
  margin:20px 0;
}

.copy-right
{
  text-align:center;
}

.menu-icon
{
  width:28px;
  margin-left:20px;
  display:none;
}
.login-box{
  width:300px;
  margin:100px auto;
  padding:20px;
  border:1px solid #ccc;
  border-radius:5px;
  background:#f8f8f8;
}
input[type=text],input[type=password]{
  width:100%;
  padding:10px;
  margin:5px 0;
  border:1px solid #ccc;
  border-radius:4px;
  box-sizing:border-box;
}

button {
  background-color:#4CAF50;
  color:white;
  padding:10px 20px;
  border:none;
  border-radius:4px;
  cursor:pointer;
}

.login-box p {
  margin-bottom:10px;
}

.navbar{
  display:flex;
  align-items:center;
  padding:20px;
}

nav{
  flex:1;
  text-align:right;
}

nav ul{
  display:inline-block;
  list-style-type:none;
}

nav ul li {
  display:inline-block;
  margin-right:20px;
}

a{
  text-decoration:none;
  color:#555;
}

p{
  color:#555;
}

.container
{
  max-width:1300px;
  margin:auto;
  padding-left:25px;
  padding-right:25px;
}

.row
{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-around;

}

.col-2{
  flex-basis:50%;
  min-width:300px;
}

.col-2 img{
  max-width:100%;
  padding:50px 0px;
}

.col-2 h1
{
  font-size:50px;
  line-height:60px;
  margin:25px 0;
}

.btn{
  display:inline-block;
  background:#FF4c3b;
  color:#FFFFFF;
  padding:8px 30px;
  margin:30px 0px;
  border-radius:30px;
  transition:background 0.5s;
}

.btn:hover{
  background:#563434;
}
.header{
  background:radial-gradient(#f3f0ef, #f7ad85);
}

.header .row{
  margin-top:70px;
}

.Form-container {
  background-color: #f8f8f8ff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
  margin:200px auto;
  border:1px solid #ccc;  
}

.Form-container p {
  text-align: left;
}

  input[type=text],input[type=password],input[type=email]{
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  box-sizing: border-box;
  border:1px solid #ccc;
  border-radius:4px;
  box-sizing:border-box;
}

.signup{
  color: blue;
}

button {
  background-color: #4caf50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.nav-link {
  display: block;
  padding: 1rem 2rem;
  transition: var(--transition);
  color: var(--clr-grey-1);
  cursor: pointer;
}
.nav-link:hover {
  color: var(--clr-primary-1);
  background: var(--clr-primary-8);
  padding-left: 2.25rem;
}
/* nav toggle functionality */
.nav-links {
  height: 0;
  overflow: hidden;
  transition: var(--transition);
}
.show-links {
  height: 280px;
}

.nav-link {
margin-right: 0.7rem;
}
.nav-link {
padding: 0 0;
}
.nav-link:hover {
padding: 0;
color: var(--clr-primary-5);
background: transparent;
}
.nav-links {
height: auto;
display: flex;
}