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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.subscriptions-border{
   border: 2px solid #DD6B20;
}

/* Animation */
@keyframes loading {
	to { transform: rotate(360deg); }
}

/* Loader (*/
.loading {

	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: transparent;
	
	border-top: 3px solid #fff;
	border-right: 3px solid #c14d0fab;
	border-bottom: 3px solid #c14d0fab;
	border-left: 3px solid #c14d0fab;
	animation: loading 1.2s infinite linear;
	
}

.line{
	height: 3px;
	bottom: -6px;
	transform: translateX(10%);
}


.text-64{
   font-size: 64px;
   line-height: 74px;
}

/* ============================================================
   Tradesman Domestic customer pages — subtle entrance animation only.
   Everything else uses the app's normal Tailwind defaults (white cards,
   gray-200 borders, orange-600 CTAs) so these pages match the rest of
   the product instead of having their own visual identity.
   ============================================================ */

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-rise {
  animation: fade-rise 0.4s ease-out both;
}
.fade-rise-1 { animation-delay: 0.05s; }
.fade-rise-2 { animation-delay: 0.1s; }
.fade-rise-3 { animation-delay: 0.15s; }
.fade-rise-4 { animation-delay: 0.2s; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS 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/SCSS
 * 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.
 *


 */

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
}