@import "bootstrap.min.css";

h3,
.h3,
h4,
.h4 {
    letter-spacing: 0.38px;
    line-height: 28px;
}
body {
    font-weight: normal;
    font-size: 16px;
}
a {
    text-decoration: none;
}
ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
}

.topMenu {
    display: flex;
    position: relative;
}

.topMenu .righyCol,
.topMenu .leftCol {
    flex: 1;
}
.topMenu .leftCol ul {
    display: flex;
    align-items: center;
}

.topMenu .leftCol ul li.country a {
    display: inline-flex;
    width: 120px;
    height: 35px;
    padding: 11px 11px 11px 15px;
    background-color: #fff7f6;
    border-radius: 100px;
    line-height: unset;
    cursor: pointer;
    vertical-align: top;
    font-size: 12px;
    font-weight: 700;
    color: #2a3947;
    align-items: center;
}

.topMenu .leftCol ul li.country a:after {
    padding-left: 15px;
    content: "";
    background-image: url(../images/carotright.png);
    background-size: 7px 9px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-flex;
    height: 10px;
}

.topMenu .leftCol ul li.country span.flag {
    display: block;
    float: left;
    width: 16px;
    height: 12px;
    margin-right: 7px;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    border-radius: 4px;
    background-image: url(../images/pk.svg);
}
.topMenu .leftCol ul li.country a span {
    margin: 0 2px;
}

.topMenu .leftCol ul li .ctaLink {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    color: #1d1d1b;
    min-width: 65px;
    height: 45px;
    margin-top: -8px;
    padding: 5px 8px;
    cursor: pointer;
}

.topMenu .leftCol ul li .ctaLink i {
    font-size: 14px;
}

.topMenu .leftCol ul li .ctaLink .drpLink {
    position: relative;
}
.topMenu .leftCol ul li .ctaLink .drpLink::after {
    content: "";
    padding-left: 18px;
    background-image: url(../images/carotdown.png);
    background-size: 6px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-top;
}
.topMenu .leftCol ul li .ctaLink:hover {
    background-color: #f3f7fb;
}
.brandName {
    display: inline-flex;
}
.brandName img {
    width: 80px;
}

.topMenu .righyCol {
    display: flex;
    align-items: center;
}

.topMenu .righyCol form {
    max-width: 285px;
    width: 100%;
    margin-left: auto;
}

.topBar {
    height: 65px;
    display: flex;
    align-items: center;
    padding: 15px 0;
    background-color: white;
}

.topMenu .righyCol form .form-control {
    height: 40px;
    border: none;
    background-color: #eff6fb;
    border-radius: 100px;
    font-size: 12px;
    transition: linear 0.1s;
}
.topMenu .righyCol form .form-control:focus {
    box-shadow: none;
}

.ctaWishIcon {
    min-width: 65px;
    text-align: right;
}

.ctaWishIcon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    background: #ffd9df;
    border-radius: 100%;
    line-height: 42px;
    color: #1d1d1b;
}

.searchTop {
    position: relative;
}

.searchTop .form-control {
    padding-right: 40px;
}
.searchTop i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -70%);
    display: block;
}

header .navigation .navbar-nav {
    justify-content: center;
    width: 100%;
}

header .navigation .navbar-nav li .nav-link {
    font-size: 12px;
    display: inline-flex;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #1d1d1b;
    padding: 3px 14px 6px 16px;
    margin: 0 1px;
    border-radius: 100px;
}
header .navigation .navbar-nav li .nav-link::after {
    content: "";
    padding-left: 18px;
    content: "";
    background-image: url(../images/carotdown.png);
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-top;
    display: flex;
    position: relative;
    top: 4px;
}

header .navigation .navbar-nav li .nav-link:hover {
    background-color: #232e37;
    color: #fff;
}

header .navigation .navbar-nav li .nav-link:hover::after {
    filter: brightness(0) invert(1);
}

header .navigation .navbar-nav li .nav-link:hover svg path {
    fill: #fff;
}

header .navigation .navbar-nav li .nav-link svg {
    margin-left: 8px;
}

header .navigation {
    height: 55px;
    margin: auto;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
}

.shippingNav {
    height: 38px;
    background-color: #2a3947;
    display: flex;
    align-items: center;
}

.free-shipping-nav-slider-item path.trust-pilot-svg {
    fill: #fff;
}
.free-shipping-nav-slider-item {
    display: flex;
}

.free-shipping-nav-slider-item p {
    margin: 0 0 0 5px;
    color: #fff;
    font-size: 12px;
}

