@charset "UTF-8";
/*
|--------------------------------------------------------------------------
| slides
| -------------------------------------------------------------------------
| https://codeshack.io/pure-css3-image-slideshow-example/
| https://www.w3schools.com/howto/howto_css_hero_image.asp
| https://github.com/RickSekuloski/pure_css_hero_sldier/blob/main/index.html
https://www.w3schools.com/howto/howto_css_hero_image.asp
https://codepen.io/andrewsgyamfi/pen/mJGwZz
|--------------------------------------------------------------------------
*/

.slider-tabs input{
    visibility: hidden;
    display: none;
}
.labels{
    display: flex;
    gap: 10px;
    position:absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.labels label{
    height: 20px;
    width: 20px;
    background-color: rgb(82, 137, 186);
    border-radius: 10px;
    cursor: pointer;
    transition: all .4s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.3) 0 19px 38px, rgba(0, 0, 0, 0.22) 0 15px 12px;
}
.slider-tabs input:nth-child(1):checked ~ .labels label:nth-child(1),
.slider-tabs input:nth-child(2):checked ~ .labels label:nth-child(2),
.slider-tabs input:nth-child(3):checked ~ .labels label:nth-child(3){
    width: 60px;
    background: rgb(32, 72, 107);
}
.hero-text-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.hero-section {

    display:none;
    background-color: #fff;
    width: 100%;
    position: relative;
}

.hero-content{

    display: inline-flex;
    width: 300%;
    position: relative;
    transition: all .5s linear;

}

.hero-content .hero-box {
    height: 300px;
    width: 100%;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;

    transition: all 250ms ease-in;
    animation: move 15s ease-in-out 2s infinite alternate;
}

@media only screen and (min-width: 30em) { /** 30em - 480px */
    .hero-section{
        display:block;
    }
    .hero-content .hero-box {
        max-height: 150px;
    }
}

@media only screen and (min-width: 48em) { /** 768px = 48em */
    .hero-content .hero-box {
        max-height: 200px;
    }
}

@media only screen and (min-width: 64em) { /** 1024px = 64em */
    .hero-content .hero-box {
        max-height: 250px;
    }
}
@media only screen and (min-width: 80em) { /** 1280px = 80em */
    .hero-content .hero-box {
        max-height: 300px;
    }
}
.hero-content .hero-box:nth-child(1){
    background-image: url("../img/slides/image1.jpg");
    /*
  background-color:#861657;
  background-image:linear-gradient(326deg, #861657 0%, #ffa69e 74%);
  */
}
.hero-content .hero-box:nth-child(2){
    background-image: url("../img/slides/image2.jpg");

    /*
  background-color: #7f53ac;
  background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
  */
}
.hero-content .hero-box:nth-child(3){
    background-image: url("../img/slides/image3.jpg");
    /*
  background-color: #08e1ae;
  background-image: linear-gradient(315deg, #08e1ae 0%, #98de5b 74%);
  */
}

.slider-tabs input:nth-child(1):checked ~ .hero-content{
    left: 0vw;
}
.slider-tabs input:nth-child(2):checked ~ .hero-content{
    left: -100vw;
}
.slider-tabs input:nth-child(3):checked ~ .hero-content{
    left: -200vw;
}
.heading-1{
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 10px;
}
.desc{
    background-color: white;
    padding: 10px 20px;
    width: 60%;
    font-size: 24px;
}

@keyframes move {
    0%,30% { transform: translateX(0); }
    40%,70% { transform: translateX(-100%); }
    80%,100% { transform: translateX(-200%); }
}




/*
.hero-bar {
    background-color: #df9673;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 900;
    width: 100%;
}
.hero-bar label {
    display: inline-block;
    cursor: pointer;
    line-height: 68px;
    padding: 0 10px;
}

.hero-bar label:hover {
    background-color: #ecbfaa;
}

.hero-content {
    background-color: #d6774a;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: #fff;
    text-align: center;

}

.hero-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    background-position: center;
    background-size: cover;
    background-color: white;
    transition: left 0s 0.75s;

    animation: move 15s ease-in-out 2s infinite alternate;
}

.hero-content .hero-box:nth-child(1){
    background-image: url("../img/slides/image1.jpg");
}
.hero-content .hero-box:nth-child(2){
    background-image: url("../img/slides/image2.jpg");
}
.hero-content .hero-box:nth-child(3){
    background-image: url("../img/slides/image3.jpg");
}
@keyframes move {
    0%,30% { transform: translateX(0); }
    40%,70% { transform: translateX(-100%); }
    80%,100% { transform: translateX(-200%); }
}
*/