/* -------------
    fonts 
--------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter&family=Manrope:wght@700&family=Poppins:wght@500;600;700&family=Roboto:wght@700&display=swap');
/* ------------------
    uitility styles 
--------------------*/
*{
    margin: 0;
    padding: 0;
}
ul, li{
    list-style: none;
}
a{
    text-decoration: none;
}
main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
body{
    font-family: 'Poppins', sans-serif;
}
.sec-header{
    text-align: center;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 70px;
    color: #3A3A3A;
    margin-top: 30px;
    margin-bottom: 30px;
}
.collections, .categories{
    display: grid;
}
.collection-title, .category-title{
    color: #18191F;
    font-weight: 500;
    font-size: 28px;
    line-height: 40px;
    margin-top: 10px ;
}
/* ------------------------------
    navigation bar 
 --------------------------------*/
 header{
     display: flex;
     justify-content: space-around;
     align-items: center;
     margin: 87px 120px 50px 120px;
 }
 /* .regular-device-hide{
     display: none;
 } */
 .site-logo{
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 36px;
    color: #3A3A3A; 
 }
 nav a{
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #3A3A3A;
 }
.nav-margin{
    margin-left: 34px;
}
/* ----------------------
    Top Section Styles 
------------------------*/
.top-sec{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 69px;
}
.top-sec-disc{
    width: 582px;
}
.top-sec-disc h2{
    font-size: 52px;
    line-height: 70px;
    color: #3A3A3A;
}
.top-sec-disc p{
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #3A3A3A;
    margin-top: 33px;
    margin-bottom: 35px;
}
.pre-book{
    width: 196px;
    height: 44px;
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
    padding: 10px 24px;
    background-color: #E02C6D;
    border: 0;
    border-radius: 41px;
}
.top-sec-disc a span{
    margin-left: 8px;
}
.main-camera{
    background-image: url(../images/Circle\ design.svg);
    width: 475px;
    height: 475px;
    background-position: center;
    background-repeat: no-repeat;

}
.main-camera img{
    width: 440px;
    height: 414px;
    margin: 30 33 31 2;
}
.top-sec:hover .main-camera{
    transform: rotate(15deg);
    transition: transform .1s ease-in-out;
}
/* --------------------
    Brand Logo Style 
----------------------*/
.brand{
    margin-bottom: 100px;
}
.brand hr{
    width: 1110px;
    border-top: 0;
}
.brand-logo{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    align-items: center;
    column-gap: 25px;
    margin: 35px 0 35px 0;
}
/* ------------------------------
    popular collections style 
---------------------------------*/
.collections{
    grid-template-columns: repeat(3, 1fr) ;
    column-gap: 30px;
    row-gap: 30px;
}
.collection{
    border-radius: 5px;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
}
.collection-banner img{
    width: 300px;
    height: 256px;
    margin: 14px;
}
.collection-details{
    margin-left: 15px;
    padding-bottom: 17px;
    width: 300px;
}
.collection-price{
    font-family: Inter;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.87);
    margin-top: 6px;
}
.star{
    padding: 8px 0 8px 0;
}
.fa-star{
    font-size: 16px;
}
.fas.filled{
    color: #FB8200 !important;
}
.star span{
    font-size: 22px;
    margin-left: 8px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    line-height: 22px;
    letter-spacing: 0.1px;
    color: #5E6366;
}
.collection-info, .category-info{
    width: 196px;
    font-family: Inter;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.018em;
    color: #787885;
}
.explore-more{
    float: right;
    color: rgba(224, 44, 109, 0.87);
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin-top: 50px;
}
.explore-more span{
    font-size: 14px;
    margin-left: 8px;
}

/* -----------------
    categories style 
--------------------*/
.categories{
    grid-template-columns: repeat(4, 1fr);
    column-gap: 30px;
    row-gap: 30px;
    text-align: center;
    margin-bottom: 50px;
}
.category{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
}
.category-banner {
    border-radius: 5px;
    margin: 14px 14px 0 14px;
    overflow: hidden;
}
.category-banner img{
    width: 300px;
    height: 185px;
    border-radius: 5px;
}
.category:hover img{
     transform: scale(1.1);
     transition: transform .9s ease-in-out;
}
.category-details{
    margin-left: 15px;
    margin-bottom: 17px;
    display: inline-block;
}
/* ---------------------
    footer style
---------------------- */
footer{
    background-color: #0A0826;
    width: 100%;
    height: 239px;
    text-align: center;
}
.footer-info{
    color: #FFFFFF;
    width: 262px;
    height: 139px;
    display: inline-block;
}
.footer-title{
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    margin-bottom: 3px;
    margin-top: 50px;
}
.copy-write{
    font-family: Manrope;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    color: #D9DBE1;
}
.social-icon{
    margin-top: 17px;
}
.social-icon a .fab{
    color: #ffffff;
    font-size: 17px;
    width: 32px;
    height: 32px;
    background-color: #282644;
    border-radius: 50%;
}

/* --------------
    Media Query
---------------- */

/* mobile device */
@media only screen and (max-width: 688px) {
    header{
        justify-content: space-evenly;
        margin: 35px 0 35px 0 ;
    }
    /* .regular-device-hide{
        display: block;
    } */
    .small-device-hide{
        display: none;
    }
    .top-sec{
        flex-direction: column-reverse;
        text-align: center; 
    }
    .top-sec-disc{
        width: 360px;
        margin-top: 14px;
    }
    .top-sec-disc h2{
        font-size: 28px;
        line-height: 42px;
    }
    .top-sec-disc p{
        width: 286px;
        display: inline-block;
        font-weight: 500;
        font-size: 14px;
        line-height: 21px;
    }
    .pre-book{
        font-weight: 500;
    }
    .main-camera{
        width: 257px;
        height: 257px;
        background-size: cover;
    }
    .main-camera img{
        width: 202px;
        height: 190px;
    margin: 51px 33px 16px 22px;
    }
    .top-sec:hover .main-camera{
        transform: rotate(360deg);
        transition: transform 2s ease-in-out;
    }
    /* .brand{
        display: none;;
    } */
    .collections, .categories {
        grid-template-columns: repeat(1, 1fr);
    }
}
/* Tablet device */
@media only screen and (min-width: 689px) and (max-width: 991px){
    header{
        margin: 35px 0 35px 0 ;
    }
    .top-sec{
        flex-direction: column-reverse;
        text-align: center; 
    }
    .top-sec-disc{
        margin-top: 14px;
    }
    .collections, .categories {
        grid-template-columns: repeat(2, 1fr);
    }
    .hide-tab{
        display: none;
    }
}
/* Desktop device */
@media only screen and (min-width: 992px) and (max-width: 1376px) {
    header{
        justify-content: space-between;
    }
    .categories {
        grid-template-columns: repeat(2, 1fr);
    }
}