/* css reset start */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: none;
    text-decoration: none;
    box-sizing: border-box;
    user-select: none;
    font-family: 'Roboto', sans-serif;
}

/* css reset end */

/* html & body start  */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* html & body end  */

/* header start  */

header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    background-color: #fff;
}

header .google-box {
    text-align: end;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 4vw;
}

header .email-phone-brand-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0vh 4vw 2vh;
    border-bottom: 1px solid #e5e5e5;
}

header .email-phone-brand-user .email-box {
    width: 30%;
}

header .email-phone-brand-user .email-box a {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    color: black;
    font-size: 18px;
}

header .email-phone-brand-user .phone-brand-box {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    width: 40%;
}

header .email-phone-brand-user .phone-brand-box .phone-box a{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    color: black;
    font-size: 18px;
}

header .email-phone-brand-user .phone-brand-box .brand-box ul {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
}

header .email-phone-brand-user .phone-brand-box .brand-box ul li a {
    font-size: 16px;
    padding: 8px 10px;
    border-radius: 50%;
    color: white;
}

header .email-phone-brand-user .phone-brand-box .brand-box ul li:nth-child(1) a {
    background-color: #0165E1;
}

header .email-phone-brand-user .phone-brand-box .brand-box ul li:nth-child(2) a {
    background-color: red;
}

header .email-phone-brand-user .phone-brand-box .brand-box ul li:nth-child(3) a {
    background-color: #00acee;
}

header .email-phone-brand-user .phone-brand-box .brand-box ul li:nth-child(4) a {
    background-color: red;
}

header .email-phone-brand-user .user-box {
    display: flex;
    width: 30%;
    justify-content: space-between;
    align-items: center;
}

header .email-phone-brand-user .user-box p {
    font-size: 20px;
    margin-left: 20px;
    color: black;
}

header .email-phone-brand-user .user-box p span {
    color: #e7ab3c;
}

header .email-phone-brand-user .user-box a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: black;
    font-size: 20px;
}

header .email-phone-brand-user .user-box a i {
    font-size: 25px;
}

header .website-search-wishlist-shop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 4vw 2vh;
    border-bottom: 1px solid #e5e5e5;
}

header .website-search-wishlist-shop .website-box {
    width: 30%;
}

header .website-search-wishlist-shop .website-box h1 a {
    color: #e7ab3c;
    font-size: 30px;
}

header .website-search-wishlist-shop .search-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
}

header .website-search-wishlist-shop .search-box form {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
}

header .website-search-wishlist-shop .search-box form input {
    width: 60%;
    padding: 10px 8px;
    outline: none;
    border: 2px solid #e5e5e5;
    color: black;
    border-right: none;
    font-size: 15px;
}

header .website-search-wishlist-shop .search-box form input:focus {
    border: 2px solid #e7ab3c;
}

header .website-search-wishlist-shop .search-box form button {
    padding: 11px;
    border: 2px solid #e7ab3c;
    background-color: #e7ab3c;
    color: white;
    cursor: pointer;
}

header .website-search-wishlist-shop .wishlist-shop-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    width: 30%;
}

header .website-search-wishlist-shop .wishlist-shop-box a {
    color: black;
    font-size: 25px;
}

header .navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4vw;
    background-color: #333;
    position: relative;
}

header .navbar .desktop-navbar nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

header .navbar .desktop-navbar nav ul li a {
    text-transform: uppercase;
    font-size: 20px;
    color: white;
    cursor: pointer;
    padding: 6px 10px;
}

header .navbar .desktop-navbar nav ul li a:hover,
header .navbar .desktop-navbar nav ul li a.active {
    background-color: #e7ab3c;
}

header .navbar .desktop-navbar nav ul li .sub-desktop-navbar {
    position: absolute;
    flex-direction: column;
    gap: 15px;
    background-color: #333;
    top: 35px;
    padding: 8px 0;
    align-items: flex-start;
    display: none;
    z-index: 2000;
}

header .navbar .desktop-navbar nav ul li:hover .sub-desktop-navbar {
    display: flex;

}

header .navbar .phone-navbar {
    display: none;
}

header .navbar .phone-navbar .fa-bars {
    font-size: 25px;
    padding: 4px 7px;
    color: white;
    background-color: #e7ab3c;
    cursor: pointer;
}

header .navbar .phone-navbar .fa-xmark {
    font-size: 25px;
    padding: 4px 7px;
    color: white;
    background-color: #e7ab3c;
    cursor: pointer;
}

