.card {
  cursor: pointer;
  margin-bottom: 20px;
  text-align: center;
  background-color: #f9f9fa; /* Hafif gri bir arka plan rengi */
  border: 1px solid #eaeaea; /* Hafif gri bir sınır */
  padding: 20px; /* İç boşluk */
  display: inline-block;
  vertical-align: top;
  width: calc(33.33% - 20px);
  margin-right: 20px;
  box-sizing: border-box;.service-info div
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Gölgeli bir çerçeve ekleyin */
  border-radius: 10px; /* Kartların kenarlarını yuvarlayın */
  
}

.card-img {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Daire şeklinde resimler */
  object-fit: cover;
  display: block;
  margin: 0 auto 10px;
  border: 3px solid #eaeaea; /* Resim çevresinde hafif gri bir sınır */
  background-color: #fff; /* Resmin arka plan rengi beyaz */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Resme hafif bir gölge ekleyin */

}

.step {
  display: flex;
  flex-direction: column;
  align-items: center; /* Öğeleri merkeze hizala */
  	justify-content: flex-start;

  
}
.container_test {
    padding: 20px;
    border-radius: 8px;
	display: flex;
	justify-content: flex-start;
}

#wedding-form {
   transition: all 0.3s ease; 
}
#vat-amount {
	font-size: 34px;

    font: bold italic 88px/1 sans-serif;
    color: #fff;

}
#total-price-incl-vat {
	font-size: 34px;

    font: bold italic 88px/1 sans-serif;
    color: #fff;

}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center; /* Butonları merkeze hizala */
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}


.card:last-child {
  margin-right: 0; /* Son kartta sağ tarafta boşluk bırakma */
}




.card-title {
    font-size: 1.5rem; /* Başlık fontunu biraz daha büyük yapın */
    font-family: 'Montserrat', sans-serif; /* Zarif bir font seçin */
    font-weight: 700; /* Kalın bir stil kullanın */
}

.card-text {
    font-size: 1.2rem; /* Metin boyutunu artırın */
    color: #888; /* Metin rengini biraz daha koyulaştırın */
}


.quantity-group {
  margin-top: 10px;
}

.selected-service {
    /* border-bottom: 3px solid #e5ca98 !important; */
    /* background: #ab8f5a; */
    /* background: rgb(212, 150, 34); */
    /* background: linear-gradient(90deg, rgb(239 239 239) 0%, rgb(251 203 113) 35%, rgb(157 103 0) 100%); */
    background: linear-gradient(90deg, rgba(212, 150, 34, 1) 0%, rgb(251 203 113) 35%, rgb(157 103 0) 100%);
    box-shadow: rgb(147 100 12) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
    transition: background-image 0.5s ease; /* Pürüzsüz geçiş için */

    /* Animasyon */
    animation: rotateGradient 8s ease-in-out infinite; /* İstenilen süreyi ve geçişi ayarlayın */
    background-size: 400% 400%; /* Arkaplan boyutunu ayarlayın */

}

 


@keyframes rotateGradient {
    0%, 100% {
        background-position: 0% 0%; /* Başlangıç ve bitiş pozisyonu */
    }
    50% {
        background-position: 100% 100%; /* Orta pozisyon */
    }
}


.selected-service .service-info {
    color: #543d13!important;
    padding-top: 10px;
}

.sub-service.selected-service:hover{
border-bottom: 3px solid #bf8e33;
}

.sub-services, .dynamic-step {
  display: none;
}
.sub-service:hover {
        border-bottom: 3px solid black;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px 20px;

}

.service-img {
  width: 80px; /* Resim genişliği */
  height: 80px; /* Resim yüksekliği */
  border-radius: 50%; /* Daire şeklinde resim */
  margin-bottom: 10px; /* Resim ile metin arasında boşluk */
}


.service-img:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  opacity: 0;
  border: 3px solid white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.selected-service .service-img:after {
  opacity: 1;
  border-color: #007bff;
}

.selected-service .service-img {
  transform: scale(1.1);
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    border: 3px solid #dcc59d;
}

.sub-service-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px; /* Grid öğeleri arasındaki boşluğu ayarla */
  justify-content: center;
  transition: all 0.3s ease;
}

.sub-service {
    position: relative;
    text-align: center;
    cursor: pointer;
    margin-bottom: 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 30px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-bottom: 3px solid #ab8f5a;
    display: inline-block;
     transition: all 1s ease!important;
   
}


