@tailwind base;
@tailwind components;
@tailwind utilities;


html {
  scroll-behavior: smooth;
}

body {
  font-family: 'montserrat'
}

/*  */
a:hover{
  color: #cc0000 !important;
}
.wrapper {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1208px;
}

.wrapper-sm {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1012px;
}

/* h1 : 74 */
h1 {
  font-size: clamp(3rem, 2.1875rem + 2.6vw, 4.625rem);
  line-height: 1.3;
}

/* h2 : 56 */
h2 {
  font-size: clamp(2.5rem, 2.1939rem + 1.0884vw, 3.5rem);
  text-transform: uppercase;
}

/* h3 : 32 */
h3 {
  font-size: clamp(1rem, 0.6939rem + 1.0884vw, 2rem);

}

/* h4 : 24 */
h4 {
  font-size: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
}

/* h5 : 20 */
h5 {
  font-size: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
}

/* p: 16 */
p {
  font-size: clamp(1rem, 1rem + 0vw, 1rem);
}

/* igy-nyerhetsz-section */


.footer-top.zigzag-border::before {

  background: url(/../images/water-waves-cream.svg);
  background-size: cover;
}
#menu.zigzag-border::before,#menu.zigzag-border::after{
  display: none;
}
#menu.zigzag-border::after{
  transform: rotate(180deg);
  bottom: -48px;
  background-size: cover;

}
.contactus-shadow {
  box-shadow: 0px 1px 4px 0px #19213d14;
}

.button {
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  position: relative;
  color: #fff;
  font-family: 'futura-pt';
  font-weight: bold;
  z-index: 1;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background-color: black;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: skewX(-10deg) translateZ(0);
  transition-duration: 0.3s;
}

.button-red:after {
  background-color: #CB0000;
  text-color: #fff;
}

.button-red:hover {
  color: #fff!important;
}


.button:hover:after {
  transform: skew(0) translateZ(0);
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
}

::placeholder {
  color: #1d2433;
}

:-moz-placeholder {
  color: #1d2433;
}

:-ms-input-placeholder {
  color: #1d2433;
}

::-webkit-input-placeholder {
  color: #1d2433;
}


@media (max-width: 767px) {
  .zigzag-border::after,
  .zigzag-border::before {
    height: 48px;
  }
  .zigzag-border::before {
    top: -48px;
  }
  .zigzag-border::after {
    bottom: -1px;
  }
  .button {
    width: 100%;
  }
  #menu.zigzag-border::after {
  transform: rotate(180deg);
  bottom: -48px;
  background-size: cover;
  display: block;
}

}


.form-image {
  max-width: 365px;
}

input.picker[type="date"] {
  position: relative;
}

input.picker[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  color: transparent;
  background: transparent;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */