:root{
    /*================Main theme colors==============*/
    --first-color: #0e2431;
    --second-color: #6a59d1;
    --third-color: #777;

    /*===============Hover colors====================*/
    --hover-color: #614fd0;

    /*===============Background colors===============*/
    --body-bg-color: #fefefe;
    --card-bg-color: #fff;
    --modal-bg-color: #fff;
    --bg-transparent-color: rgba(0,0,0,0.1);
    --transparent-color-01: rgba(0,0,0,0.1);
    --transparent-color-02: rgba(106,89,209,0.1);
    --slidng : #f9f7f7;
    --line-color: #d7d7d7;

    /*=============color Filter ====================*/
    --color-filter: inverter(1);

    /*=============Box Shadow ======================*/
    --box-shadow: 0px 0px 20px rgba(0 0 0 /10%);

    /*=============Font size=======================*/
    --small-font-size: 0.9em;
    --normal-font-size: 1em;

    /*=============Scroll bar colors===============*/
    --scroll-bar-color: #c5cadf;
    --scroll-thumb-color: #70768a;
    --scroll-thumb-hover-color: #454f6b;

}
*{
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
body{
    margin: 2rem 0 0 0;
    transition: .5s ease;
}
#background-music {
    display: none; /* Hide the audio player controls */
}

button {
    position: fixed;
    top: 20px;
    font-size: 10px;
    left: 10px;
    border-radius: 20%;
}
header{
    z-index: 99999;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(20px);
    transition: .6s ease;
}

header.sticky{
    background: rgba(255,255,255,0.1);
    box-shadow: var(--box-shadow);
}

.nav-bar{
    position: relative;
    height: calc(4rem + 1rem);
    max-width: 1250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    transition: .6s ease;
}

header.sticky .nav-bar{
    height: calc(2.5rem + 1rem);
}

.nav-bar .logo{
    color: var(--first-color);
    font-size: 1.3em;
    font-weight: 600;
}

.nav-items a{
    color: var(--first-color);
    font-size: var(--normal-font-size);
    font-weight: 500;
}

.nav-items a.active{
    color: var(--second-color);
}

.nav-items a:not(:last-child){
    margin-right: 15px;
}

.nav-items a:hover{
    color: var(--second-color);
}

.nav-menu-btn{
    display: none;
}
.header-top
{
    background: #f5f6fc;
}
.banner-img
{
    padding-top: 100px;
    margin: 5px 115px;
    width: 60%;
}
.banner-img img
{
    width: 100%;
    margin-bottom: -80px;
}
.banner
{
    position: relative;
}
.banner-title
{
    position: absolute;
    left: 50%;
    top: 20%;
}
.banner-title h1
{
    font-size: 55px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    line-height: 70px;
    padding: 0px 10px 0 10px;
}
.video-section {
    max-width: 500px;
    height: 400px;
    left: 5rem;
    top: 1rem;
    position: relative;
    margin: auto;
    text-align: center;
    padding: 2px;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 5px;
}
iframe {
    width: 100%;
    height: 350px;
}

/*----------Fashion-Trends------------*/
.fashion-trends
{
    padding: 100px 0;
}
.fashion-box
{
    margin: 80px 0;
}
.title-style h1
{
    padding: 40px 0;
}
.title-style
{
    margin: 0 auto 80px;
    height: 120px;
    width: 80%;
    max-width: 700px;
    background: #fff;
    position: relative;
    box-shadow: 0 4px 5px 0 rgba(0,0,50,0.5);
}
.title-style::after
{
    content: '';
    height: 100px;
    width: 200px;
    background-color: #f992a6;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: -1;
}
.title-style::before
{
    content: '';
    height: 100px;
    width: 200px;
    background-color: #f992a6;
    position: absolute;
    bottom: -10px;
    right: -10px;
    z-index: -1;
}
.trending-img
{
    position: relative;
    margin-bottom: 15px;
}
.trending-img img
{
    width: 100%;
    height: 500px;
    
}

.trending-img:hover .btn-buy-1
{
    transform: translate(-50%,50%);
    bottom: 50%;
    opacity: 1;
}
.overlay
{
    height: 0;
    width: 100%;
    background: #333;
    position: absolute;
    top: 0;
    opacity: 0;
    transition: 0.5;
}
.trending-img:hover .overlay
{
    opacity: 0.5;
    height: 100%;
}

/*-----------offer---------*/
.offer
{
    background-image: url(fashion.jpg);
    background-size: cover;
    background-position: center;
}
.row
{
    margin: initial !important;
}
.subscribe
{
    max-width: 500px;
    margin-top: 80px;
    padding: 60px;
    background: #ffffff8c;
    margin-bottom: 20px;
}
.subscribe a
{
    width: 100px;
    display: block;
    color: #fff !important;
    background: #000;
    text-decoration: none;
    padding: 5px;
    text-align: center;
}
.offer img
{
    width: 100%;
    height: 100%;
    margin: -100px;
    z-index: 1;
    border-radius: 20px;
    border: #000 5px solid;
    margin-top: 150px;
}

/*----------FASHION-BLOG-------*/
.fashion-blog
{
    margin: 250px 0 150px 0;
}
.blog-img
{
    margin-top: 50px;
    height: 200px;
    width: 200px;
    position: relative;
}

.blog-img img
{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: #333 2px solid;
}
.btn-buy-1
{
    width: 200px;
    height: 50px;
    padding: 10px 0;
    outline: none !important;
    border: 0;
    border-radius: 20%;
    position: absolute;
    background: #fff;
    left: 50%;
    top: 200px;
    transform: translate(-50% ,0);
    transition: .6s;
    opacity: 0;
    z-index: 1;
}
.btn-buy
{
    width: 150px;
    height: 50px;
    text-align: center;
    padding: 20px 0;
    font-size: 10px;
    outline: none !important;
    border: 0;
    border-radius: 100px;
    position: absolute;
    background: #fff;
    left: 50%;
    bottom: 0;
    transform: translate(-50% ,0);
    transition: .6s;
    opacity: 0;
    z-index: 1;
}
.blog-img:hover .btn-buy
{
    transform: translate(-50%,50%);
    bottom: 50%;
    opacity: 1;
}
.overlay
{
    height: 0;
    width: 100%;
    background: #333;
    position: absolute;
    border-radius: 20px;
    top: 0;
    opacity: 0;
    transition: 0.5;
}
.blog-img:hover .overlay
{
    opacity: 0.5;
    height: 100%;
}
.fashion-blog h5
{
    margin-top: 20px;
    font-weight: bold;
}

/*-----------FASHION-BRANDS----*/
.fasion-brands
{
    margin-bottom: 150px;
}
.brand-logo
{
    width: 200px;
    height: 200px;
    background: #fff;
    border-radius: 50%;
    margin: 50px auto 30px;
    box-shadow: 0 2px 40px 0 rgba(110,130,208,.18);
}
.brand-logo img
{
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.fashion-brands p
{
    margin-top: 30px;
    font-weight: bold;
}

/*---------FOOTER--------*/
.footer
{
    margin-top: 150px;
    background: #f5f6fc;
}

.footer-title-box {
    width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(89, 14, 14, 0.638);
    position: relative;
    text-align: center;
    border-radius: 20px;
    left: 450px;
    top: 20px;
    padding: 2px;
    margin: 20px;
  }
.footer-title-box h2
{
    font-size: 60px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 20px;
}
.payment,.insta-img,.app-download
{
    margin: 50px auto;
}
.payment img, .insta-img img, .app-download img
{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: #000 2px solid;
    cursor: pointer;
}
.footer p
{
    margin-bottom: 50px;
}
.footer h5::before
{
    content: '';
    width: 70px;
    height: 3px;
    background: #4f74e8;
    top: 75px;
    position: absolute;
}
.footer-icons
{
    text-align: right;
}
.footer-icons .fa
{
    margin: 0 10px auto;
    font-size: 20px;
    cursor: pointer;
}


/*----------------for small device-----------*/
@media only screen and (max-width:900px)
{
    body{
        width: 100%;
        align-items: center;
    }

    button{
        font-size: 10px;
        left: 150px;
    }

    .navigation{
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--transparent-color-01);
        visibility: hidden;
        opacity: 0;
        transition: .3s ease;
    }

    .navigation.active{
        visibility: visible;
        opacity: 1;
    }

    .nav-items{
        position: relative;
        background: var(--modal-bg-color);
        max-width: 600px;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 20px;
        padding: 40px;
        border-radius: 10px;
        box-shadow: var(--box-shadow);
        transform: translateY(-50px);
        transition: .3s ease;
    }

    .navigation.active .nav-items{
        transform: translateY(0);
    }

    .nav-items a{
        margin: 15px 50px;
    }

    .nav-close-btn{
        position: absolute;
        background: url(close.png)no-repeat;
        filter: var(--color-filter);
        background-size: 12px;
        background-position: center;
        width: 40px;
        height: 40px;
        top: 0;
        right: 0;
        margin: 10px;
        cursor: pointer;
    }

    .nav-menu-btn{
        background: url(menu.png)no-repeat;
        filter: var(--color-filter);
        background-size: 30px;
        background-position: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        display: block;
    }
    .banner-img
    {
        margin: 40px auto;
        width: 80%;
    }
    .banner{
        padding-bottom: 100px;
    }
    .banner-title
    {
        top: 150px;
        left: 50%;
        transform: translateX(-50%);
    }
    .banner-title h1
    {
        font-size: 16px;
        padding: 5px;
        line-height: 20px;
    }
    .title-style h1
    {
        font-size: 25px;
    }
    .video-section
    {
        margin-top: 180px;
        left: 0;
        width: 20rem;
        max-height: 150px;
    }
    .video-section h2
    {
        font-size: 10px;
    }
    .video-section iframe
    {
        width: 100%;
        height: 90%;
    }
    .blog-img{
        width: 100%;
    }
    .offer img
    {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }
    .row
    {
        text-align: center;
    }
    .footer-title-box
    {
        width: 80%;
        left: 10px;
        top: 20px;
    }
    .footer-title-box h2
    {
        font-size: 30px;
    }
    .footer-icons
    {
        text-align: center;
    }
    .copyright
    {
        text-align: center;
    }
}