:root {
  --primary-color: #fff;
  --secondary-color: #FFF62D;
  --text-color: #000;
  --card-subheading-color: #ffffffB3;
  --accent-color: #ffffff1a;
  --link-hover-color: #ffffff66;
  --rent-color: #FF9C4B;
  --rent-bg-color: #FFA93F33;
  --sta-color: #C7BEFF;
  --sta-bg-color: #492DFF33;
  --tech-color: #57DDFF;
  --tech-bg-color: #73C2FF33;
  --auto-bg-color: #FFF62D33;
  --inv-color: #1AE490;
  --inv-bg-color: #42F7AC33;
  --film-color: #FF5289;
  --film-bg-color: #FF2D7033;
  --dark-gray: #1A1D1E;
  --medium-blue: #171b1f;
  --light-blue: #e0eaef;
  --dark-gray-2: #000000B3;
  --med-gray: #2f3334;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Golos Text", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

a {
  text-decoration: unset;
}
a.btn {
  padding: 10px 30px;
  width: fit-content;
  border-radius: 12px;
  font-size: 14px;
  font-family: "Golos Text", sans-serif;
  line-height: 20px;
  text-decoration: none;
}

a.icon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 46px;
}

a.icon:hover svg path {
  stroke: #000;
  transition: all ease-in-out.3s;
}

.btn.border-less {
  border: none !important;
}

.btn.transparent {
  background-color: transparent;
  border: solid 1px #00000033;
  color: var(--text-color);
  transition: all ease-in-out.3s;
}

.btn.transparent:hover {
  border: solid 1px var(--text-color);
  transition: all ease-in-out.3s;
}

.btn.gray {
  background-color: var(--accent-color);
  backdrop-filter: blur(15px); 
  border: solid 1px transparent;
  color: var(--primary-color);
  transition: all ease-in-out.3s;
}

.btn.gray:hover {
  background-color: var(--primary-color);
  border: solid 1px transparent;
  color: var(--text-color);
  transition: all ease-in-out.3s;
}

.btn.black {
  background-color: var(--text-color);
  border: solid 1px transparent;
  color: var(--primary-color);
  transition: all ease-in-out.3s;
}

.btn.black:hover {
  background-color: #34668a;
  border: solid 1px #34668a;
  color: var(--primary-color);
  transition: all ease-in-out.3s;
}

.btn.black.icon svg path {
  stroke: var(--card-subheading-color);
}

.btn.black.icon:hover svg path {
  stroke: var(--card-subheading-color);
}

.btn.accent {
  background-color: var(--secondary-color);
  border: solid 1px transparent;
  color: var(--text-color);
  transition: all ease-in-out.3s;
}

.btn.accent:hover {
  background-color: var(--primary-color);
  border: solid 1px transparent;
  backdrop-filter: blur(20px); 
  color: var(--text-color);
  transition: all ease-in-out.3s;
}

@media (max-width: 575px) {
  a.icon {
    padding: 15px 25px;
  }
}