:root {
  --pasztel-sarga: #E6A642;
  --pasztel-pink: #9d025e;
}

html {
  scrollbar-color: var(--pasztel-pink) var(--bs-gray-100);
  scrollbar-width: thin;
}

body {
  font-family: 'Alegreya';
  font-size: 18px;
  color: var(--bs-gray-800);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bs-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--pasztel-pink);
}

::selection {
  background: var(--pasztel-pink);
  color: var(--bs-light);
}

input, select, textarea, button, .btn {
  box-shadow: none !important;
  outline: none !important;
}

a {
  text-decoration: none;
  color: var(--pasztel-sarga);
}

a:hover {
  color: var(--pasztel-sarga);
}

.flex-1-0-auto {
  flex: 1 0 auto;
}

.z-index-n1 {
  z-index: -1;
}

.tooltip-inner {
  background: var(--pasztel-pink) !important;
}

.tooltip-arrow {
  filter: invert(13%) sepia(87%) saturate(4315%) hue-rotate(313deg) brightness(76%) contrast(106%);
}

.table > :not(:first-child) {
  border-top: inherit;
}

.table thead th {
  background: var(--pasztel-sarga) !important;
  padding: 1.0rem 0.5rem;
}

.design-cim::after {
  content: '';
  display: block;
  width: 150px;
  height: 3px;
  background: var(--pasztel-pink);
  margin: 5px 0 15px;
}

.design-cim.animalt-design-cim::after {
  animation: moreLoop 2.5s cubic-bezier(.77,0,.175,1) infinite;
}

.text-pasztel-sarga {
  color: var(--pasztel-sarga);
}

.text-pasztel-pink {
  color: var(--pasztel-pink);
}

.kijelolt-szoveg {
  background: var(--pasztel-sarga);
  color: white;
  padding: 3px 4px;
  font-weight: bold;
}

hr.vonal-design {
  display: block;
  border: none;
  height: 75px;
  background: url('../../assets/img/curved-line-design.png?h=b522f87bf9fd864bfe5693b47e8cccfd');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
}

/* FEJLÉC */

.fejlec {
  background: url('../../assets/img/fejleckep.jpg?h=32bcc4c54c4dfca76fc06486a8bacc32');
  background-attachment: fixed;
  background-position: 50% 100%;
  height: 800px;
  z-index: 1;
}

@media (min-width: 300px) and (max-width: 1199px) {
  .fejlec {
    height: 660px;
  }
}

@media (min-width: 1200px) {
  .fejlec {
    height: 800px;
  }
}

@media (min-width: 1400px) {
  .fejlec {
    height: 750px;
  }
}

.fejlec::after {
  background: linear-gradient(to right, var(--pasztel-sarga) 0%, var(--pasztel-sarga) 100%) repeat scroll 0 0;
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: -2;
}

.fejlec .shape-bottom {
  position: absolute;
  top: auto;
  bottom: -1px;
  left: 0;
  right: 0px;
  z-index: -1;
}

.fejlec .shape-bottom .st0 {
  fill: white;
}

.fejlec .elerhetosegek [class*=col] {
  text-align: center;
  margin: 10px 0;
}

.fejlec .elerhetosegek [class*=col] h4 {
  background: var(--pasztel-pink);
  color: white;
  display: table;
  margin: 0 auto 8px;
  padding: 3px 15px;
  border-radius: 20px;
}

.fejlec .elerhetosegek a {
  text-decoration: none;
  color: var(--bs-gray-800);
  font-size: 20px;
  font-weight: bold;
}

.logo {
  width: 390px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .logo {
    width: 400px;
  }
}

/* Custom Back to Top */

.scroll-top {
  background: var(--pasztel-pink) url('../../assets/img/cd-top-arrow.svg?h=dd0938bc6ef39f53de722a1ba52999b1') no-repeat center 50%;
  color: #FFF;
  transition: all 0.5s;
  position: fixed;
  right: -70px;
  bottom: 20px;
  z-index: 1;
  display: none;
  cursor: pointer;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 60px;
  border-radius: 2px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  opacity: 0.8;
}