/* header end  */

/* progress bar section start  */

.progress {
    height: 5px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 2001;
}

.highlight {
    transition: width 0.5s linear;
    width: 0%;
    background-color: #e7ab3c;
    height: 100%;
}

/* progress bar section end  */

/* slideshow section start  */

.slideshow {
    width: 100%;
    height: 50%;
}

.slideshow .swiper-slide {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slideshow .swiper-slide img {
    display: block;
    width: 80%;
    height: 100%;
    object-fit: cover;
}

.slideshow .autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #e7ab3c;
}

.slideshow .swiper-button-next,
.slideshow .swiper-button-prev {
    position: absolute;
    color: #e7ab3c;
}

/* slideshow section end  */

/* collection section start  */

#brand-collection {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 4vw;
    margin-top: 4vh;
}

#brand-collection a {
    color: white;
    background-color: #e7ab3c;
    font-size: 30px;
    padding: 10px 15px;
    border-radius: 10px;
}

#brand-collection .men {
    background-image: url("../images/Men-Category.jpg");
    background-size: cover;
    width: 50%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
}

#brand-collection .men:hover,
#brand-collection .women:hover {
    opacity: 1;
    box-shadow: 0px 0px 3vh 1vh #e7ab3c;
}

#brand-collection a:hover {
    box-shadow: 0px 0px 3vh 1vh #e7ab3c;
}

#brand-collection .women {
    background-image: url("../images/Women-Category.jpg");
    background-size: cover;
    width: 50%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
}

/* collection section end  */

/* whole brand list section start  */

#view-all-brands {
    padding: 0 4vw;
    margin-top: 4vh;
}

#view-all-brands h1 {
    color: black;
    width: 100%;
    text-align: center;
    font-size: 25px;
    margin-bottom: 2vh;
}

#all-brands {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

#all-brands .brand-list {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 30%;
    background-color: #ebdef0;
    padding: 20px 10px;
    border-radius: 10px;
    border: 1px solid #e7ab3c;
}

#all-brands .brand-list:nth-child(1),
#all-brands .brand-list:nth-child(2),
#all-brands .brand-list:nth-child(3) {
    display: flex;
}

#all-brands .brand-list img {
    width: 40%;
}

#all-brands .brand-list h3 {
    font-size: 20px;
}

.load-button {
    text-align: center;
    margin-top: 10px;
}

.load-button button {
    padding: 10px 15px;
    color: white;
    background-color: #e7ab3c;
    border: 1px solid #e7ab3c;
    font-size: 18px;
    cursor: pointer;
    border-radius: 10px;
}

.load-button button:hover {
    font-weight: bolder;
    box-shadow: 0px 0px 3vh 1vh #e7ab3c;
}

/* whole brand list section end  */

/* men-category section start  */

.category {
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 0 4vw;
    margin-top: 4vh;
}

.category .img {
    width: 30%;
    background-image: url("../images/Men-Large.jpg");
    height: 70vh;
    background-size: cover;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
}

.category .img a {
    color: white;
    background-color: #e7ab3c;
    font-size: 30px;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
}

.category .img:hover {
    opacity: 1;
    box-shadow: 0px 0px 3vh 1vh #e7ab3c;
}

.category .img a:hover {
    box-shadow: 0px 0px 3vh 1vh #e7ab3c;
}

.category .perfume {
    width: 70%;
    position: relative;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category .perfume .all-brand .swiper-slide {
    text-align: center;
    background-color: #ebdef0;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    padding: 20px 0 0 0;
    position: relative;
}

.category .perfume .all-brand .swiper-slide img {
    width: 60%;
    margin-bottom: 10px;
    /* background-image: url("../images/loader-gif.gif");
    background-position: center;
    background-repeat: no-repeat; */
}

.category .perfume .all-brand .swiper-slide h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.category .perfume .all-brand .swiper-slide p {
    font-size: 20px;
    margin-bottom: 10px;
}

.category .perfume .all-brand .swiper-slide a {
    padding: 10px 0;
    background-color: #e7ab3c;
    color: white;
    width: 100%;
    font-size: 18px;
    text-transform: uppercase;
}

.category .perfume .all-brand .swiper-slide i {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 40px;
    cursor: pointer;
    color: white;
}

.category .perfume .all-brand .swiper-button-next,
.category .perfume .all-brand .swiper-button-prev {
    position: absolute;
    color: #e7ab3c;
}

/* men-category section end  */

/* women-category section start  */

.category .imgw {
    width: 30%;
    background-image: url("../images/women-Large.jpg");
    height: 70vh;
    background-size: cover;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.category .imgw a {
    color: white;
    background-color: #e7ab3c;
    font-size: 30px;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
}

.category .imgw:hover {
    opacity: 1;
    box-shadow: 0px 0px 3vh 1vh #e7ab3c;
}

.category .imgw a:hover {
    box-shadow: 0px 0px 3vh 1vh #e7ab3c;
}

/* women-category section end */

/* deal of the week section start */

#weekly-deals {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 15px 4vw;
    margin-top: 4vh;
    background-color: #e7ab3c;
}

#weekly-deals .time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 50%;
}

