/* ============================================

   KONTAKT PAGE - FULL RESPONSIVE

   ============================================ */



/* Container */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

  width: 100%;

}



/* Page Header */

.page-header {

  text-align: center;

  padding: 60px 0 40px;

  background: linear-gradient(135deg, #FFFFFF 0%, var(--gray-100) 100%);

  border-bottom: 1px solid var(--gray-200);

}



.page-header-badge {

  display: inline-block;

  background: rgba(196, 30, 58, 0.1);

  color: var(--red);

  padding: 6px 16px;

  border-radius: 40px;

  font-size: 0.75rem;

  font-weight: 600;

  margin-bottom: 20px;

}



.page-header h1 {

  font-size: 2.5rem;

  color: var(--gray-900);

  margin-bottom: 16px;

}



.page-header h1 span {

  color: var(--red);

}



.page-header p {

  font-size: 1rem;

  color: var(--gray-600);

  max-width: 600px;

  margin: 0 auto;

}



/* Contact Section */

.contact-section {

  padding: 60px 0;

}



.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

}



/* Contact Info Column */

.contact-info-col {

  background: var(--white);

  border-radius: 32px;

  padding: 32px;

  border: 1px solid var(--gray-200);

}



.contact-info-col h3 {

  font-size: 1.3rem;

  margin-bottom: 24px;

  position: relative;

  display: inline-block;

}



.contact-info-col h3::after {

  content: '';

  position: absolute;

  bottom: -8px;

  left: 0;

  width: 40px;

  height: 3px;

  background: var(--red);

  border-radius: 3px;

}



.contact-card {

  display: flex;

  gap: 16px;

  margin-bottom: 24px;

  padding: 16px;

  background: var(--gray-100);

  border-radius: 20px;

  transition: all 0.3s ease;

}



.contact-card:hover {

  transform: translateX(4px);

  background: var(--white);

  box-shadow: var(--shadow-sm);

}



.contact-card-icon {

  width: 50px;

  height: 50px;

  background: rgba(196, 30, 58, 0.1);

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.contact-card-icon i {

  font-size: 1.3rem;

  color: var(--red);

}



.contact-card-content h4 {

  font-size: 0.7rem;

  font-weight: 600;

  color: var(--gray-500);

  text-transform: uppercase;

  margin-bottom: 4px;

}



.contact-card-content p {

  font-size: 0.95rem;

  font-weight: 500;

  color: var(--gray-900);

  margin-bottom: 4px;

}



.contact-card-content a {

  color: var(--gray-900);

  text-decoration: none;

}



.contact-card-content a:hover {

  color: var(--red);

}



.contact-note {

  font-size: 0.7rem;

  color: var(--gray-500);

}



.map-btn {

  background: none;

  border: none;

  color: var(--red);

  font-size: 0.75rem;

  cursor: pointer;

  padding: 0;

  margin-top: 8px;

}



.contact-philosophy {

  margin: 24px 0;

  padding: 16px;

  background: rgba(196, 30, 58, 0.05);

  border-radius: 16px;

  border-left: 3px solid var(--red);

}



.contact-philosophy i {

  font-size: 1.2rem;

  color: var(--red);

  margin-bottom: 8px;

  display: block;

}



.contact-philosophy p {

  font-size: 0.8rem;

  color: var(--gray-600);

  line-height: 1.6;

  margin: 0;

}



.contact-social {

  display: flex;

  gap: 12px;

  margin-top: 24px;

}



.social-link {

  width: 40px;

  height: 40px;

  background: var(--gray-100);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--gray-600);

  transition: all 0.3s;

}



.social-link:hover {

  background: var(--red);

  color: var(--white);

  transform: translateY(-3px);

}



/* Contact Form Column */

.contact-form-col {

  background: var(--white);

  border-radius: 32px;

  padding: 32px;

  border: 1px solid var(--gray-200);

}



.contact-form-col h3 {

  font-size: 1.3rem;

  margin-bottom: 8px;

}



.contact-form-col > p {

  font-size: 0.85rem;

  color: var(--gray-500);

  margin-bottom: 24px;

}



/* Form Styles */

.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-bottom: 0;

}



.form-group {

  margin-bottom: 20px;

}



.form-group label {

  display: block;

  font-size: 0.75rem;

  font-weight: 600;

  color: var(--gray-600);

  margin-bottom: 6px;

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 12px 16px;

  border: 1px solid var(--gray-300);

  border-radius: 12px;

  font-size: 0.9rem;

  transition: all 0.3s;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--red);

  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);

}



.required {

  color: var(--red);

}



/* GDPR Consent */