/* Medya sorgusu, ekranın küçük olduğu durumlar için */
@media (max-width: 600px) {
  .sub-service {
    flex: 1 0 100%; /* Mobil cihazlarda tam genişlikte göster */
  }
}





.sub-service .service-img {
  width: 150px; /* Özel resim genişliği */
  height: 150px; /* Özel resim yüksekliği */
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
      transition: all 1s ease!important;
}

.sub-service .service-info {
  font-size: 1rem; /* Özel yazı boyutu */
  color: #333; /* Özel yazı rengi */
  padding-top: 10px;
}

.service-info div {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: -12px;
    color: #969696;
}
.quantity-container {
    display: none; /* Başlangıçta gizli olacak */
    text-align: center; /* Butonlar ve input alanı ortalanacak */
}

.quantity-container input[type="number"]::-webkit-inner-spin-button,
.quantity-container input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-container.show-quantity {
    display: inline-block; /* Seçildiğinde görünür hale gelir */
}

.quantity-button {
    width: 30px;
    height: 30px;
    background-color: #ccc;
    border: none;
    border-radius: 3px;
    margin: 0 5px;
    cursor: pointer;
													
}

.quantity-display {
    width: 50px;
    height: 30px;
    text-align: center;
}


.sub-service.selected-service {
     box-shadow: rgb(147 100 12) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
    
}

.sub-service.selected-service  .service-info .service-description{
    color:white!important;
}

/* Base styling for quantity input */
.sub-service.selected-service .quantity-input {

    font-size: 19px;
    line-height: 1.5;
    color: #ffffff;
    background-color: #a68448;
    border: 1px dashed #f0d4a1;
    border-radius: 0.25rem;
    font-weight: 700;
}

/* Enhances the focus state for better visibility */
.sub-service.selected-service .quantity-input:focus {
  border-color: white;
}

/* Hover state for mouse users */
.sub-service.selected-service .quantity-input:hover {
    border-color: #a8a8a8;
}

/* Style adjustments for better mobile experience */
@media (max-width: 768px) {
    .sub-service.selected-service .quantity-input {
        width: 100%; /* Full width on smaller screens */
        padding: 10px 15px;
        font-size: 18px; /* Slightly larger font for touch interaction */
    }
}


.sub-service .quantity-input {
  width: 45%; /* Özel miktar girişi genişliği */
  margin: 10px auto; /* Özel miktar girişi kenar boşluğu */
  display: none;
}
.datepicker .disabled-date {
    background-color: #f2f2f2 !important; /* Arka plan rengi gri tonu */
    color: #999 !important;
    cursor: not-allowed;
    border: 1px solid red; /* Kırmızı çerçeve */
}








.step-navigation {
    clear: both;
    padding-top: 20px; /* Dilerseniz bu değeri ayarlayabilirsiniz */
}




/* NexForms-like Container Styles */
.inner-canvas-container {
  padding: 20px;
  background-color: #f9f9f9; /* Light grey background */
  border-radius: 5px; /* Rounded corners */
  margin-top: 20px; /* Space above the container */
}

.ui-nex-forms-container {
  margin-bottom: 20px;
}

.ui-nex-forms-container-fe {
  margin-top: 10px;
}

.input-animated {
  position: relative;
  margin-bottom: 35px;
}

/* Input alanına değer girilmediği halde label'ın belirgin olması */
.animated-input input:not(:placeholder-shown) ~ label {
  top: -20px;
  font-size: 12px;
  color: #4CAF50;
}


.input-animated input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  background-color: white;
  background-image: url('icon.png'); /* Placeholder for an icon */
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

label {
    font-weight: bold; /* Etiketleri kalın yap */
}

/* Input alanlarını ve etiketlerini belirginleştirme */
input[type="text"], input[type="email"], textarea {
    border: 1px solid #d1d1d1; /* Çerçeve rengi */
    color: #333; /* Yazı rengi */
    font-weight: bold; /* Yazı kalınlığı */
}

input[type="text"]::placeholder, input[type="email"]::placeholder {
    color: #666; /* Placeholder metin rengi */
    opacity: 1; /* Placeholder metin opaklığı */
}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    border-color: #007bff; /* Odaklandığında çerçeve rengi */
}