#weekly-deals .time h1 {
    font-size: 30px;
    text-align: center;
}

#weekly-deals .time h3 {
    font-size: 25px;
}

#weekly-deals .time p {
    font-size: 20px;
}

#weekly-deals .time a {
    font-size: 20px;
    color: #e7ab3c;
    background-color: white;
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: bolder;
}

#weekly-deals .time a:hover {
    box-shadow: 0px 0px 3vh 1vh white;
}

#weekly-deals .time .timer-countdown {
    display: flex;
    flex-direction: row;
    gap: 10px;
    text-align: center;
}

#weekly-deals .time .timer-countdown div {
    padding: 10px;
    background-color: white;
    border-radius: 10px;
}

#weekly-deals .time .timer-countdown p {
    color: black;
    font-weight: bolder;
    font-size: 25px;
}

#weekly-deals .product-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    /* background-image: url("../images/loader-gif.gif");
    background-position: center;
    background-repeat: no-repeat; */
}

#weekly-deals .product-img img {
    width: 50%;
}

/* deal of the week section end  */

/* special feature section start */

#feature-list{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 0 4vw;
    margin-top: 4vh;
}

#feature-list .features{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 20px 20px;
    border: 1px solid #e7ab3c;
    width: 30%;
}

#feature-list .features .feature-icon i{
    font-size: 50px;
    color: #e7ab3c;
}

#feature-list .features .feature-advantage h1{
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
}

#feature-list .features .feature-advantage p{
    font-size: 25px;
    text-align: center;
}

/* special feature section end  */

/* Back To Top button start  */

#myBtn {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #e7ab3c;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
}

#myBtn:hover {
    color: black;
    font-weight: bolder;
    box-shadow: 0px 0px 3vh 1vh #e7ab3c;
}

/* Back To Top button end  */

/* pwa update message section start */

#snackbar {
    display: none;
    justify-content: center;
    position: fixed;
    width: 100%;
    z-index: 1001;
    bottom: 30px;
}

#snackbar.show {
    display: block;
}

#snackbar p {
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
}

#reload {
    font-size: 20px;
    cursor: pointer;
}

/* pwa update message section end */

/* footer start  */

footer {
    display: flex;
    flex-direction: column;
    padding: 2vh 4vw;
    background-color: #252525;
    gap: 20px;
    margin-top: 4vh;
}

footer .support-links {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

footer #support-social-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

footer #support-social-links li {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

footer #support-social-links li a {
    font-size: 16px;
    padding: 8px 10px;
    border-radius: 50%;
    color: white;
}

footer #support-social-links li:nth-child(1) a {
    background-color: #0165E1;
}

footer #support-social-links li:nth-child(2) a {
    background-color: red;
}

footer #support-social-links li:nth-child(3) a {
    background-color: #00acee;
}

footer #support-social-links li:nth-child(4) a {
    background-color: red;
}

footer #support-social-links li:nth-child(5) a {
    background-color: green;
}

footer .support-links .links-info {
    width: 25%;
}

footer .support-links .links-info h1 {
    margin-bottom: 20px;
}

footer .support-links .links-info p {
    color: #e5e5e5;
    font-size: 16px;
    margin-bottom: 20px;
}

footer .support-links .links-info h1 a {
    font-size: 25px;
    color: white;
}

footer .support-links .links-info ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

footer .support-links .links-info ul li a {
    color: #e5e5e5;
    font-size: 18px;
}

footer .support-links .links-info form {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
}

footer .support-links .links-info form input {
    width: 80%;
    padding: 10px 8px;
    outline: none;
    border: 2px solid #e5e5e5;
    color: black;
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 18px;
}