.gdpr-consent {

  background: var(--gray-100);

  border-radius: 16px;

  padding: 20px;

  margin: 20px 0;

  border-left: 3px solid var(--red);

}



.checkbox-wrapper {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin-bottom: 12px;

}



.checkbox-wrapper input {

  width: 20px;

  height: 20px;

  accent-color: var(--red);

  margin-top: 2px;

}



.checkbox-label {

  font-size: 0.85rem;

  color: var(--gray-800);

  cursor: pointer;

}



.gdpr-link {

  background: none;

  border: none;

  color: var(--red);

  font-weight: 600;

  text-decoration: underline;

  cursor: pointer;

  padding: 0;

}



.gdpr-text {

  display: flex;

  gap: 10px;

  font-size: 0.7rem;

  color: var(--gray-500);

  margin-top: 8px;

  padding-top: 8px;

  border-top: 1px solid var(--gray-200);

}



.gdpr-text i {

  color: var(--red);

  margin-top: 2px;

}



.error-message {

  color: var(--red);

  font-size: 0.7rem;

  margin-top: 4px;

  display: none;

}



.error-message.show {

  display: block;

}



.form-submit {

  margin-top: 24px;

}



.submit-loading {

  text-align: center;

  padding: 12px;

  color: var(--gray-500);

}



.form-message {

  margin-top: 16px;

  padding: 12px;

  border-radius: 12px;

  font-size: 0.85rem;

  text-align: center;

}



.form-message.success {

  background: #e8f5e9;

  color: #2e7d32;

}



.form-message.error {

  background: #ffebee;

  color: #c62828;

}



.form-note {

  text-align: center;

  font-size: 0.7rem;

  color: var(--gray-500);

  margin-top: 16px;

}



/* Transport Section */

.transport-section {

  padding: 0 0 80px;

}



.transport-header {

  text-align: center;

  margin-bottom: 40px;

}



.transport-header h3 {

  font-size: 1.6rem;

  color: var(--gray-900);

  margin-bottom: 8px;

  position: relative;

  display: inline-block;

}



.transport-header h3::after {

  content: '';

  position: absolute;

  bottom: -12px;

  left: 50%;

  transform: translateX(-50%);

  width: 50px;

  height: 3px;

  background: var(--red);

}



.transport-header p {

  font-size: 0.9rem;

  color: var(--gray-500);

  margin-top: 20px;

}



.transport-tabs-wrapper {

  margin-bottom: 32px;

}



.transport-tabs {

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

}



.transport-tab {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 12px 28px;

  background: var(--gray-100);

  border: none;

  border-radius: 60px;

  font-size: 0.9rem;

  font-weight: 500;

  color: var(--gray-600);

  cursor: pointer;

  transition: all 0.3s;

}



.transport-tab.active {

  background: var(--red);

  color: var(--white);

}



.transport-content {

  min-height: 320px;

}



.transport-panel {

  display: none;

}



.transport-panel.active {

  display: block;

  animation: fadeIn 0.3s ease;

}



.transport-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 32px;

}



.transport-card {

  background: var(--gray-100);

  border-radius: 24px;

  padding: 32px;

  border: 1px solid var(--gray-200);

  transition: all 0.3s;

}



.transport-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-md);

}



.transport-card.single {

  max-width: 500px;

  margin: 0 auto;

  text-align: center;

}



.transport-card-icon {

  position: relative;

  width: 70px;

  height: 70px;

  background: var(--white);

  border-radius: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

}



.transport-card-icon.large {

  width: 80px;

  height: 80px;

  margin: 0 auto 20px;

  background: linear-gradient(135deg, var(--red), var(--red-dark));

}



.transport-card-icon.large i {

  color: var(--white);

  font-size: 2rem;

}



.transport-card-icon i {

  font-size: 1.6rem;

  color: var(--red);

}



.line-badge {

  position: absolute;

  bottom: -8px;

  right: -8px;

  width: 28px;

  height: 28px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.7rem;

  font-weight: 700;

  color: white;

}