.scroll-top:hover {
  opacity: 1;
  transition: all .5s;
}

/* LOGO */

@keyframes moreLoop {
  0% {
    transform: scale(0,1);
    transform-origin: left;
  }
  47% {
    transform: scale(1,1);
    transform-origin: left;
  }
  48% {
    transform: scale(1,1);
    transform-origin: right;
  }
  95% {
    transform: scale(0,1);
    transform-origin: right;
  }
  96% {
    transform: scale(0,1);
    transform-origin: left;
  }
  100% {
    transform: scale(0,1);
  }
}

/* BEMUTATKOZÁS */

.bemutatkozas {
  position: relative;
}

.bemutatkozas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/img/vonal-design-hatter.png?h=ff90e79dc176d722df1fc52de0a92610');
  background-position: center center;
  background-repeat: repeat-x;
  z-index: -2;
}

.bemutatkozas .profilkep {
  width: 280px;
  height: 280px;
  background: url('../../assets/img/gabi_bemutatkozas.png?h=7da1b0fcdd2dacf5f0b14e19d759ce51');
  background-size: cover;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}

@media (min-width: 1400px) {
  .bemutatkozas .profilkep {
    width: 370px;
    height: 370px;
  }
}

.bemutatkozas .profilkep::before, .bemutatkozas .profilkep::after {
  content: '';
  display: block;
  width: calc(100% * 1.05);
  height: calc(100% * 1.05);
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}

@media (max-width: 1200px) {
  .bemutatkozas .profilkep::before, .bemutatkozas .profilkep::after {
    top: -7px !important;
  }
}

.bemutatkozas .profilkep::before {
  top: -10px;
  left: 1px;
  border: 3px solid var(--pasztel-pink);
}

.bemutatkozas .profilkep::after {
  top: -10px;
  right: 1px;
  border: 3px solid var(--pasztel-sarga);
}

/* SZOLGÁLTATÁSOK */

.szolgaltatasok {
  position: relative;
  padding: 120px 0;
}

.szolgaltatasok::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pasztel-sarga);
  opacity: 0.3;
  z-index: -1;
}

@media (min-width: 300px) and (max-width: 991px) {
  .szolgaltatasok {
    padding: 65px 0 !important;
  }
}

@media (min-width: 1600px) {
  .szolgaltatasok {
    padding: 170px 0 !important;
  }
}

.szolgaltatasok #wave-top {
  top: -1px;
  position: absolute;
  transform: rotate(180deg);
  transition: 0.3s;
}

.szolgaltatasok #wave-bottom {
  bottom: -1px;
  position: absolute;
  transition: 0.3s;
}

.szolgaltatasok #wave-top .fill, .szolgaltatasok #wave-bottom .fill {
  fill: white;
}

.szolgaltatasok [class*=col-] {
  padding: 30px 15px;
  text-align: center;
}

.szolgaltatasok [class*=col-] p {
  font-size: 1.25rem;
}

.szolgaltatasok .boxes {
  background: white;
  padding: 15px 8px 15px;
  border-radius: 15px;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15)!important;
  height: 100%;
  cursor: context-menu;
  position: relative;
  top: 0;
  transition: all .3s;
  display: flex;
  flex-direction: column;
}

.szolgaltatasok .boxes:hover {
  top: -10px;
}

.szolgaltatasok .boxes h3 {
  margin-top: 10px;
  margin-bottom: 20px;
}

.szolgaltatasok .boxes h3 span.bemer-m {
  color: #ed752d;
}

.szolgaltatasok .boxes .ikon img {
  width: 80px;
  height: auto;
}

/* KINEK SEGÍTHETEK? */

.kinek-segithetek {
  position: relative;
}

.kinek-segithetek p {
  border-left: 3px solid var(--pasztel-pink);
  padding-left: 10px;
}

@media (min-width: 300px) {
  .kinek-segithetek .animacio {
    width: 320px;
    height: 320px;
  }
}