footer .support-links .links-info form input:focus {
    border: 2px solid #e7ab3c;
}

footer .support-links .links-info form input::placeholder {
    font-size: 15px;
}

footer .support-links .links-info form button {
    padding: 13px;
    border: 1px solid #e7ab3c;
    background-color: #e7ab3c;
    color: white;
    cursor: pointer;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

footer .rights {
    text-align: center;
    margin-top: 4vh;
}

footer .rights p {
    color: #e5e5e5;
}

footer .rights p a {
    color: #e7ab3c;
}

/* footer end  */

/* custom scrollbar section start */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: white;
}

::-webkit-scrollbar-thumb {
    background-clip: content-box;
    background-color: #e7ab3c;
    border-radius: 4px;
    border: 1px solid #e7ab3c;
}

/* custom scrollbar section end */

/* responsive css start  */

@media screen and (max-width:1500px) {

    header .email-phone-brand-user .email-box {
        display: none;
    }

    header .email-phone-brand-user .phone-brand-box {
        display: none;
    }

    header .email-phone-brand-user .user-box {
        width: 100%;
    }

    header .email-phone-brand-user .user-box p {
        margin-left: 0;
    }

}

@media screen and (max-width:1300px) {

    #feature-list {
        flex-direction: column;
    }

    #feature-list .features {
        flex-direction: column;
        width: 100%;
    }

}

@media screen and (max-width:1023px) {

    .category {
        flex-direction: column;
    }

    .category .img,
    .category .imgw {
        width: 100%;
    }

    .category .perfume {
        width: 100%;
    }
}

@media screen and (max-width:1050px) {

    footer .support-links {
        flex-direction: column;
    }

    footer .support-links .links-info {
        width: 100%;
    }

    footer .support-links .links-info form {
        justify-content: center;
    }

}

@media screen and (max-width:850px) {

    header .website-search-wishlist-shop .search-box form input {
        width: 90%;
    }

    header .email-phone-brand-user .phone-brand-box .brand-box ul {
        gap: 4px;
    }

    .slideshow .swiper-slide img {
        width: 100%;
    }

}

@media screen and (max-width:750px) {

    #weekly-deals .product-img img {
        width: 80%;
    }

}

@media screen and (max-width:760px) {

    header .navbar .phone-navbar {
        text-align: right;
        width: 100%;
        display: block;
    }

    header .navbar .desktop-navbar {
        position: absolute;
        top: 43px;
        left: 110%;
        background-color: #333;
        width: 100%;
        padding: 10px 0;
        z-index: 2000;
    }

    header .navbar .desktop-navbar.active {
        left: 0;
        transition: all 0.5s ease-in-out;
    }

    header .navbar .desktop-navbar nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 17px;
        padding-left: 4vw;
        padding-top: 20px;
    }

    header .navbar .desktop-navbar nav ul li .sub-desktop-navbar {
        position: static;
        gap: 23px;
        align-items: flex-start;
        margin-top: 15px;
    }

}

@media screen and (max-width:650px) {

    #weekly-deals {
        flex-direction: column-reverse;
        gap: 10px;
    }

    #weekly-deals .time {
        width: 100%;
    }

    #weekly-deals .product-img {
        width: 100%;
    }

    #weekly-deals .product-img img {
        width: 60%;
    }

}

@media screen and (max-width:600px) {

    header .website-search-wishlist-shop {
        flex-direction: column;
        gap: 10px;
    }

    header .website-search-wishlist-shop .website-box {
        width: 100%;
    }

    header .website-search-wishlist-shop .search-box {
        width: 100%;
    }

    header .website-search-wishlist-shop .wishlist-shop-box {
        margin-top: 10px;
        width: 100%;
    }

    #brand-collection {
        flex-direction: column;
    }

    #brand-collection .men,
    #brand-collection .women {
        width: 100%;
    }

    #all-brands {
        flex-direction: column;
    }

    #all-brands .brand-list {
        width: 100%;
    }

}

@media screen and (max-width:330px) {

    #weekly-deals .time .timer-countdown {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

}

@media screen and (max-width:300px) {

    footer .support-links .links-info form {
        flex-direction: column;
        gap: 10px;
    }

    footer .support-links .links-info form input {
        width: 100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    footer .support-links .links-info form button {
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
    }

}

/* responsive css ends  */