@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
    --button-color: rgba(235, 117, 21, 0.774);
}

/* common */
body{
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

/* header */
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 120px;
}
.short-title{
    font-size: 28px;
    font-weight: 700;
}
nav ul{
    display: flex;
}
nav li{
    list-style: none;
    margin-left: 34px;
}
nav li a{
    text-decoration: none;
    color: #3A3A3A;
    font-size: 16px;
    font-weight: 600;
}

/* main */
main{
    margin: 0 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.main-left{
    width: 50%;
}
#page-title{
    font-size: 52px;
    font-weight: 700;
}
.main-left p{
    font-size: 16px;
    font-weight: 600;
}
.main-left a{
    font-size: 16px;
    font-weight: 600;
    background-color: var(--button-color);
    color: #fff;
    text-decoration: none;
    padding: 5px 20px;
    border-radius: 20px;
}
.fas{
    margin-left: 8px;
}
.main-right{
    width: 50%;
    background-image: url(images/Circle\ design.svg);
    background-repeat: no-repeat;
    background-position: right;
}
.main-right img{
    position: relative;
    left: 45%;
}
main:hover img{
    transform: rotate(360deg);
    transition: transform 2s;
}
/* logo */
.logo-section{
    margin: 100px 165px;
}
hr{
    border: 1px solid rgba(128, 128, 128, 0.301);
}
.logos{
    margin: 36px 162px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* collection */
.container{
    margin: 0 21.5%;
}
.collections{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 60px;
}
.collection{
    width: 300px;
    padding: 8px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}
.container > h3{
    font-size: 28px;
    font-weight: 600px;
    text-align: center;
}
.collection-photo img{
    width: 100%;
}
.collection-content h3{
    font-size: 28px;
    font-weight: 500;
    margin-top: 16px;
    margin-bottom: 6px;
}
.price{
    font-size: 24px;
    font-weight: 400;
}
.star{
    font-size: 14px;
    color: orange;
}
.star span{
    color: #5E6366;
    margin-left: 8px;
}
.collection-content p{
    margin-top: 3px;
    font-size: 14px;
    font-weight: 700;
    color: #787885;
}
.container > a{
    color: #E02C6D;
    text-decoration: none;
    display: block;
    text-align: right;
    margin-top: 50px;
}

/* Feature */
.feature{
    margin: 100px 15%;
    display: flex;
    justify-content: space-between;
}
.feature-photo{
    width: 35%;
}
.feature-photo img{
    width: 404px;
    height: 270px
}
.feature-content{
    width: 50%;
}
.feature-content h2{
    font-size: 38px;
    font-weight: bold;
    margin-bottom: 0;
}
.feature-content p{
    font-size: 16px;
    font-weight: bold;
    color: #6C6C6C;
}
/* .feature-content div{
    background-color: var(--button-color);
    display: flex;
    justify-content: center;
    align-items: center;
} */
.feature-content a{
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: var(--button-color);
    display: inline-block;
    padding: 10px 30px;
}

/* footer */
footer{
    text-align: center;
    color: #fff;
    background-color: #0A0826;
    padding: 50px 0;
}
footer h3{
    margin: 0;
}
footer p{
    font-size: 14px;
    font-weight: bold;
    margin: 3px 0;
    color: #D9DBE1;
}
.social-media{
    margin-top: 17px;
}
.social-media span{
    background-color: rgba(170, 170, 170, 0.151);
    display: inline-block;
    border-radius: 50%;
    margin: 0 7.5px;
}
.social-media a{
    color: #fff;
    text-decoration: none;
}
.fab{
    margin: 7.5px;
}

/*----------Tablet----------*/
@media only screen and (min-width: 689px) and (max-width: 992px){
    nav li{
        margin-left: 15px;
    }
    .main-right{
        background-size: cover;
    }
    .main-right img{
        width: 90%;
        left: 20%;
    }

hr{
    margin: 50px 0;
}

    /* logo */
    .logo-section{
        text-align: center;
        margin: 0;
    }
    .logos{
        display: flex;
        flex-wrap: wrap;
    }
    .logo{
        margin: 0  5px;
    }
    /* collection */
    .container{
        margin: 0 15%;
    }
    .collections{
        grid-template-columns: repeat(2, 1fr);
    }
    /* feature */
    .feature-photo{
        width: 40%;
    }
    .feature-photo img{
        width: 100%;
    }
}

/*---------Mobile----------*/
@media screen and (max-width: 688px){
    /* header */
    header nav{
        display: none;
    }
    header{
        justify-content: center;
        text-align: center;
    }
    /* main */
    main{
        flex-direction: column-reverse;
    }
    .main-right{
        width: 100%;
        background-size: cover;
    }
    .main-right img{
        left: 0;
        width: 100%;
    }
    .main-left{
        width: 100%;
        text-align: center;
    }
    #page-title{
        font-size: 40px;
        text-align: center;
    }
    .main-left a{
        display: inline-block;
        margin-top: 20px;
        padding: 12px 30px;
        border-radius: 30px;
    }
    hr{
        display: none;
    }
    /* logo */
    .logo-section{
        text-align: center;
        margin: 0;
    }
    .logos{
        display: flex;
        flex-wrap: wrap;
    }
    .logo{
        margin: 0  5px;
    }
    
    /* collection */
    .container{
        margin: 0 27%;
    }
    .collections{
        grid-template-columns: repeat(1, 1fr);
    }

    /* feature */
    .feature{
        flex-direction: column-reverse;
        margin-top: 0;
        text-align: center;
    }
    .feature-photo{
        width: 100%;
    }
    .feature-photo img {
        width: 100%;
    }
    .feature-content{
        width: 100%;
        text-align: center;
    }
    .feature-content a{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    /* footer */
    footer{
        margin: 0;
    }
}