.line-badge.line-c { background: #e63946; }

.line-badge.line-a { background: #4caf50; }

.line-badge.tram { background: #e07800; width: 36px; height: 36px; }

.line-badge.bus { background: #3a6b8a; width: 48px; border-radius: 30px; }



.transport-card h4 {

  font-size: 1.1rem;

  margin-bottom: 16px;

}



.station {

  font-size: 0.9rem;

  margin-bottom: 16px;

}



.time-info {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--white);

  padding: 6px 14px;

  border-radius: 40px;

  font-size: 0.8rem;

  margin-bottom: 16px;

}



.time-info.primary {

  background: rgba(196, 30, 58, 0.1);

}



.time-info i {

  color: var(--red);

}



.alternative-info,

.highlight-info {

  display: flex;

  gap: 10px;

  font-size: 0.75rem;

  color: var(--gray-600);

  background: rgba(0, 0, 0, 0.03);

  padding: 12px;

  border-radius: 12px;

}



.highlight-info {

  background: rgba(196, 30, 58, 0.05);

  color: var(--red);

}



.line-badges-group {

  display: flex;

  justify-content: center;

  gap: 12px;

  margin-bottom: 20px;

}



.parking-list {

  list-style: none;

  padding: 0;

  margin: 0 0 20px;

  text-align: left;

}



.parking-list li {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 8px 0;

  border-bottom: 1px solid var(--gray-200);

  font-size: 0.85rem;

}



.parking-list li i {

  color: var(--red);

  width: 24px;

}



.parking-note {

  display: flex;

  gap: 10px;

  background: rgba(196, 30, 58, 0.05);

  padding: 14px;

  border-radius: 12px;

  font-size: 0.8rem;

  text-align: left;

}



.transport-tip {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  background: var(--gray-100);

  padding: 20px 24px;

  border-radius: 20px;

  margin-top: 40px;

}



.transport-tip i {

  color: var(--red);

  font-size: 1.2rem;

}



.transport-tip p {

  font-size: 0.85rem;

  margin: 0;

}



.transport-tip a {

  color: var(--red);

  text-decoration: none;

}



/* Animations */

@keyframes fadeIn {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: translateY(0); }

}



/* ============================================

   RESPONSIVE - MOBILE

   ============================================ */



@media (max-width: 900px) {

  .contact-grid {

    grid-template-columns: 1fr;

    gap: 32px;

  }

  

  .transport-grid {

    grid-template-columns: 1fr;

    gap: 20px;

  }

}



@media (max-width: 768px) {

  .container {

    padding: 0 20px;

  }

  

  .page-header {

    padding: 40px 0 30px;

  }

  

  .page-header h1 {

    font-size: 1.8rem;

  }

  

  .page-header p {

    font-size: 0.9rem;

  }

  

  .contact-section {

    padding: 40px 0;

  }

  

  .contact-info-col,

  .contact-form-col {

    padding: 24px;

  }

  

  .form-row {

    grid-template-columns: 1fr;

    gap: 0;

  }

  

  .transport-section {

    padding: 0 0 60px;

  }

  

  .transport-header h3 {

    font-size: 1.3rem;

  }

  

  .transport-tab span {

    display: none;

  }

  

  .transport-tab {

    padding: 10px 16px;

  }

  

  .transport-tab i {

    font-size: 1.1rem;

    margin: 0;

  }

  

  .transport-card {

    padding: 24px;

  }

  

  .transport-tip {

    flex-direction: column;

    text-align: center;

  }

}



@media (max-width: 480px) {

  .container {

    padding: 0 16px;

  }

  

  .page-header h1 {

    font-size: 1.5rem;

  }

  

  .contact-card {

    flex-direction: column;

    text-align: center;

  }

  

  .contact-card-icon {

    margin: 0 auto;

  }

  

  .contact-info-col h3::after {

    left: 50%;

    transform: translateX(-50%);

  }

  

  .contact-info-col h3 {

    display: block;

    text-align: center;

  }

  

  .contact-social {

    justify-content: center;

  }

  

  .transport-card-icon {

    width: 60px;

    height: 60px;

  }

  

  .transport-card-icon i {

    font-size: 1.3rem;

  }

  

  .transport-card-icon.large {

    width: 70px;

    height: 70px;

  }

  

  .transport-card-icon.large i {

    font-size: 1.6rem;

  }

}





/*===========================*/

#info-doprava {

    padding-bottom: 2rem;

}

.info-content-text {

    padding: 0 0 1rem;

}

/* Transport Tabs */

.transport-tabs-wrapper {

    width: 100vw;

    position: relative;

    left: 50%;

    right: 50%;

    margin-left: -50vw;

    margin-right: -50vw;

    background: var(--surface);

    border-top: 1px solid var(--border);

    border-bottom: 2px solid var(--border);

    margin-top: 2rem;

    margin-bottom: 2.5rem;

}

.transport-tabs {

    display: flex;

    gap: 0;

    max-width: 1060px;

    margin: 0 auto;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

}

.transport-tabs::-webkit-scrollbar {

height: 4px;

}

.transport-tabs::-webkit-scrollbar-track {

background: var(--bg);

}

.transport-tabs::-webkit-scrollbar-thumb {

background: var(--border);

border-radius: 2px;

}

.transport-tab {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 1rem 1.5rem;

    background: transparent;

    border: none;

    border-bottom: 3px solid transparent;

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--muted);

    cursor: pointer;

    transition: all 0.2s;

    white-space: nowrap;

    flex: 1;

    justify-content: center;

    min-width: max-content;

}

