/* General Styles */
main {
    text-transform: capitalize;
}
body{
    background: #f1d3d3;
    color: #920608;

}
.red-btn{
    background: #f1d3d3;
    border: #920608 2px solid;
    color: #920608;
}

#main-nav{
    position: fixed;
    box-shadow: 5px 5px 5px 5px rgba(250, 9, 9, 0.103);
    background: #fb04042a;
    align-items: center;
    display: flex;
    border-radius: 20px;
    width: 1000px;
    height: 10vh;

}
.edit{
    height: 80vh;
}
.img_section{
    height: 90vh;
}

.name-brand{
    font-family: 'Times New Roman', Times, serif;
    font-size: 50px;

}
/* Navigation */
#slider {
    background: #f1d3d3;
}

#slide {
    height: 80%;
}

#section-slide {
    background: #f1d3d3;
    height: 120vh;
}

/* Cards */
.card:hover {
    transform: scale(1.05);
}
.card {
    transition: all .5s;
    margin: 40px;
    background: none;
    text-align: center;
}

.myTab, #According {
    background: #f1d3d3;
}

/* Navigation Hover */
#main-nav a {
    color:#920608;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all .5s;
}
#main-nav a:hover {
    color:#f1d3d3;
    background-color:#920608;
    border-radius: 10px;
}

/* Animation */
#btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;

}

#btn:hover {
    animation: top 1s infinite;
}

@keyframes top {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
        scale: 1.1;
    }
}

.icon-shop {
    font-size: 30px;
    transition: all .5s;
    animation: shop 1s infinite;
}

@keyframes shop {
    0%, 100% {
        transform: translateY(0px);
        scale: 0.9;
    }
    50% {
        transform: translateY(-5px);
        scale: 1.1;
    }
}

/* Favorite Button */
.favorite-button {
    cursor: pointer;
    border: 0;
    color: red;

}

.favorite-button .favorite__icon {
    height: 60px;
    width: 60px;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: scale(.6);
    position: absolute;
    transition: all .5s;
}

.favorite-button.is-favorite .favorite--enable {
    opacity: 1;
    transform: scale(1);
}

.favorite-button:not(.is-favorite) .favorite--not {
    opacity: 1;
    transform: scale(1);
}

/* Cube Section */
.cube-section {
    background: #f1d3d3;
}

.cube-container {
    display: grid;
    grid-template-areas:
        "item1 item2 item3"
        "item4 item5 item6"
        "item7 item8 item9";
}

/* Section Contant */
#section-contant {
    background: #f1d3d3;
    width: 100%;
}

/* Cube Items */

.item1, .item3, .item5 {
    display: flex;
    transition: all .5s;
    align-items: center;
    justify-content: center;
}

.item1 img, .item3 img, .item5 img {
    width: 65%;
    border: 3px solid rgb(255, 255, 255);
    transition: .5s all;
}

.item2, .item4, .item6 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Cube Container Hover */
.cube-container button, .cube-container a {
    transition: .5s all;
}

.cube-container button:hover, .cube-container a:hover .red-btn:hover {
    color: #f1d3d3;
    background: #920608;
    border: none;
    scale: .9;
}

.cube-container img:hover {
    scale: 1.1;
    border: 3px solid #060606;
}

/* Animation Image */
.animation-img {
    transition: all .5s;
}
.animation-img:hover {
    animation: anima-img 2s infinite alternate; 
    transition: all .5s;
}

@keyframes anima-img {
    0%, 100% {
        transition: all .5s;
        transform: translateY(0px);
        transform: translateX(0px);
        scale: 1;
    }
    50% {
        transition: all .5s;
        transform: translateY(-5px);
        transform: translateX(-5px);
        scale: 1.1;
    }
}

/* Text Section */
.text-section {
    background: #f1d3d3;
}

.card-text {
    background:#f1d3d3;
    transition: all .5s;
    box-shadow: 5px 10px rgba(0, 0, 0, 0.212);
}

.card-text:hover {
    scale: .9;
}

.card-icon {
    font-size: 35px;
    padding: 10px 0px;
}

.cards-item {
    padding: 15px 10px;
}

.card-item {
    float: left;
    width: calc((100% / 3) - 20px);
    flex-wrap: wrap;
    background-color:#920608;
    border-radius: 15px;

    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 2px black solid;
}

.img-2-all-pro {
    width: 70%;
}

/* Section 1 */
#section-1 a {
    transition: .5s all;
}

#section-1 a:hover {
    color: #920608;
    background:#f1d3d3;
    border: none;
    scale: .9;
}

/* Section Contant Button */
#section-contant button {
    transition: .5s all;
}

#section-contant button:hover {
    color: rgb(0, 0, 0);
    background: #fff;
    scale: .9;
}
.btn-dark{
    background-color: #920608;
    color: #f1d3d3;
}
.btn-light{
    background-color: #f1d3d3;
    color: #920608;
}