.shippingNav .time,
.shippingNav .shipping {
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shippingNav .time i,
.shippingNav .shipping i {
    line-height: 0;
    font-size: 24px;
    margin-right: 8px;
}

.shippingNav .row {
    align-items: center;
}

.category {
    padding: 28px 0 24px;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumbs li a {
    color: #e4e6ee;
}
.breadcrumbs li {
    color: #797f99;
    font-size: 14px;
}
.breadcrumbs li:after {
    content: "/";
    color: #e4e6ee;
    display: inline-flex;
}

.category .mainText h1 {
    margin: 6px 0 12px;
    font-size: 48px;
    font-weight: 700;
    line-height: 65px;
    color: #1d1d1d;
    letter-spacing: 0px;
    text-align: center;
}

.category .mainText p {
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.31px;
    max-width: 760px;
    margin: 0 auto;
}

.conterText {
    text-align: right;
    color: #1d1d1b;
    font-weight: bold;
    margin-bottom: 24px;
}

.cardProduct .img-title {
    position: relative;
}
.cardProduct .img-title .ctaFavourite {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffd9df;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 15px;
    left: 15px;
    color: #7d0b0e;
    font-size: 18px;
}

.cardProduct .productZoom {
    max-width: 55px;
    height: 55px;
    border-radius: 50%;
    position: absolute;
    bottom: -18px;
    right: 10px;
}

.cardProduct .productZoom:hover {
    bottom: -45px;
    height: 200px !important;
    width: 200px !important;
    max-width: 200px;
}
.cardProduct .productZoom img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    border: solid 2px white;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
    transition: all 0.3s cubic-bezier(0.18, 0.88, 0.4, 1.12);
    z-index: 9;
}

.colourways .colourway {
    background-color: #fff;
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 10px;
}
.cBody h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.5;
    color: #1d1d1b;
}
.cBody p {
    font-weight: 400;
    color: #1d1d1b;
    font-size: 12px;
    margin-bottom: 10px;
    min-height: 36px;
}

.cBody .pricingCard span,
.cBody .pricingCard p {
    margin: 0;
    min-height: auto;
}

.cBody .pricingCard {
    text-align: center;
    border-radius: 0px 0px 10px 10px;
    min-height: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    color: #353c58;
    background-color: #fff7f6;
}

.cBody .pricingCard span {
    color: #2a3947;
    font-size: 12px;
    font-weight: 700;
}

.categoryMain [class*="col-"] {
    margin-bottom: 32px;
}

.categoryFooter {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

.categoryFooter p {
    margin: 0;
    font-size: 14px;
    color: #1d1d1b;
}

.categoryFooter:before {
    content: "";
    display: block;
    width: 220px;
    height: 7px;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #72baa3;
    overflow: hidden;
}

.cstForm {
    display: flex;
}

.cstForm .relative {
    flex: 1;
}

.featured {
    background-color: #fff;
    border-top: solid 1px #1d1d1b;
    padding: 27px 0 27px;
}

.featured h4 {
    color: #1d1d1b;
    font-size: 16px;
    margin: 0;
}
.featured .featuredListing {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer {
    padding: 35px 0 45px 0;
    background-color: #1d1d1b;
    color: #fff;
}

.footerTop {
    text-align: center;
}

.footerTop ul li {
    text-align: center;
}

.footerTop .brandLogo img {
    max-width: 219px;
    margin: 0 auto;
    display: block;
    margin-bottom: 15px;
}

.footerTop ul li {
    margin-bottom: 3px;
    padding-left: 5px;
}

.footerTop ul li a {
    text-decoration: underline;
    color: #fff;
}

.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 0;
}

.social-links li {
    padding: 0 5px;
}
.social-links li a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid #fff;
}

footer .brandMain .logo .lwImg {
    height: 33px;
}
footer .brandMain .logo .star {
    height: 22px;
}

footer .brandMain .logo {
    margin-bottom: 10px;
}
footer .brandMain p {
    color: #fff;
    font-size: 12px;
    margin-bottom: 30px;
}

footer .brandMain p i {
    margin-right: 10px;
}

.footer-links__heading {
    color: white;
    font-size: 12px;
}

.customContainer {
    max-width: 762px;
    margin: 0 auto;
}

.customContainer h4 {
    color: #fff;
    line-height: 30px;
    font-size: 16px;
    margin-bottom: 10px;
    letter-spacing: 0.38px;
}
.customContainer .quickLinks li a {
    color: #fff;
    font-weight: 400;
    line-height: 30px;
}
.customContainer .quickLinks li a:hover {
    text-decoration: underline;
}
.customContainer .ps-md-2 {
    border-left: solid 1px rgba(255, 255, 255, 0.16);
}

