:root {
    --purpleDotManadalaOne: #3c0c3c;
    --purpleDotManadalaTwo: #32203b;
    --purpleDotManadalaThree: #521a52;
    --purpleDotManadalaFour: #59183e;
    --purpleDotManadalaFive: #6f126f;
    --purpleDotManadalaSix: #f0dafb;
    --lightbluedotmandala: var(--lightblue);
    --greendotmandala: #83bf43;
}

html,
body {
    font-family: 'CustomFont', sans-serif;
    padding: 0px;
    margin: 0px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    cursor: default;
    background-color: rgba(252, 252, 252, 0.995);
}

/* width */
::-webkit-scrollbar
{
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track
{
    background: var(--whitesmoke);
}

/* Handle */
::-webkit-scrollbar-thumb
{
    background: #888;
    border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
    background: #555;
}

.header-banner
{
    width: 100%;
    background-color: var(--purpleDotManadalaTwo);
    background-image: url("../assets/images/dotmandalasbackground.png");
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    position: relative;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.fecha-inscripcion
{
    background-color: var(--purpleDotManadalaFive);
    color: #f0dafb;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    padding: 5px 10px;
    margin: 5px;
}

.fecha-inscripcion p
{
    margin: 0;
}

.logo
{
    display: flex;
    position: absolute;
    width: 80px;
    height: auto;
    right: 5px;
    align-self: anchor-center;
    
}

.cuenta-regresiva
{
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center; 
}

.time-box
{
    background-color: var(--purpleDotManadalaThree);
    color: var(--white);
    padding: 8px;
    margin: 5px;
    border-radius: 8px;
    text-align: center;
    width: 100px;
    height: 80px;
}

.time-box span
{
font-size: 25px;
}

.section-one
{
    background-color: var(--purpleDotManadalaOne);
    height: auto;
    padding: 20px 0px;
}

.section-one-content
{
    align-items: center;
    justify-content: center;
}

.left-column-section-one
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-mensaje{
    background: linear-gradient(0deg,rgba(240, 218, 251, 1) 0%, rgba(60, 12, 60, 0.85) 65%);
    border: 1px solid var(--purpleDotManadalaSix);
    border-radius: 10px;
    margin: 10px;
    height: 80px;
    box-shadow: #32203b 0px 0px 10px;
    position: relative;
    width: 100%;
}

.right-column-section-one
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-inscribete-container
{
    display: flex;
    justify-content: center;
}

/* Chrome, Safari, Edge, Opera (Chromium) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield; /* old */
  appearance: textfield;      /* new standard */
}

.mini-form-input
{
    padding: 10px;
    margin: 5px;
    border: 2px solid var(--purpleDotManadalaSix);
    border-radius: 5px;
    font-size: 1rem;
    width: 200px;
}

@keyframes lightblueToCustom
{
    0% {box-shadow: 0px 0px 15px  lightblue;}
    50% {box-shadow: var(--greendotmandala);}
    100% {box-shadow: 0px 0px 15px lightblue;}   
}

.btn-inscribete
{
    background-color: lightblue;
    color: var(--white);
    border: none;
    padding: 10px 48px;
    font-size: 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    color: var(--purpleDotManadalaOne);
    animation: alternate lightblueToCustom 1s infinite;
}

.btn-inscribete:hover
{
    background-color: var(--greendotmandala);
    color: var(--white);
    transition: 0.3s;
    text-decoration-line: none;
    text-decoration-color: none;
}

.photo-yosymar-vasquez
{
    width: 100%;
    height: auto;
    border-radius: 50%;
    margin-right: 50px;
    border: 5px solid var(--purpleDotManadalaSix);
    margin: auto;
}

.intro-text
{
    background-color: var(--purpleDotManadalaFive);
    font-size: 1.2rem;
    text-align: center;
    margin: auto;
    color: var(--white);
    line-height: 1.6;
    width: 100%;  
    padding: 20px;
    margin-right: auto;
    border-radius: 10px;
}

.section-three
{
    background-color: var(--purpleDotManadalaFive);
    padding: 50px 0px;
    text-align: center;
    color: white;
}

.testimonial-container
{
    padding: 10px;
    border-radius: 10px;
    background-color: var(--purpleDotManadalaSix);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin: auto ;
    color: var(--purpleDotManadalaOne);
    border: 2px solid var(--purpleDotManadalaSix);
}

.section-four
{
    background-color: var(--purpleDotManadalaSix);
    padding: 50px 0px;
    text-align: center;
    color: white;
    color: var(--purpleDotManadalaOne);
}

.event-card h3
{
    text-align: center;
}

.event-card
{
    background-color: var(--purpleDotManadalaFive);
    border: 1px solid var(--purpleDotManadalaOne);
    color: white;
    height: 250px;
    margin: auto auto;
    text-align: left;
    border-radius: 8px;
    border: 2px solid var(--purpleDotManadalaFour);
    padding: 20px;
}

.footer-banner
{
    text-align: center;
    width: 100%;
    background-color: var(--purpleDotManadalaTwo);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    position: relative;
    padding: 10px 0px;
}


/* A un solo paso section */
.aunsolopaso {
    width: 100vw;
    height: 100vh;
    background-color: var(--purpleDotManadalaTwo);
    background-image: url("../assets/images/dotmandalasbackground.png");
    justify-content: center;
    align-items: center;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.aunsolopaso-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aunsolopaso-content{
    justify-content: center;
    text-align: center;
    margin: auto auto;
    border: 2px solid var(--purpleDotManadalaFive);
    border-radius: 8px;
    padding: 10px;

}

@media screen and (max-width: 500px) {

   .time-box{
       width: 80px;
       height: 70px;
       padding: 5px;
       margin: 3px;
   }

   .time-box{
       margin: 0;
   }

   .cuenta-regresiva-item{
       padding: 0;
       margin: 0;
   }

   .btn-inscribete {
       padding: 8px 15px;
       margin-top: 5px;
       font-size: 1rem;
   }

   .container-mensaje{
       margin: 5px 0px;
   }

   .container-mensaje p{
    margin-top: 20px;
   }

   .mini-form-input{
       width: 100%;
       margin: 5px 0px;
    }

    .testimonial-container{
       margin: 20px 10px;
   }

   .event-card{
    margin: 10px 0px;

   }
}

@media screen and (min-width: 801px) and (max-width: 1250px) {
}