body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}
.body-dark{
    background-color: #1E1E1E;
    color: white;
}
/* ---------------- navigation bar style ---------------- */
header{
    display: flex;
    padding: 0 5%;
    justify-content: space-between;
    background-color: white;
    box-shadow: 0px 10px 25px #00000043;
    height: 70px;
}
header img{     padding-top: 12px;}
.main-nav{
    padding: 10px;
    display: flex;
    column-gap: 40px;
    padding-top: 18px;
}
.main-nav a{
    font-size: 20px;
    color: #3d414a;
    text-decoration: none;
    transition-duration: 0.3s;
    padding-top: 5px;
}
.main-nav a:hover{
    color: #FB6376;
}
#selected{color: #5762D5;}
header svg:hover{ cursor: pointer;}
#moon-icon{ transform: translateY(-5px); display: none;}
#sun-icon{ transform: translateY(-5px);}

/* ---------------- intro section ---------------- */
input{  margin:0 0 10px 0;}

#intro{
    display: flex;
    width: 1100px;
    margin: 100px auto;
    justify-content: space-between;
}
#intro h1{ font-size: 30px;}
#intro p{   font-size: 18px; margin-bottom: 40px; color: #3C404A;}
#intro a{
    background-color: #5762D5;
    color: white;
    padding: 10px 25px;
    font-size: 22px;
    font-weight: bold;
    border-radius: 15px;
    transition-duration: 0.3s;
    display: block;
    width: fit-content;
    animation: slide-up 1s;
}
@keyframes slide-up{
    0%{transform: translateY(40px); opacity: 0%;}
    100%{transform: translateY(0px); opacity: 100%;}
}
#intro a:hover{ cursor: pointer; background-color: #454fc1;}
video{
    width: 40%;
    border-radius: 20px;
}
/* ---------------- Main content ---------------- */
.product-nav{
    display: flex;
    justify-content:space-between;
    width: 1100px;
    margin: 15px auto;
}
.product-nav h3{    margin: 0;}

.product-nav a, main a{
    color: #5762D5;
    text-decoration: none;
    transition-duration: 0.3s;
}
.product-nav a:hover, main a:hover{
    color: #FB6376;
}
#products-intro{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1100px;
    margin: auto;
    gap: 30px 30px;
}
.product-card{
    background-color: #e9e6f0;
    color: #1E1E1E;
    border-radius: 20px;
    width: 250px;
}
.review-con{
    opacity: 0%;
    position: absolute;
    margin: 190px 0 0 20px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    z-index: 1;
    transition-duration: 0.3s;
}
.product-img{
    border-radius: 20px 20px 0 0;
    transition-duration: 0.3s;
}
.hover-img{
    filter: brightness(0.4);
}
.hover-review{
    opacity: 100%;
}

footer{
    background-color: #2B2343;
    height: 300px;
    width: 100%;
    color: white;
    text-align: center;
}


/* ---------------- All suits ---------------- */
#product-con{
    width: 1260px;
    height: 1260px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.suit{
    background-color: #FB6376;
    height: 100%;
    transition-duration: 0.3s;
}
.suit:hover{
    box-shadow: 10px 10px 35px #00000043;
    cursor: pointer;
}
.vertical{
    grid-row: 1/3;
    grid-column: 3/4;
}

@media (max-width:1150px){
    #intro h1{ font-size: 20px; color: #454fc1;}
}