form label {
    color:#ab8e5a !important;/* Etiket metin rengi */
    font-weight: bold !important; /* Etiket yazı kalınlığı */
    font-size: 16px; /* Etiket font boyutu */
}

/* Textarea özelleştirme */
textarea {
    background-color: #f0f0f0 !important; /* Textarea arka plan rengi */
    border: 1px solid #d1d1d1; /* Çerçeve rengi */
}

/* Checkbox özelleştirme */
input[type="checkbox"] {
    accent-color: #007bff; /* Checkbox rengi */
}

/* Odaklandığında stili değiştir */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: #007bff; /* Odaklandığında kenarlık rengini değiştirir */
    outline: 0; /* Varsayılan vurguyu kaldırır */
}


textarea {
    resize: vertical; /* Yalnızca dikey boyutu değiştirilebilir */
}

button {
    margin-top: 10px; /* Butonların üst boşluğunu ayarla */
}

form_container {
    background-color: #f9f9f9; /* Form container'ın arka plan rengi */
    padding: 20px; /* Form container'ın iç kenar boşluğunu ayarla */
    border-radius: 10px; /* Form container'ın köşelerini yumuşat */
}

/* Genel stiller */
.datepicker-dropdown {
  font-size: 18px;
  position: relative; /* Takvim konumunu belirliyor */
}

.datepicker table {
  width: 100%;
  max-width: 300px; /* Takvimin maksimum genişliğini belirliyor */
  margin-top: 10px; /* Takvim ile diğer içerik arasındaki boşluğu ayarlar */
}

.datepicker table tr td {
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 10px;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
  background: #eeeeee;
  cursor: pointer;
}


/* Telefon uyumlu stiller */
@media only screen and (max-width: 600px) {
  .datepicker table {
    width: 100%;
  }

  .datepicker table tr td {
    width: calc(100% / 7); /* Ekrana bağlı olarak yüzde cinsinden hücre genişliği */
    height: 30px;
    padding: 5px;
  }
}



/* Temel Ayarlar */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f8f9fa;
}

.container {
    padding: 20px;
    border-radius: 8px;
}

/* Adım Göstergesi Stilleri */
.step-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #6c757d;
    margin: 0 10px;
}

.step-line {
    height: 2px;
    width: 50px;
    background-color: #e9ecef;
}

.step-circle.active {
    background-color: #007bff;
    color: #ffffff;
}

/* Form Elemanı Stilleri */
.form-group label {
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}

.datepicker {
    border: 1px solid #ced4da; /* Add a border */
    border-radius: 4px; /* Add border radius for a softer look */
    padding: .375rem .75rem; /* Add padding */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; /* Add transition for smoother effect */
}

.form-control {
    border: 2px solid #007bff; /* Mavi renkte kalın bir kenarlık ekler */
    border-radius: 6px; /* Kenarları yuvarlar */
    padding: 10px; /* İçerikle kenar arasına boşluk ekler */
    font-size: 16px; /* Yazı boyutunu belirler */
    color: #333; /* Yazı rengini ayarlar */
    transition: border-color 0.3s ease-in-out; /* Kenarlık renginde geçiş efekti ekler */
}
/* Hover and focus effects */
.form-control:hover,
.form-control:focus,
.datepicker:hover,
.datepicker:focus {
    border-color: #80bdff; /* Change border color on hover and focus */
    outline: 0; /* Remove default outline */
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Add box shadow for focus effect */
}

/* Düğme Stilleri */
.btn-primary,
.btn-secondary {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    box-shadow: none;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    box-shadow: none;
}

.btn-secondary:hover {
    background-color: #545b62;
    border-color: #545b62;
}



.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

/* İleri ve geri butonları için daha küçük boyutlar */
.prev-step, .next-step {
    width: 100px; /* İki butonun genişliği */
    height: 40px; /* İki butonun yüksekliği */
    font-size: 14px; /* Yazı boyutu */
}

/* Takvim giriş alanının daha belirgin olması için stiller */
.datepicker {
    border: 1px solid #ced4da; /* Kenarlık kalınlığı ve rengi */
    border-radius: 4px; /* Kenar yuvarlatma */
    padding: 8px 12px; /* iç boşluk */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* geçiş efekti */
}

