@import url(./header.css);
@import url(./home.css);
@import url(./footer.css);
@import url(./responsive.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  --black: #263238;
  --d-grey: #4D4D4D;
  --grey: #717171;
  --l-grey: #89939E;
  --grey-blue: #ABBED1;
  --white: #fff;
  --silver: #F5F7FA;

  --primary: #28CB8B;
  --secondary: #263238;
  --info: #2194f3;

  --shade1: #43A046;
  --shade2: #388E3B;
  --shade3: #237D31;
  --shade4: #1B5E1F;
  --shade5: #103E13;

  --tint1: #66BB69;
  --tint2: #81C784;
  --tint3: #A5D6A7;
  --tint4: #C8E6C9;
  --tint5: #E8F5E9;
}

body {
  background-color: var(--white);
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  background-color: var(--primary);
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  background-color: var(--secondary);

}

.btn-transparente {
  border: none;
  background: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0.5rem;
  transition: 0.3s;
}

.btn-transparente:hover {
  color: var(--secondary);
}

.btn-right {
  color: var(--primary);
  display: flex;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  gap: 0.5rem;
  cursor: pointer;
  transform: translateX(0);
  transition: 0.3s ease-in;
}

.btn-right:hover {
  transform: translateX(10px);
}

input {
  width: 15rem;
  color: var(--white);
  border: none;
  outline: none;
  background-color: var(--d-grey);
  border-radius: 0.5rem;
  padding: 0.8rem 0.5rem;
}