/* font link */

@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");

@import "tailwindcss";

@layer utilities {
  .mulish-font {
    font-family: "Mulish", sans-serif;
  }
}

:root {
  --btn-color: rgba(255, 84, 0, 1);
  --hero-color: rgba(255, 255, 255, 0.3);
  --text-color: rgba(19, 19, 24, 0.7);
  --secondary-color: rgb(204, 204, 204);
  --headder-color: rgba(19, 19, 24, 1);
  --card1-color: rgba(251, 181, 99, 0.2);
  --card2-color: rgba(41, 206, 246, 0.2);
  --card3-color: rgba(233, 68, 68, 0.2);
  --bg-card-color: #ffffffc7;
  --footer-color: rgba(19, 19, 24, 0.05);
}

.containers {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 10px;
}

.hero-image {
  background: url(../Images/hero-image.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 20px;
}

.card-image {
  background-image:
    linear-gradient(rgba(65, 65, 65, 0.236), rgba(31, 31, 31, 0.565)),
    url(../Images/Group\ 39.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  padding: 60px;
  margin-bottom: 25px;
}