.datepicker:focus {
    border-color: #80bdff; /* Odaklandığında kenarlık rengi */
    outline: 0; /* Odaklandığında gölgeyi kaldır */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Odaklandığında gölge */
}


/* Diğer Stiller */
.jumbotron {
    background-color: #007bff;
    color: white;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}
.jumbotron h1 {
    font-size: 2.5rem;
}

.jumbotron p {
    font-size: 1.25rem;
}

#left_form {
    padding: 71px 50px 71px 50px !important;
    background: #0575E6;
    background: -webkit-linear-gradient(to right, #1d1d1d, #666666)!important;
    background: linear-gradient(to right, #1d1d1d, #666666)!important;
    color: #fff;
    text-align: left;
    padding: 60px 50px 30px 50px;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    position: relative;
}

#left_form::after {
    content: '';
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 100%;
    height: 166px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(0 0 0 / 39%) 50%, rgba(255, 255, 255, 0) 100%);
    animation: wave 3s infinite linear;
    z-index: -1;
}
@keyframes wave {
    0% {
        transform: translateY(0); /* Başlangıç yüksekliği */
    }
    50% {
        transform: translateY(-15px); /* En yüksek yükseklik */
    }
    100% {
        transform: translateY(0); /* Başlangıç yüksekliği */
    }
}


/* Styles the total price text */
#total-price {
	font-size: 34px;
    font: bold italic 88px/1 sans-serif;
    color: #fff;

}

.datepicker {
    border: 2px solid #007bff; /* Mavi bir kenarlık ekler */
    border-radius: 5px; /* Köşeleri yuvarlaklaştırır */
    padding: 10px; /* İç boşluğu artırır */
}

.input-group-text {
    background-color: #007bff; /* Simge arka planını mavi yapar */
    color: white; /* Simge rengini beyaz yapar */
    border: none; /* Kenarlığı kaldırır */
    cursor: pointer; /* Fare simgenin üzerine geldiğinde el simgesi yapar */
}




    .pulse {
        animation: pulse 2s infinite;
    }

    /* Büyüme ve küçülme animasyonu */
    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }




.animated-input.success input {
  border-color: #4CAF50 !important;
}

.animated-input.success input + label::after {
  content: '\2713'; /* Unicode for checkmark symbol */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #4CAF50;
  font-size: 16px;
  pointer-events: none;
}

.error-message {
    color: darkred; /* Koyu kırmızı renk */
    font-weight: bold; /* Kalın font */
}

    .valid-input {
        border-color: green;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

    .valid-feedback {
        color: green;
    }


.valid {
    border-color: #808080 !important; /* Gri tonu için RGB değeri */
}

/* Kaydırma animasyonu */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slideOutToLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.step {
    clear: left;
    background: #fff;
    padding: 60px;
    color: #333;
    display: block;
    margin-bottom: 3px;
    position: relative;
    border-radius: 10px 10px 10px 10px!important;
    min-height: 321px!important;
}
.slide-in {
    animation: slideInFromRight 0.5s forwards;
}

.slide-out {
    animation: slideOutToLeft 0.5s forwards;
}


#left_form p {
    font-size: 35px!important;

}

input.form-control, select.form-control, textarea.form-control {
    padding: 6px 12px 6px 6px!important;
}





.termin-mache {
    max-width: 250px!important;
    background-color: #4caf50!important;
    color: #ffffff!important;
}

.total-text {
  font-size: 0.5em /* Varsayılan metin boyutunun %80'i */
}

.bounce-top {
	-webkit-animation: bounce-top 0.9s both;
	        animation: bounce-top 0.9s both;
	        transition: all 0.3s ease;
}

@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}

.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        transition: all 0.3s ease;
}


@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-4-2 14:47:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}

.prev-step, .next-step {
    width: 110px!important;
}

.btn {
    padding: 8px 20px!important;

}

.btn.btn-primary.btn-lg.btn-block.termin-mache {
    background: linear-gradient(45deg, #4CAF50, #2E7D32);
    background-size: 400% 400%;
    animation: pulseBackground 3s ease-in-out infinite alternate;
}

@keyframes pulseBackground {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.step > h2 {
    text-align: left !important;
    /* border-bottom: 1px solid #ededed; */
    padding-bottom: 10px;
    background: #f7f7f7;
    padding: 8px;
    margin: 0;
    margin-bottom: 40px;
    font-size: 16px;
    color: #8b8b8b;
}