/* Slider CSS */
.swiper-hero {
    height: 400px !important;
}

.swiper-hero .swiper-slide {
    height: 400px !important;
    background-size: cover;
    background-position: center center;
}

.swiper-container.dots-over .swiper-pagination {
    bottom: 0.8rem !important;
}

/*-------------------*/
/* Responsive adjustments for screens smaller than 1399.8px */
@media (max-width: 1399.8px) {
    .swiper-hero {
        height: 350px !important;
    }

    .swiper-hero .swiper-slide {
        height: 350px !important;
    }
}

@media (max-width: 767.98px) {
    .swiper-hero {
        height: 223px !important;
    }

    .swiper-hero .swiper-slide {
        height: 223px !important;
    }
}

.border-top {
    border-top: 1px solid #efefef !important;
}

.col-lg-4 .col-6 {
    padding: 0 12.5px !important;
}

.col-6 .card {
    width: 93px;
    margin-top: 30px;
}

.w-85 {
    width: 85% !important;
}

.logo {
    width: 150px;
}

.custom-left {
    margin-left: 107px;
}

.navbar-expand-lg.navbar-light
    .navbar-nav
    .dropdown:not(.dropdown-submenu)
    > .dropdown-toggle:after {
    color: #343f52 !important;
}

.bg-cream {
    background-color: #f4edddbd;
}

footer ul li {
    line-height: 1 !important;
    color: #222222 !important;
}

footer p {
    color: #222222 !important;
}

footer a,
address {
    font-size: 0.6rem;
    color: #222222 !important;
}

footer.bg-footer {
    background-color: #e4e4e4 !important;
}

@media (min-width: 768px) {
    .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 14.5% !important;
    }
}

.navbar-stick:not(.navbar-dark) .logo {
    padding-top: 10px;
}

.col a {
    color: #60697b !important;
}

.picker label > span {
    position: absolute;
    inset: 0;
    block-size: 100%;
    inline-size: 100%;
    font-size: 0.7rem;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0.5rem;
    border: 1px solid;
}

.picker label > span:hover {
    background-color: #007dc3;
    color: #fff;
}

.icon-list li {
    padding-left: 0;
}

img.image-border {
    border: 1px solid #8f8a8a;
}

.card-body h3 {
    font-size: 20px;
    text-align: left;
    font-weight: 500;
    color: #222222;
}

.card-body h4 {
    font-size: 16px;
    text-align: left;
    font-weight: 500;
    color: #222222;
    padding: 0px 31px;
}

p.mail {
    margin-left: 30px;
}

.mail a {
    color: #007dc3;
    font-size: 20px;
}

.form-group p {
    font-size: 14px;
    text-align: left;
    margin-bottom: 8px;
}

img#icon {
    width: 90px;
}

@media (max-width: 767px) {
    p.mail {
        margin-left: 0;
    }

    .mail a {
        text-align: center;
    }

    .card-body h3 {
        text-align: center;
    }

    .card-body h4 {
        text-align: center;
    }
}

section.wrapper.bg-light.mt-6 {
    margin: 34px;
    background-color: #fafafa !important;
    border-radius: 16px;
}

p.lead.fs-lg.text {
    font-size: 16px !important;
    line-height: 1.6;
}

.card1 {
    box-shadow: 0 0 0 0.05rem rgba(8, 60, 130, 0.06),
        0rem 0rem 1.25rem rgba(30, 34, 40, 0.04);
    border: 0;
    margin: 11px 11px;
    width: 263px;
    padding: 5px 13px;
    border-radius: 5%;
}

section.wrapper.bg-light.pb-md-10.pink {
    padding: 0 !important;
}

/* new css */
.padding-remove {
    padding-left: 0px;
    padding-right: 0px;
}

