@import "tailwindcss";

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #F9F8FF;
}
.head_single {
    background-position: center;
    background-size: cover;
    min-height: 450px;
    position: relative;
    text-align: center;
}
.head_single.digicards{background-image: url(../../public/bg_cards.jpg);}
.head_single.folleteria{background-image: url(../../public/bg_folleteria.jpg);}

/* slide */
.swiper::before, .head_single::before {
    position: absolute;
    content: "";
    min-height: 200px;
    width: 100%;
    bottom: 0;
    left: 0;
    background-image: url(../../public/figure.svg);
    z-index: 1000;
    background-position: center bottom -1px;
    background-size: 102%;
    background-repeat: no-repeat;
}
.swiper {
    position: relative;
    height: 800px;
}
.swiper-slide .back {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-slide:before {
    position: absolute;
    content: "";
    bottom: 0;
    height: 100%;
    width: 100%;
    left: 0;
    background: linear-gradient(1turn, rgba(0, 0, 0, .5), transparent);
    z-index: 10;
}
.swiper-slide .content{
    /* background-color: red; */
    bottom: 0;
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 700px;
    width: 100%;
    color: #fff;
    z-index: 9999;
}
.swiper-slide .content .phone{
    width: 400px;
    margin-right: 50px;
}
.swiper-slide .content .inf img{
    width: 250px;
}
.swiper-slide .content .inf h1{
    font-size: 40px;
    margin-bottom: 10px;
}
.swiper-slide .content .inf p{
    font-size: 18px;
}
.swiper-slide .content .inf a{display: inline-block; margin-top: 20px;}
.swiper-slide .content .inf button{
    padding: 5px 20px;
    border-radius: 6px;
    cursor: pointer;
}
.swiper-slide.one .content .inf button{background-color: rgba(237, 198, 41, .59);}
.swiper-slide.two .content .inf button{background-color: rgba(235, 43, 136, .59);}
.swiper-slide.trhee .content .inf button{background-color: rgba(104, 235, 117, .59);}



.list_cat .active {
    filter: invert(43%) sepia(92%) saturate(746%) hue-rotate(340deg) brightness(97%) contrast(99%);
}



/* landscape */
.landscape{display: none;}



@media (max-width: 768px) {
    .swiper::before, .head_single::before {
        min-height: 150px;
    }
}

/*LANDSCAPE IPHONE*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation: landscape) {
    body.loaded .card{display: none!important;}
    .landscape{display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; right: 0; left: 0;
      background: #000;    justify-content: center;align-items: center; gap: 15px;}
    .landscape span{color: #E0E2EB; text-align: center; font-size: 14px;}
}

/*LANDSCAPE SAMSUNG*/
@media only screen 
  and (min-device-width: 451px) 
  and (max-device-width: 780px)
  and (orientation: landscape) {
    body.loaded .card{display: none!important;}
    .landscape{display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; right: 0; left: 0;
      background: #000;    justify-content: center;align-items: center; gap: 15px;}
    .landscape span{color: #E0E2EB; text-align: center; font-size: 14px;}
}