.community {
    width: 100%;
    padding: 40px 0;
    background: #fff7f6;
}

.community .content p {
    max-width: 480px;
}

.cstForm .relative .form-control {
    background-color: transparent;
    border: 1px solid #1d1d1b;
    border-radius: 4px;
    font-size: 16px;
    height: 54px;
}

.cstForm .relative .form-control:focus {
    box-shadow: none;
}
.cstForm .relative {
    margin-right: 10px;
}

.cstForm .relative .btn {
    min-width: 60px;
}

.lang-icon ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    margin-top: 30px;
}

.lang-icon ul li {
    padding: 0 2.5px;
}

.footerLinks {
    text-align: center;
    color: #fff;
    line-height: 30px;
    font-size: 16px;
    margin: 10px 0;
}

.footerLinks ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -5px;
}

.footerLinks ul li {
    padding: 0 5px;
}

.menu-subfooter ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-subfooter ul {
    margin: 30px 0;
}
.menu-subfooter ul li {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.menu-subfooter ul li a {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.menu-subfooter ul li:after {
    content: ".";
    padding: 0 5px;
    font-size: 50px;
    position: relative;
    top: -14px;
    color: #fff;
}
.menu-subfooter ul li:last-child:after {
    content: none;
}

.copyrights {
    text-align: center;
    color: #fff;
    font-size: 10px;
}

.dropContanct {
    position: absolute;
    width: 370px;
    padding: 25px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 2.76726px 2.21381px rgb(0 0 0 / 2%), 0px 6.6501px 5.32008px rgb(0 0 0 / 3%),
        0px 12.5216px 10.0172px rgb(0 0 0 / 4%), 0px 22.3363px 17.869px rgb(0 0 0 / 4%),
        0px 41.7776px 33.4221px rgb(0 0 0 / 5%), 0px 100px 80px rgb(0 0 0 / 7%);
    z-index: 100;
    cursor: auto;
    transform: translate(-50%, 0) !important;
    left: 50% !important;
    top: 100% !important;
    border: none;
}

.dropContanct .ctaDropdownHeader {
    text-align: center;
    margin-bottom: 15px;
}

.dropContanct h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1d1d1b;
}
.topMenu .leftCol ul .contact-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.topMenu .leftCol ul .contact-list li a,
.topMenu .leftCol ul .contact-list li {
    width: 100%;
    display: flex;
    align-items: center;
}

.topMenu .leftCol ul .contact-list li {
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0px 2px 7px rgb(0 0 0 / 15%);
}
.topMenu .leftCol ul .contact-list li p,
.topMenu .leftCol ul .contact-list li h4 {
    margin: 0;
    text-align: left;
}

.topMenu .leftCol ul .contact-list li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 4px;
    margin-right: 12px;
    background-color: #f3f7fb;
    border-radius: 50%;
}

.topMenu .leftCol ul p.time {
    margin-bottom: 15px;
    padding: 12px;
    border-radius: 4px;
    background-color: #eef8f4;
    color: #2a3947;
    text-align: center;
    font-size: 14px;
}
.topMenu .leftCol ul .contact-list li h4 {
    font-weight: 700;
    line-height: 1.5;
    color: #1d1d1b;
    font-size: 14px;
}
.topMenu .leftCol ul .contact-list li p {
    font-weight: 400;
    color: #1d1d1b;
    font-size: 12px;
}

.topMenu .leftCol ul .contact-list li {
    margin-bottom: 15px;
}
.topMenu .leftCol ul .contact-list li.commercial .icon {
    background: #1d1d1b;
}
.topMenu .leftCol ul .contact-list li.commercial .icon svg {
    filter: brightness(0) invert(1);
}

.topMenu .leftCol ul .contact-list li .media-body {
    flex: 1;
}

.topMenu .leftCol ul .contact-list li:last-child {
    margin-bottom: 0;
}
.topMenu .leftCol ul .contact-list li a i img {
    width: 8px;
}

.dropHelp {
    min-width: 100%;
    padding: 25px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 2.76726px 2.21381px rgb(0 0 0 / 2%), 0px 6.6501px 5.32008px rgb(0 0 0 / 3%),
        0px 12.5216px 10.0172px rgb(0 0 0 / 4%), 0px 22.3363px 17.869px rgb(0 0 0 / 4%),
        0px 41.7776px 33.4221px rgb(0 0 0 / 5%), 0px 100px 80px rgb(0 0 0 / 7%);
    z-index: 100;
    display: none;
    cursor: auto;
    border: none;
    left: 0 !important;
    top: 100% !important;
    transform: inherit !important;
}