.logo-navbar-brand {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

.navbar-collapse .nav-link.menu-link {
    padding-top: 0.5rem !important;
    padding-bottom: 0.6rem !important;
    padding-right: 25px !important;
    padding-left: 25px !important;
    border-right: 1px solid #1197e1;
}

@media (min-width: 992px) {
    .navbar-expand-xxl.extended:not(.fixed) .navbar-collapse-wrapper {
        padding: 0 0.5rem 0 0.5rem;
    }
}

.navbar .navbar-collapse {
    align-items: center;
    justify-content: center;
}

ul.navbar-nav li.nav-item.first-menu:first-child {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.dropdown-menu.visible-dropdown {
    padding: 0.5rem 0;
    min-width: 8rem;
    background-color: #e6e6e6;
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    padding: 0.2rem 0.7rem;
}

@media (min-width: 1400px) {
    ul.dropdown-menu.visible-dropdown {
        top: 100% !important;
        visibility: visible !important;
        pointer-events: all !important;
        opacity: 1 !important;
        margin-top: -5px !important;
        border-radius: 0 !important;
        display: block !important;
    }
}

.navbar-light.navbar-clone.fixed
    ul.navbar-nav
    li.nav-item.first-menu:first-child {
    border-top: none !important;
    box-shadow: none !important;
    border-right: 1px solid #1197e1 !important;
}

nav.navbar-light .navbar-nav .nav-link {
    color: #fff !important;
}

nav.navbar-light.navbar-clone.fixed .navbar-nav .nav-link {
    color: #343f52 !important;
}

ul.navbar-nav li.nav-item ul.dropdown-menu.visible-dropdown li a:hover,
ul.navbar-nav li.nav-item ul.dropdown-menu.visible-dropdown li a:focus,
ul.navbar-nav li.nav-item ul.dropdown-menu.visible-dropdown li a:active {
    background-color: #ff9500 !important;
    color: #fff !important;
}

.navbar-clone.fixed {
    display: none;
}

.navbar-expand-xxl .offcanvas-nav {
    width: 100% !important;
    position: sticky !important;
}

.navbar-collapse-wrapper.menubar-width {
    width: 100% !important;
}

.offcanvas-backdrop {
    background-color: transparent;
}

.offcanvas {
    display: none !important;
    /* Initially hide the offcanvas menu */
}

.offcanvas.show {
    display: block !important;
    /* Show the offcanvas menu when 'show' class is added */
}

@media (max-width: 1399.98px) {
    .navbar-expand-xxl .offcanvas-nav .offcanvas-body {
        background-color: transparent;
    }

    ul.navbar-nav li.nav-item.first-menu:first-child {
        box-shadow: none;
    }

    .navlink-border {
        border-right: none !important;
        border-bottom: 1px solid #1197e1 !important;
    }

    .first-menu .dropdown-menu .nav-item .dropdown-item {
        color: #5d5c5c !important;
    }

    .first-menu .dropdown-menu {
        background-color: #fff !important;
    }

    .content-banner .col-10 {
        width: 100% !important;
    }

    .content-banner .col-2 {
        display: none !important;
    }

    .column-product .dropdown-menu-product {
        color: white !important;
        text-align: center !important;
        font-weight: bold !important;
        font-size: 22px !important;
    }

    .column-product {
        margin-top: 10px !important;
    }
}

@media (min-width: 1400px) {
    ul.dropdown-menu.visible-dropdown {
        width: 10.7rem !important;
    }

    .content-banner .col-10 {
        width: 83.33333333% !important;
    }

    .content-banner .col-2 .navbar-nav {
        background-color: #e6e6e6;
    }
}

@media (min-width: 1400px) {
    .col-2.column-product {
        border-top: 9px solid #007dc3;

        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
        padding: 0px 0px 0px 0px;
    }

    p.nav-item.first-menu {
        text-align: center;
        padding-top: 0.2rem;
        padding-bottom: 0rem;
    }
}

.column-product .dropdown-menu-product {
    color: white !important;
    text-align: center !important;
}

.section-main .section-categories {
    display: none !important;
}

.swiper-container.dots-over .swiper-pagination {
    bottom: 2.8rem;
}

ul.dropdown-menu.visible-dropdown li a:hover,
ul.dropdown-menu.visible-dropdown li a:focus,
ul.dropdown-menu.visible-dropdown li a:active {
    background-color: #ff9500 !important;
    color: #fff !important;
}

a.nav-link.menu-link {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

a.nav-link.menu-link:hover {
    box-shadow: none;
}

@media (min-width: 1400px) {
    .navbar-expand-xxl.extended:not(.fixed) .navbar-collapse-wrapper {
        height: 51px !important;
    }
}

.section-main .categories-image-section .swiper-container .swiper img {
    width: 100%;
}

.banner-image-category,
.banner-image-colection {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.swiper-product .banner-image-mens {
    height: 140px !important;
    background-image: url(../images/banner/mens.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.swiper-product .banner-image-contact {
    height: 140px !important;
    background-image: url(../images/banner/contact-us.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.product-details {
    text-align: left;
    line-height: 30px;
}

.container-thumbnails {
    display: flex;
    justify-content: center;
    position: relative;
    margin-left: -35px;
}

.thumbnails {
    display: flex;
    flex-direction: column;
    line-height: 0;
    margin-right: 80px;

    li {
        flex: auto;
    }

    a {
        display: block;
    }

    img {
        width: 100%;
        height: 80px;
        object-fit: cover;
        object-position: top;
        margin-bottom: 6px;
    }
}

.slides {
    overflow: hidden;
    width: 310px;
    height: 100px;

    li {
        width: 386px;
        height: 400px;
        position: absolute;
        z-index: 1;
    }

    img {
        height: 475px;
        object-fit: cover;
        object-position: top;
    }
}

.slides li:target {
    z-index: 3;
    -webkit-animation: auto;
}

.slides li:not(:target) {
    -webkit-animation: hidden 1s 1;
}

.navigation-buttons {
    position: absolute;
    top: 53%;
    z-index: 1;
    display: flex;
}

.container-thumbnails .thumbnails li img:hover {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.product-heading {
    border-bottom: 1px solid;
}

.product-image-part .post-header .post-title .link-dark {
    font-size: 15px;
}

.section-main .categories-image-section .swiper-container .post-header p {
    font-size: 14px;
}

.section-main .categories-image-section .swiper-container .swiper-slide a img {
    border: 1px solid #cecbcb;
}

.picker label {
    inline-size: 2.7rem;
    block-size: 1.8rem;
}

.color-indicator {
    display: inline-block;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
}

.post-header .link-dark:hover {
    color: #007dc3 !important;
}

/*-------------------index--------------------------*/
.gray-box a img {
    border: 1px solid #cecbcb;
}

.hover-container:hover img,
.hover-container:hover .post-title a {
    transform: scale(1.05);
    /* Example effect */
    transition: transform 0.3s ease;
    color: #007bff;
}

.hover-container img {
    transition: transform 0.3s ease;
}

.hover-container .post-title {
    transition: transform 0.3s ease;
}

/*-----------------index----------------------------*/
/*----------------BFS-----------------------------*/
.hover-effect {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.hover-effect .swiper-slide img {
    display: block;
    width: 100%;
    transition: transform 0.3s ease;
}

.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hover-effect .post-title a {
    color: #000;
    /* Initial color */
    transition: color 0.3s ease;
}

.hover-effect:hover .swiper-slide img {
    transform: scale(1.1);
}

.hover-effect:hover .post-title a {
    color: #007bff;
    /* Change title color on hover */
}

.hover-effect:hover .hover-overlay {
    opacity: 1;
}

.navbar.navbar-bg-light {
    background: transparent !important;
}

@media (max-width: 490px) {
    .slides {
        img {
            /* height: 399px; */
            height: 295px !important;
            width: 65% !important;
            object-fit: cover;
            object-position: top;
        }
    }
}

@media (max-width: 1399px) {
    .swiper-controls .swiper-navigation .swiper-button.swiper-button-next {
        right: 3rem;
    }

    .container-fluid.container-xxl.main-banner {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

@media (max-width: 1024.8px) {
    .swiper-hero,
    .swiper-hero .swiper-slide {
        height: 381px !important;
    }
}

@media (max-width: 768px) {
    .swiper-container.dots-over .swiper-pagination {
        bottom: 0.1rem !important;
    }

    .swiper-hero .swiper-slide {
        height: 289px !important;
    }

    .swiper-hero {
        height: 289px !important;
    }
}

@media (max-width: 425px) {
    .swiper-container.dots-over .swiper-pagination {
        bottom: 0.1rem !important;
    }

    .swiper-hero .swiper-slide {
        height: 158px !important;
    }

    .swiper-hero {
        height: 158px !important;
    }
}

@media (max-width: 375px) {
    .swiper-hero,
    .swiper-hero .swiper-slide {
        height: 140px !important;
    }
}

@media (max-width: 320px) {
    .swiper-hero,
    .swiper-hero .swiper-slide {
        height: 120px !important;
    }
}

@media (min-width: 1400px) {
    .accordion {
        display: none;
    }
}

.accordion-button {
    font-weight: bold !important;
}

.icon-color-blue {
    color: #007dc3;
}

.submit-btn-color {
    background-color: #007dc3;
    color: #fff;
}

/* plain banner */
.plain-container {
    background-image: url(../img/plain-banner-image.jpg);
}

.description-list {
    list-style: none;
    padding-left: 0 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.description-list li::before {
    content: "\2606";
    color: #747171;
    font-weight: bold;
    display: inline-block;
    width: 23px;
    margin-left: -0.2em;
}

@media (max-width: 425px) {
    .slides {
        li {
            width: 330px;
            height: 400px;
            position: absolute;
            z-index: 1;
        }
    }
}

/* 11-09-2024 */
/* Magnify Glass Effect CSS */
.magnify-container {
    position: relative;
    display: inline-block;
}

.magnify-image {
    display: block;
    width: 100%;
    cursor: zoom-in;
}

.magnify-glass {
    position: absolute;
    width: 300px;
    height: 350px;
    border: 2px solid #000;
    background-repeat: no-repeat;
    display: none;
    pointer-events: none;
    z-index: 1000;
}