@media (min-width: 768px) {
  .kinek-segithetek .animacio {
    width: 500px;
    height: 500px;
  }
}

/* ÁRAK */

.arak {
  background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), url('../../assets/img/folt-design.png?h=fb05bf5369feceadf5bbfbf52e0e958e') no-repeat scroll right center;
}

.arak h2 {
  color: var(--pasztel-pink);
}

/* KAPCSOLAT */

.kapcsolat form {
  transition: background .3s,border .3s,border-radius .3s,box-shadow .3s;
  margin: 0;
  padding: 35px 20px;
  border-radius: 10px;
  border-top-left-radius: 80px;
  border-bottom-right-radius: 80px;
  position: relative;
}

@media (min-width: 1200px) {
  .kapcsolat form {
    padding: 35px 60px !important;
  }
}

.kapcsolat form::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--pasztel-sarga);
  opacity: 0.3;
  z-index: -1;
  border-radius: 10px;
  border-top-left-radius: 80px;
  border-bottom-right-radius: 80px;
}

.kapcsolat form .form-control {
  border-style: solid;
  border-width: 0 0 1px;
  border-color: var(--pasztel-pink);
  border-radius: 0;
  padding-left: 0;
  margin-bottom: 20px;
  font-size: 20px;
  background: transparent;
}

.kapcsolat form .form-control:focus {
  box-shadow: none;
  border-color: var(--pasztel-pink);
  color: var(--pasztel-pink);
}

.kapcsolat form .form-control::placeholder {
  color: var(--bs-gray-800);
}

.kapcsolat form #uzenet.form-control {
  height: 180px;
  resize: none;
}

.kapcsolat form .bal-oldali-csik {
  border-left: 3px solid var(--pasztel-sarga);
  padding-left: 10px;
}

.kapcsolat form .btn {
  background: var(--pasztel-pink);
  color: white;
  font-weight: 700;
  display: block;
  margin: 15px auto 0;
}

.kapcsolat form .btn i {
  position: relative;
  top: 0;
  transition: all .3s;
}

.kapcsolat form .btn:hover {
  background: var(--pasztel-pink);
}

.kapcsolat form .btn:hover i {
  top: -5px;
}

/* Custom Toggle Switch */

.switch-toggle {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border: 0;
  outline: 0;
  cursor: pointer;
  margin: 10px 0px;
  vertical-align: middle;
  left: 0;
  padding-left: 0;
}

.switch-toggle:after {
  content: '';
  width: 60px;
  height: 28px;
  display: inline-block;
  background: rgba(195, 195, 195, 0.55);
  border-radius: 18px;
  clear: both;
}

.switch-toggle:before {
  content: '';
  width: 32px;
  height: 32px;
  display: block;
  position: absolute;
  left: 0px;
  top: -3px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.switch-toggle:checked:before {
  left: 32px;
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
}

.switch-toggle:checked:after {
  background: var(--pasztel-pink);
}

/* Transition for smoothness */

.switch-toggle, .switch-toggle:before, .switch-toggle:after, .switch-toggle:checked:before, .switch-toggle:checked:after {
  transition: ease .3s;
  -webkit-transition: ease .3s;
  -moz-transition: ease .3s;
}

/* ALLÉC */

footer {
  background: var(--pasztel-sarga);
  position: relative;
  padding: 130px 0 20px;
  margin-top: 100px;
}

@media (min-width: 300px) and (max-width: 991px) {
  footer {
    padding: 85px 0 20px;
  }
}

@media (min-width: 1600px) {
  footer {
    padding: 150px 0 20px;
  }
}

footer #wave {
  top: -1px;
  position: absolute;
  transform: rotate(180deg);
}

footer #wave .fill {
  fill: white;
}

footer a, footer a:hover {
  color: var(--bs-gray-800);
}

footer ul {
  border-left: 3px solid var(--pasztel-pink);
}

footer ul li {
  padding-left: 15px;
}

footer ul li i {
  color: var(--pasztel-pink);
  margin-right: 10px;
}