.cardMegaMenu {
    display: flex;
    padding: 0 20px;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
    box-shadow: 0px 2px 7px rgb(0 0 0 / 15%);
    min-height: 150px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: ease-in-out 0.2s;
    position: relative;
    margin-bottom: 20px;
    top: 0;
}

.cardMegaMenu:hover {
    top: -5px;
}
.cardMegaMenu .media-body {
    flex: 1;
    margin-left: 20px;
}

.megaCard .media-body h4,
.cardMegaMenu .media-body h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #1d1d1b;
}

.cardMegaMenu .media-body p {
    font-weight: 400;
    line-height: 1.5;
    font-size: 14px;
    color: #1d1d1b;
}

.megaCard {
    display: flex;
    background-color: #fff7f6;
    padding: 0 20px;
    box-shadow: 0px 2px 7px rgb(0 0 0 / 15%);
    min-height: 150px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.megaCard .media-body {
    flex: 1;
}

.megaCard .media-body {
    padding-left: 10px;
}
.megaCard .media-body .btn {
    min-width: 100%;
}
.megaCard .media-body h4 {
    margin-bottom: 27px;
}

.btn-dark {
    background-color: #353c58;
    transition: ease all 0.3s;
    color: #fff;
    font-size: 14px;
}

.btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
    letter-spacing: 0.01em;
    font-weight: 700;
}

.navigation .navbar {
    padding: 0;
}

.navigation .dropdown-menu {
    min-width: 100%;
    border-radius: 0;
    border: none;
    margin: 0 !important;
    top: 100% !important;
    transform: inherit !important;
    min-height: 300px;
    z-index: 100;
    padding: 25px;
    background-color: #fff;
    box-shadow: 0px 2.76726px 2.21381pxrgba (0, 0, 0, 0.0196802), 0px 6.6501px 5.32008pxrgba (0, 0, 0, 0.0282725),
        0px 12.5216px 10.0172pxrgba (0, 0, 0, 0.035), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
        0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 100px 80px rgba(0, 0, 0, 0.07);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: none;
    text-align: left;
    left: 0 !important;
}
.navigation .dropdown-menu h3 {
    font-size: 16px;
    margin-bottom: 15px;
    display: block;
    color: #1b1b1b;
    font-weight: 700;
    display: flex;
    align-items: center;
}
.navigation .dropdown-menu h3 i {
    margin-left: 10px;
    line-height: 1;
}
.navigation .dropdown-menu .popularCard {
    display: flex;
    align-items: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding-right: 5px;
    padding-left: 18px;
    border-radius: 4px;
    min-height: 46px;
    width: 100%;
    background-color: #f3f7fb;
    transition: ease-in-out 0.3s;
    color: #1b1b1b;
}

.navigation .dropdown-menu .media-body {
    flex: 1;
}

.navigation .dropdown-menu .popularCard .icon img {
    max-width: 36px;
    max-height: 36px;
    border-radius: 100%;
    border: solid 2px white;
}

.navigation .dropdown-menu .popular li {
    margin-bottom: 5px;
}
.groupCard h4.title,
.group-links li span {
    font-size: 14px;
    padding: 5px 10px;
    display: block;
    font-weight: 700;
    margin: 0;
}

.group-links li {
    margin-bottom: 5px;
}
.group-links li a {
    display: inline-block;
    padding: 5px 10px;
    color: #1b1b1b;
    font-size: 12px;
    border-radius: 30px;
}

.group-links li a:hover {
    background-color: #2a3947;
    color: white;
}
.group-links {
    background-color: #f3f7fb;
    transition: ease-in-out 0.3s;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-radius: 4px;
}
.customLinks li a span {
    background-color: #000;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 10px;
    padding: 0;
}
.customLinks li a {
    display: inline-block;
    padding: 5px 10px;
    color: #1b1b1b;
    font-size: 12px;
    border-radius: 30px;
}

.customLinks li a:hover {
    background-color: #2a3947;
    color: white;
}

.customLinks {
    column-count: 2;
    height: 310px;
    column-fill: auto;
}

.groupCard {
    background-color: #f3f7fb;
    transition: ease-in-out 0.3s;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.cardText {
    background-color: #fff7f6;
    border-radius: 4px;
    height: 310px;
    background-size: cover;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.cardText h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.cardText p {
    font-size: 14px;
    margin-left: 0;
    position: relative;
    z-index: 1;
}

.cardText .blob--r {
    top: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}

.cardText .blob--l {
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}
.groupCard.p-3 .customLinks{
    height: 187px;
}