.transport-tab:hover {

    color: var(--text);

    background: rgba(139, 26, 46, 0.03);

}

.transport-tab.is-active {

    color: var(--red);

    border-bottom-color: var(--red);

    background: rgba(139, 26, 46, 0.05);

}

.transport-tab svg {

    width: 20px;

    height: 20px;

    fill: currentColor;

}

.transport-tab-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 22px;

    height: 22px;

    padding: 0 0.4rem;

    background: var(--red);



    color: #fff;

    font-size: 0.7rem;

    font-weight: 700;

    border-radius: 50%;

}

.transport-tab.is-active .transport-tab-badge {

    background: var(--red-hover);

}

/* Tab Content */

.transport-tab-content {

    display: none;

    animation: fadeIn 0.3s ease;

}

.transport-tab-content.is-active {

    display: block;

}

@keyframes fadeIn {

from {

opacity: 0;

transform: translateY(10px);

}

to {

opacity: 1;

transform: translateY(0);

}

}



/* Responsive tabs */

@media (max-width: 900px) {

.transport-tabs-wrapper {

    margin-top: 1.5rem;

    margin-bottom: 2rem;

}

.transport-tabs {

    gap: 0;

    justify-content: center;

}

.transport-tab {

    padding: 0.85rem 1.25rem;

    font-size: 0.85rem;

    flex: 0 0 auto;

}

.transport-tab svg {

    width: 18px;

    height: 18px;

}

.transport-tab-badge {

    min-width: 20px;

    height: 20px;

    font-size: 0.65rem;

}

}



@media (max-width: 480px) {

.transport-tab {

    padding: 0.75rem 1rem;

    font-size: 0.8rem;

}

.transport-tab svg {

    width: 16px;

    height: 16px;

}

.transport-tab-text {

    display: none; /* Hide text on very small screens, show only icons */

}

}

/*

.doprava-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.25rem;

    	justify-content: center;

	place-items: center;   horizontálně i vertikálně 



}

*/

.doprava-grid-one {

    display: grid;

    grid-template-columns: repeat(1fr);

    gap: 1.25rem;

    	justify-content: flex-start;

	align-content: flex-start;

/*	place-items: center;   horizontálně i vertikálně */

}

.doprava-grid-r {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}

.doprava-block {

    background: var(--bg);

    border: 1px solid var(--border-soft);

    border-radius: var(--radius);

    padding: 1.1rem 1.25rem;

	border-radius: 32px;

  	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);

  	transition: all 0.4s ease;

  	opacity: ;verflow: hidden;

  	bottom: ;order: 1px solid rgba(0, 0, 0, 0.08);

}

.block-header {

    display: flex;

    align-items: center;

    gap: .65rem;

    margin-bottom: .85rem;

    padding-bottom: .75rem;

    border-bottom: 1px solid var(--border-soft);

}

