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

.welcome-btn:disabled {
  opacity: .5;
  cursor: auto;
}

.template-container{
  display: block;
  background-color: #3390fe;
  border-radius: 9999px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  cursor: pointer;
  color: rgb(255 255 255);
  width: 40%;
}

/* Hide default radio button */
.template-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Change color on hover */
.template-container:hover{
  background-color: #1d71f3;
}
.template-container:hover input ~ .checkmark{
  background-color: #1d71f3;
}

/* Custom Radio Button */
.checkmark{
  display: hidden;
  position: absolute;
  height: 25px;
  width: 25px;
  background-color: #3390fe;
  border-radius: 50%;
  margin-left: 10px;
  color: #3390fe;
}

/* Radio button is checked */
.template-container input:checked ~ .checkmark{
  color: rgb(255 255 255);
}

/* Slider */
.carousel {
  position: relative;
  height: 503px;
  overflow: hidden;
}
.ecom{
  height: 650px;
}

.slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 0.375rem;
}

.slide > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.375rem;
  padding-bottom: 0px;
}

.slide[data-active]{
  opacity: 1;
}

.carousel-button{
  position: absolute;
  z-index: 2;
  border-radius: 100px;
  color: rgba(255,255,255, 0.7);
  background: rgba(0,0,0,0.6);
  font-size: 1.5rem;
  border: none;
  top: 53%;
  transform: translateY(-50%);
  padding: 0 .35rem;
}

.carousel-button:hover,
.carousel-button:focus{
  color: white;
  background-color: rgba(0,0,0,0.4);
}

.carousel-button.prev{
  left: 1rem;
}

.carousel-button.next{
  right: 1rem;
}

/* mobile */
@media (min-width: 100px){
  .template-container{
    width: 100%;
  }
  .carousel {
    height: 47vw;
  }
  .ecom{
    height: 58vw;
  }
  .login{
    width: 14rem;
  }
}
@media (min-width: 351px){
  .template-container{
    width: 80%;
  }
  .carousel {
    height: 51vw;
  }
  .ecom{
    height: 61vw;
  }
  .login{
    width: 18rem;
  }
}
@media (min-width: 446px){
  .template-container{
    width: 60%;
  }
  .carousel {
    height: 53vw;
  }
  .ecom{
    height: 64vw;
  }
  .login{
    width: 22rem;
  }
}
@media (min-width: 520px){
  .template-container{
    width: 50%;
  }
  .carousel {
    height: 54vw;
  }
  .ecom{
    height: 66vw;
  }
  .login{
    width: 25rem;
  }
}

/* sm */
@media (min-width: 640px){
  .template-container{
    width: 50%;
  }
  .carousel {
    height: 48vw;
  }
  .ecom{
    height: 59vw;
  }
}

/* md */
@media (min-width: 768px){
  .template-container{
    width: 40%;
  }
  .carousel {
    height: 43vw;
  }
  .ecom{
    height: 53vw;
  }
}
@media (min-width: 774px){
  .template-container{
    width: 45%;
  }
  .carousel{
    height: 44vw;
  }
  .ecom{
    height: 53vw;
  }
}
@media (min-width: 810px){
  .template-container{
    width: 40%;
  }
  .carousel {
    height: 45vw;
  }
  .ecom{
    height: 54vw;
  }
}
@media (min-width: 900px){
  .template-container{
    width: 36%;
  }
  .carousel {
    height: 46vw;
  }
  .ecom{
    height: 57vw;
  }
}

/* lg */
@media (min-width: 1024px){
  .template-container{
    width: 40%;
  }
  .carousel {
    height: 40vw;
  }
  .ecom{
    height: 49vw;
  }
}
@media (min-width: 1090px){
  .carousel {
    height: 42vw;
  }
  .ecom{
    height: 51vw;
  }
}
@media (min-width: 1180px){
  .carousel {
    height: 43vw;
  }
  .ecom{
    height: 53vw;
  }
}

/* xl */
@media (min-width: 1280px){
  .template-container{
    width: 35%;
  }
  .carousel {
    height: 37vw;
  }
  .ecom{
    height: 45vw;
  }
}
/*
 * 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.
 *


 */