@import './navbar.css';
@import './footer.css';
/*-------------------------------------------------------------
# Fonts 
--------------------------------------------------------------*/
@font-face{ 
    font-family: "Rubik Bold"; 
    src: url("../fonts/Rubik-Bold.ttf"); 
    font-display: swap;
}
@font-face{ 
    font-family: "Kanit Regular"; 
    src: url("../fonts/Kanit-Regular.ttf"); 
    font-display: swap;
}
@font-face{ 
    font-family: "Kanit Semibold"; 
    src: url("../fonts/Kanit-Bold.ttf"); 
    font-display: swap;
    font-weight: bold;
}
@font-face { 
    font-family: 'Asap Condensed Regular'; 
    src: url("../fonts/Asap_Condensed-Regular.ttf"); 
    font-display: swap;
}
h2{
    font-family: "Rubik Bold";
}
h3, h4, p{
    font-family: "Kanit Regular"
}
.header *,
.footer *{
    font-family: "Asap Condensed Regular";
}

/*-------------------------------------------------------------
# css Clases Global
--------------------------------------------------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 2;    
}
:root{
    /*-------------------------------------------------------------
    # Colores Generales
    --------------------------------------------------------------*/ 
    --color_barossa_950: #3E122D;
    --color_black_950: #000000;
    --color_black_rock_950: #11012d;
    --color_bridal_heath_50: #fffcf8;
    --color_cinder_950: #0d0c16;
    --color_concrete_100: #f2f2f2b3;
    --color_deep_bronze_950: #483210;
    --color_ebony_950: #04081C;
    --color_hibiscus_700: #CE0065;
    --color_iron_300: #ccc;
    --color_jazzberry_jam_900: #9b0051;
    --color_pale_slate_300: #cecbcb;
    --color_red_orange_900: #ff1621;
    --color_sazerac_50: #fff3de;
    --color_silver_400: #FFF5DF;
    --color_silver_chalice_400: #b4b4b4;
    --color_steel_gray_950: #26213a;
    --color_twine_4000: #D6A44C;
    --color_we_peep_200: #f6dee7;
    --color_white_50: #fff;
}
body{
    background-image: url();
    background-size: 100% 100%;
    background-attachment: fixed;
    background: var(--color_ebony_950);
    height: 100vh;
    height: 100%;
    width: 100%;
    z-index: 2;
}
body::after {
    content: "";
    position: fixed;
    top: 0;
    height: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    background: var(--color_ebony_950);
    background-size: 100% 100%;
}
.d-none{
    display: none!important;
}
.d-flex{
    display: flex;
}
.d-grid{
    display: grid!important;
}
.body-overflow-hidden{
    overflow: hidden;
}
.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.height-nav-mobile{
    height: auto;
    min-height: auto;
}
.c-pointer{
    cursor: pointer;
}
.pt-md-60{
    padding-top: 60px;
}
.pt-md-70{
    padding-top: 70px;
}
.pt-md-100{
    padding-top: 100px;
}
.txt-center{
    text-align: center;
}
/*--------------------------------------------------------------
# Scroll container
--------------------------------------------------------------*/
.scroll-menu{
    overflow-y: scroll;
}
.scroll-menu::-webkit-scrollbar{
    width: 14px;
}
.scroll-menu::-webkit-scrollbar-thumb{
    background: var(--color_iron_300);
    border-radius: 5px;
    height: 45px;
}
/*--------------------------------------------------------------
# Arrow Sliders
--------------------------------------------------------------*/
.arrow-preview,
.arrow-next{
    content: '';
    cursor: pointer;
    color: var(--text_color_sazerac_50);
    background: #16161673;
    width: 40px;
    height: 80%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 40%;
    padding: 1rem;
}
.arrow-preview,
.arrow-next{
    height: auto;
}   
.arrow-preview i,
.arrow-next i{
    font-size: 1em;
}
.swiper:hover .arrow-preview,
.swiper:hover .arrow-next{
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
}
.arrow-preview{
    left: 0;
    transform: translate(-100%, -50%);
    -webkit-transform: translate(-100%, -50%);
    -moz-transform: translate(-100%, -50%);
    -ms-transform: translate(-100%, -50%);
    -o-transform: translate(-100%, -50%);
    transition: transform 0.2s ease-out;
    -webkit-transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -ms-transition: transform 0.2s ease-out;
    -o-transition: transform 0.2s ease-out;
}
.arrow-next{
    right: 0;
    transform: translate(100%, -50%);
    -webkit-transform: translate(100%, -50%);
    -moz-transform: translate(100%, -50%);
    -ms-transform: translate(100%, -50%);
    -o-transform: translate(100%, -50%);
    transition: transform 0.2s ease-out;
    -webkit-transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -ms-transition: transform 0.2s ease-out;
    -o-transition: transform 0.2s ease-out;
}
.content-navigation-next,
.content-navigation-prev{
    width: 5%;
    justify-content: center;
}
.content-navigation-next img,
.content-navigation-prev img{
    width: auto;
    height: auto;
    max-height: 40px;
    max-width: 40px;
    object-fit: cover;
}
.content-navigation-next i, 
.content-navigation-prev i{
    color: var(--color_twine_4000);
    font-size: 2.5rem;
}
@media (max-width: 480px) {
    .pt-md-70{
        padding-top: 85px;
    }
}