.transport-icon {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: var(--red-soft);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.transport-icon svg {

    width: 16px;

    height: 16px;

    fill: var(--red);

}

.block-header h4 {

    font-size: .85rem;

    font-weight: 600;

    color: var(--text);

}

.block-content {

    margin-bottom: .75rem;

}

.block-content:last-child {

    margin-bottom: 0;

}

.doprava-lines, .tram-lines, .bus-lines {

    display: flex;

    flex-wrap: wrap;

    gap: .35rem;

    margin-bottom: .6rem;

}

.doprava-line {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 26px;

    height: 26px;

    border-radius: 50%;

    font-size: .75rem;

    font-weight: 700;

    color: #fff;

/*    margin-left: auto; */

	

}



@media (max-width: 768px) {

  .doprava-lines, .tram-lines, .bus-lines {

    justify-content: center;

}

  }

	

.doprava-line.metro-c {

    background: #e63946;

}

.doprava-line.metro-a {

    background: #4caf50;

}

.doprava-line.tram {

    background: #e07800;

}

.doprava-line.bus {

    background: #3a6b8a;

}

.station-name {

    font-size: .82rem;

    font-weight: 500;

    color: var(--text);

    margin-bottom: .45rem;

}

.time-badge {

    display: inline-flex;

    align-items: center;

    gap: .35rem;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: .2rem .65rem;

    font-size: .75rem;

    color: var(--muted);

    margin-bottom: .5rem;

}

.time-icon {

    display: flex;

}

.alternative-box {

    background: var(--red-soft);

    border-left: 2px solid var(--violet);

    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

    padding: .5rem .7rem;

    font-size: .75rem;

    color: var(--muted);

    line-height: 1.5;

}

.alternative-boxx {

    font-size: .75rem;

    color: var(--muted);

    font-style: italic;

    margin-top: .25rem;

}

.car-info p {

    font-size: .84rem;

    font-weight: 500;

    color: var(--text);

    margin-bottom: .5rem;

}

.doprava-footer {

    display: flex;

/*    flex-direction: column;*/

    gap: .6rem;

    margin-top: 1.5rem;

    padding-top: 1.25rem;

    border-top: 1px solid var(--border-soft);

	justify-content: center;

}

.footer-tip {

    display: flex;

    align-items: flex-start;

    gap: .6rem;

}

.tip-icon {

    flex-shrink: 0;

    display: flex;

    margin-top: .1rem;

}

.footer-tip p {

    font-size: .8rem;

    color: var(--muted);

    line-height: 1.5;

}

.footer-tip a {

    color: var(--blue);

    text-decoration: underline;

}



/* kontakt responsive */

@media (max-width: 1000px) {

.doprava-grid {

    grid-template-columns: 1fr 1fr;

}

}



@media (max-width: 860px) {

.contact-layout {

    grid-template-columns: 1fr;

}

}



@media (max-width: 580px) {

.contact-form .form-row {

    grid-template-columns: 1fr;

}

.doprava-grid {

    grid-template-columns: 1fr;

}

}

.doprava-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  max-width: 900px;

	justify-content: center;

	place-items: center; 

  margin: 0 auto;

}



.doprava-grid-one {

  max-width: 500px;

  margin: 0 auto;

}



.doprava-block {

  background: #fff;

  border-radius: 18px;

  padding: 20px;



  box-shadow: 0 10px 30px rgba(0,0,0,0.05);

  transition: all 0.3s ease;

}



.doprava-block:hover {

  transform: translateY(-4px);

  box-shadow: 0 18px 40px rgba(0,0,0,0.08);

}



.block-header {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

}



.block-header h4 {

  font-size: 1rem;

  font-weight: 600;

}



.doprava-line {

  display: inline-flex;

  align-items: center;

  justify-content: center;



  width: 28px;

  height: 28px;

  border-radius: 50%;



  font-size: 0.8rem;

  font-weight: 600;

  color: white;

}



.metro-a { background: #4CAF50; } /* зелёная */

.metro-c { background: #E53935; } /* красная */

.tram { background: #555; }

.bus { background: #777; }





.transport-tab {

  display: flex;

  align-items: center;

  gap: 6px;



  padding: 10px 16px;

  border-radius: 999px;

  border: 1px solid rgba(0,0,0,0.08);



  background: white;

  cursor: pointer;



  transition: all 0.25s ease;

}



.transport-tab:hover {

  background: rgba(196,30,58,0.05);

}



.transport-tab.is-active {

  background: var(--red);

  color: white;

  border-color: transparent;

}



@media (max-width: 768px) {

  .doprava-grid {

    grid-template-columns: 1fr;

  }



	

.transport-tabs-wrapper {

  display: flex;

  justify-content: center;

  width: 100%;

}

.transport-tabs {

  display: inline-flex; /* 🔥 ключевой момент */

  justify-content: center;

  align-items: center;

  gap: 10px;



  margin: 30px auto;

}





@media (max-width: 768px) {

  .transport-tabs {

    flex-wrap: wrap;

    justify-content: center;

  }

}

  .transport-tab {

    padding: 8px 12px;

    font-size: 0.85rem;

  }

}

.doprava-footer {

  margin-top: 40px;

  display: flex;

  justify-content: center;

}



.footer-tip {

  max-width: 600px;

  background: rgba(0,0,0,0.03);

  padding: 12px 16px;

  border-radius: 12px;

  font-size: 0.85rem;

}.doprava-footer {

  margin-top: 40px;

  display: flex;

  justify-content: center;

}



.footer-tip {

  max-width: 600px;

  background: rgba(0,0,0,0.03);

  padding: 12px 16px;

  border-radius: 12px;

  font-size: 0.85rem;

}

.transport-tab-content {

  display: none;

  animation: fadeIn 0.3s ease;

}



.transport-tab-content.is-active {

  display: block;

}



@keyframes fadeIn {

  from { opacity: 0; transform: translateY(10px);}

  to { opacity: 1; transform: translateY(0);}

}