.highlight {
    padding   : 10px 30px;
    background: #16425b;
    color     : #fff;
    font-size : 14px
}

.highlight p {
    text-transform: uppercase;
    text-align    : center
}

@media(max-width: 450px) {
    .highlight {
        font-size: 12px
    }
}

header {
    position  : absolute;
    top       : 0;
    width     : 100%;
    z-index   : 1;
    background: rgba(0, 0, 0, .35)
}

header .main-top-header {
    display    : flex;
    align-items: center;
    gap        : 20px;
    padding    : 5px 0
}

header .main-top-header .logo {
    width: 20%
}

header .main-top-header .logo a {
    display: flex
}

header .main-top-header .logo a img {
    max-width: 170px
}

@media(max-width: 450px) {
    header .main-top-header .logo {
        width: 40%
    }
}

header .main-top-header .right-header {
    width: 80%
}

header .main-top-header .store-details {
    padding-bottom: 12px
}

header .main-top-header .store-details ul {
    display        : flex;
    align-items    : center;
    gap            : 30px;
    justify-content: end
}

header .main-top-header .store-details ul a {
    display    : flex;
    gap        : 20px;
    align-items: center
}

header .main-top-header .store-details ul .icon img {
    width: 36px
}

header .main-top-header .store-details ul span {
    color: #fff
}

header .main-top-header .store-details ul p {
    color         : #fff;
    font-size     : 16px;
    letter-spacing: 1px
}

header .main-top-header .navlinks {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    position       : relative;
    background     : #134464;
    color          : #fff;
    padding        : 15px
}

header .main-top-header .navlinks ul {
    display    : flex;
    align-items: center;
    gap        : 15px
}

header .main-top-header .navlinks .site_link a {
    color: #fff
}

header .main-top-header .navlinks .user_link ul {
    gap: 25px
}

@media(max-width: 450px) {
    header .main-top-header .navlinks .user_link ul {
        gap: 15px
    }
}

header .main-top-header .navlinks .user_link a {
    color   : #fff;
    position: relative
}

header .main-top-header .navlinks .user_link .icon {
    font-size: 22px
}

@media(max-width: 450px) {
    header .main-top-header .navlinks .user_link .icon {
        font-size: 18px
    }
}

header .main-top-header .navlinks .user_link .count {
    position        : absolute;
    top             : -16px;
    right           : -9px;
    width           : 20px;
    background-color: #75aacd;
    color           : #fff;
    border-radius   : 10px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : 14px
}

@media(max-width: 450px) {
    header .main-top-header .navlinks .user_link .count {
        font-size: 10px;
        width    : 14px;
        top      : -8px;
        right    : -5px
    }
}

header .main-top-header .navlinks .user_link .search-icon {
    font-size: 20px;
    cursor   : pointer
}

header .main-top-header .search-box {
    position   : absolute;
    bottom     : -80px;
    padding    : 30px 0;
    display    : none;
    align-items: center;
    gap        : 20px;
    z-index    : 9
}

header .main-top-header .search-box .main-search-box {
    display         : flex;
    justify-content : center;
    width           : 400px;
    background-color: #fff;
    align-items     : center;
    padding         : 5px 15px;
    border-radius   : 20px
}

header .main-top-header .search-box .main-search-box input {
    width  : 100%;
    padding: 10px;
    border : none
}

header .main-top-header .search-box .main-search-box input:focus {
    outline: none
}

header .main-top-header .search-box .main-search-box .icon {
    cursor: pointer
}

header .main-top-header .search-box .search-close {
    font-size: 30px;
    color    : #fff;
    cursor   : pointer
}

header .main-top-header .showSearch {
    display: flex
}

header .main-top-header .navlinks::after {
    content          : "";
    position         : absolute;
    left             : -59px;
    width            : 60px;
    height           : 100%;
    background-color : #134464;
    -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
    clip-path        : polygon(100% 0, 0 100%, 100% 100%)
}

header .main-top-header .dropdown-menu {
    position: relative
}

header .main-top-header .dropdown-menu .sub-menu {
    visibility    : hidden;
    opacity       : 0;
    transform     : translateX(-20px);
    transition    : all .2s linear;
    position      : absolute;
    top           : 25px;
    left          : -10px;
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    width         : 200px;
    background    : #fff;
    border-radius : 10px;
    box-shadow    : 0px 0px 12px #023350;
    gap           : 0
}

header .main-top-header .dropdown-menu .sub-menu li {
    width: 100%
}

header .main-top-header .dropdown-menu .sub-menu li a {
    display   : block;
    padding   : 5px 10px;
    color     : #000;
    font-size : 14px;
    transition: all .2s linear
}

header .main-top-header .dropdown-menu .sub-menu li a i {
    margin-right: 5px
}

header .main-top-header .dropdown-menu .sub-menu li a:hover {
    background-color: #deedff
}

header .main-top-header .dropdown-menu .sub-menu li a:hover i {
    color    : #023350;
    font-size: 15px
}

header .main-top-header .dropdown-menu .sub-menu .logout-user a {
    color: #fe7c7c
}

header .main-top-header .dropdown-menu:hover .sub-menu {
    visibility: visible;
    opacity   : 1;
    transform : translateX(0px)
}

header .menu-icon {
    display: none
}

header .close-icon {
    display: none
}

.hero-section {
    position           : relative;
    width              : 100%;
    background         : url(../upload/banner/hero-banner.jpg);
    background-position: center;
    background-size    : cover;
    padding            : 300px 0px 200px;
    text-align         : center;
    text-shadow        : 0px 0px 9px rgba(0, 0, 0, .73);
    z-index            : -1;
}

.hero-section h3{
    font-size  : 36px;
    font-weight: 600;
    color      : #fff
}

.hero-section p {
    font-size  : 26px;
    font-weight: 600;
    color      : #fff;
    width      : 70%;
    margin     : 0 auto
}

@media(max-width: 768px) {
    .hero-section {
        padding: 250px 0px 200px
    }

    .hero-section h3 {
        font-size: 32px
    }

    .hero-section p {
        font-size: 24px;
        width    : 100%
    }
}

.popular-products {
    padding: 50px 0 0
}

.popular-products .main_popular_product {
    display: flex;
    gap    : 30px
}

.popular-products .main_popular_product .item {
    flex            : 1;
    position        : relative;
    overflow        : hidden;
    display         : flex;
    flex-direction  : row-reverse;
    background-color: #f5ede7;
    justify-content : space-between;
    padding         : 15px
}

.popular-products .main_popular_product .item .item-img {
    display: flex
}

.popular-products .main_popular_product .item .item-img img {
    transition   : all .5s ease-in-out;
    -o-object-fit: contain;
    object-fit   : contain;
    max-width    : 125px
}

@media(max-width: 992px) {
    .popular-products .main_popular_product .item .item-img img {
        max-width: 70px
    }
}

.popular-products .main_popular_product .item .item-content {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    margin-top    : 20px
}

.popular-products .main_popular_product .item .item-content .category_name {
    text-transform: uppercase;
    color         : #333;
    letter-spacing: 1px;
    font-size     : 18px
}

@media(max-width: 992px) {
    .popular-products .main_popular_product .item .item-content .category_name {
        font-size: 16px
    }
}

@media(max-width: 768px) {
    .popular-products .main_popular_product .item .item-content .category_name {
        font-size: 14px
    }
}

.popular-products .main_popular_product .item .item-content .product_title {
    color: #333
}

.popular-products .main_popular_product .item .item-content .product_title h4 {
    font-weight: 500;
    font-size  : 22px
}

@media(max-width: 1150px) {
    .popular-products .main_popular_product .item .item-content .product_title h4 {
        font-size: 18px
    }
}

@media(max-width: 992px) {
    .popular-products .main_popular_product .item .item-content .product_title h4 {
        font-size: 16px
    }
}

@media(max-width: 768px) {
    .popular-products .main_popular_product .item .item-content .product_title h4 {
        font-size: 14px
    }
}

.popular-products .main_popular_product .item .item-content .price .cruent_price {
    font-size  : 22px;
    font-weight: bold;
    color      : #e4573d
}

@media(max-width: 768px) {
    .popular-products .main_popular_product .item .item-content .price .cruent_price {
        font-size: 18px
    }
}

.popular-products .main_popular_product .item .item-content .buy-btn {
    margin-top: 15px
}

.popular-products .main_popular_product .item:hover img {
    transform: scale(1.05)
}

.popular-products .main_popular_product .item:nth-child(odd) {
    background-color: #e3efed
}

@media(max-width: 768px) {
    .popular-products .main_popular_product {
        gap: 15px
    }

    .popular-products .main_popular_product .item {
        flex-direction: column
    }

    .popular-products .main_popular_product .item .item-content .buy-btn {
        margin-top: 0
    }
}

@media(max-width: 600px) {
    .popular-products .main_popular_product {
        flex-direction: column
    }

    .popular-products .main_popular_product .item {
        flex-direction: row-reverse
    }
}

.popular-categories {
    margin-top: -85px;
    position  : relative;
}

.popular-categories .main-categories .categories-items .item {
    padding         : 15px;
    background-color: #e8f1f8;
    border-radius   : 10px;
    text-align      : center;
    box-shadow      : 0px 0px 11px rgba(101, 101, 101, .3411764706);
    margin          : 10px 0
}

.popular-categories .main-categories .categories-items .item a {
    display        : flex;
    flex-direction : column;
    gap            : 10px;
    justify-content: center;
    align-items    : center
}

.popular-categories .main-categories .categories-items .item img {
    width        : 130px;
    height       : 100px;
    -o-object-fit: contain;
    object-fit   : contain;
    transition   : all .3s ease-in-out
}

.popular-categories .main-categories .categories-items .item .categorie-name {
    color    : #333;
    font-size: 18px
}

@media(max-width: 992px) {
    .popular-categories .main-categories .categories-items .item .categorie-name {
        font-size: 16px
    }
}

@media(max-width: 450px) {
    .popular-categories .main-categories .categories-items .item .categorie-name {
        font-size: 14px
    }
}

.popular-categories .main-categories .categories-items .item:hover img {
    transform: scale(1.04)
}

@media(max-width: 992px) {
    .popular-categories .main-categories .categories-items .item {
        padding: 10px 0px
    }
}

.trending-items {
    padding: 100px 0px
}

.trending-items .trending-products {
    margin-top: 40px
}

.trending-items .trending-products .owl-nav button {
    position     : absolute;
    background   : #023350 !important;
    color        : #fff !important;
    width        : 35px;
    height       : 35px;
    line-height  : 35px;
    font-size    : 20px !important;
    text-align   : center;
    border-radius: 50%;
    box-shadow   : 0 0 40px 5px rgba(0, 0, 0, .05);
    transition   : all .5s ease-in-out;
    top          : 50%;
    transform    : translateY(-50%)
}

@media(max-width: 450px) {
    .trending-items .trending-products .owl-nav button {
        width      : 20px;
        height     : 20px;
        line-height: 5px
    }
}

.trending-items .trending-products .owl-prev {
    left: 0px
}

.trending-items .trending-products .owl-next {
    right: 0px
}

@media(max-width: 450px) {
    .trending-items {
        padding: 50px 0
    }
}

.product-card {
    padding : 20px;
    position: relative;
    overflow: hidden
}

.product-card .product-img {
    display        : flex;
    justify-content: center;
    position       : relative
}

.product-card .product-img img {
    max-width    : 200px;
    box-shadow   : 0px 0px 12px rgba(204, 204, 204, .3019607843);
    border-radius: 12px;
    height       : 200px;
    -o-object-fit: cover;
    object-fit   : cover
}

.product-card .product-content {
    margin-top: 20px
}

.product-card .product-content .product-title {
    font-size: 17px
}

.product-card .product-content .product-title a {
    color: #023350
}

@media(max-width: 450px) {
    .product-card .product-content .product-title {
        font-size  : 14px;
        line-height: 1.2
    }
}

.product-card .product-content p {
    font-size: 14px
}

.product-card .product-content .product-rate {
    font-size : 15px;
    margin-top: 3px;
    color     : #fba707
}

@media(max-width: 450px) {
    .product-card .product-content .product-rate {
        font-size: 10px
    }
}

.product-card .product-bottom {
    display        : flex;
    justify-content: space-between;
    align-items    : center
}

.product-card .product-bottom .product-price del {
    color: #757f95
}

.product-card .product-bottom .product-price span {
    color: #fd6a6a
}

@media(max-width: 450px) {
    .product-card .product-bottom .product-price {
        font-size: 12px
    }
}

.product-card .product-bottom .add-to-cart {
    display: flex
}

.product-card .product-bottom .add-to-cart span {
    width           : 50px;
    height          : 50px;
    display         : inline-block;
    padding         : 10px;
    border-radius   : 50%;
    background-color: #134464;
    cursor          : pointer
}

.product-card .product-bottom .add-to-cart span img {
    width: 30px
}

@media(max-width: 450px) {
    .product-card .product-bottom .add-to-cart span img {
        width: 22px
    }
}

@media(max-width: 450px) {
    .product-card .product-bottom .add-to-cart span {
        width  : 36px;
        height : 36px;
        padding: 5px
    }
}

.product-card .product-action-wrap {
    position  : absolute;
    bottom    : 0px;
    width     : 100%;
    text-align: center;
    opacity   : 0;
    visibility: hidden;
    transition: all .5s ease-in-out
}

.product-card .product-action-wrap .product-action a {
    display      : inline-block;
    width        : 40px;
    height       : 40px;
    line-height  : 40px;
    background   : #134464;
    color        : #fff;
    text-align   : center;
    border-radius: 50%;
    margin       : 0 3px
}

.product-card .type {
    position        : absolute;
    top             : 20px;
    right           : 20px;
    background-color: #023350;
    color           : #fff;
    padding         : 3px 10px;
    border-radius   : 20px;
    font-size       : 14px
}

@media(max-width: 450px) {
    .product-card .type {
        font-size: 10px;
        padding  : 3px 5px;
        top      : 0;
        right    : 0
    }
}

.product-card:hover .product-action-wrap {
    opacity   : 1;
    visibility: visible;
    bottom    : 10px
}

.product-card::before {
    content      : "";
    position     : absolute;
    height       : 80%;
    left         : 0;
    right        : 0;
    bottom       : -50px;
    background   : rgba(3, 162, 151, .0784313725);
    border-radius: 20px;
    transition   : all .3s ease-in-out;
    transform    : skewY(15deg);
    z-index      : -1
}

.product-card:hover::before {
    height: 100%
}

@media(max-width: 1150px) {
    .product-card {
        padding: 10px
    }
}

.feature-area .feature-wrap {
    padding         : 20px;
    border-radius   : 20px;
    background-color: #134464;
    color           : #fff;
    display         : flex;
    gap             : 20px
}

.feature-area .feature-wrap .feature-item {
    flex       : 1;
    display    : flex;
    align-items: center;
    gap        : 20px
}

.feature-area .feature-wrap .feature-item:not(:last-child) {
    border-right: 1px solid #afafaf
}

.feature-area .feature-wrap .feature-item .icon-box {
    width        : 65px;
    height       : 65px;
    line-height  : 60px;
    background   : #75aacd;
    color        : #fff;
    font-size    : 30px;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    text-align   : center;
    position     : relative
}

.feature-area .feature-wrap .feature-item .icon-box::before {
    content      : "";
    position     : absolute;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    width        : 65px;
    height       : 65px;
    top          : -5px;
    left         : -5px;
    border       : 2px solid #75aacd
}

.feature-area .feature-wrap .feature-item .feature-content h4 {
    font-size  : 20px;
    font-weight: 400
}

.feature-area .feature-wrap .feature-item .feature-content span {
    color: #b6b9bf
}

.popular-items {
    padding: 100px 0
}

.popular-items .popular-warp {
    display: flex;
    gap    : 30px
}

.popular-items .popular-warp .main-popular-items {
    width: 75%
}

.popular-items .popular-warp .main-popular-items .popular-item-list {
    margin-top: 30px
}

.popular-items .popular-warp .main-popular-items .popular-item-list ul {
    display: flex;
    gap    : 20px
}

.popular-items .popular-warp .main-popular-items .popular-item-list ul li {
    text-align      : center;
    padding         : 10px 10px;
    border-radius   : 20px;
    background-color: #75aacd;
    color           : #fff;
    cursor          : pointer;
    transition      : all .3s linear
}

.popular-items .popular-warp .main-popular-items .popular-item-list ul li:hover {
    background-color: #134464
}

.popular-items .popular-warp .main-popular-items .popular-item-list ul .active-tab {
    background-color: #134464
}

.popular-items .popular-warp .main-popular-items .popular-item-list {
    display: flex;
    gap    : 20px
}

.popular-items .popular-warp .main-popular-items .popular-item-list .item {
    flex: 1
}

.popular-items .popular-warp .popular-banner {
    width        : 25%;
    overflow     : hidden;
    border-radius: 20px;
    display      : flex
}

.popular-items .popular-warp .popular-banner a {
    display: flex
}

.popular-items .popular-warp .popular-banner a img {
    transition: all .3s ease-in-out
}

.popular-items .popular-warp .popular-banner:hover img {
    transform: scale(1.04)
}

.happy-customer {
    padding              : 50px 0px 0px;
    background           : linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../upload/banner/happy-banner.jpg);
    background-attachment: fixed;
    background-position  : center;
    background-size      : cover
}

.happy-customer .main-happy-customer {
    display    : flex;
    align-items: center
}

.happy-customer .main-happy-customer .happy-customer-content {
    width         : 60%;
    display       : flex;
    flex-direction: column;
    gap           : 20px
}

.happy-customer .main-happy-customer .happy-customer-content p {
    color: #fff
}

.happy-customer .main-happy-customer .happy-customer-content .customer-list {
    display   : flex;
    gap       : 20px;
    margin-top: 30px
}

.happy-customer .main-happy-customer .happy-customer-content .customer-list .item {
    flex      : 1;
    padding   : 0px 0px;
    text-align: center
}

.happy-customer .main-happy-customer .happy-customer-content .customer-list .item .item-number {
    font-size  : 45px;
    font-weight: 700;
    color      : #fff
}

@media(max-width: 768px) {
    .happy-customer .main-happy-customer .happy-customer-content .customer-list .item .item-number {
        font-size: 32px
    }
}

.happy-customer .main-happy-customer .happy-customer-content .customer-list .item .item-content h4 {
    color      : #fff;
    font-size  : 18px;
    font-weight: 500
}

@media(max-width: 768px) {
    .happy-customer .main-happy-customer .happy-customer-content .customer-list .item .item-content h4 {
        font-size: 14px
    }
}

.happy-customer .main-happy-customer .happy-customer-content .customer-list .item:not(:last-child) {
    border-right: 1px solid #afafaf
}

.happy-customer .main-happy-customer .happy-customer-img {
    width          : 40%;
    display        : flex;
    justify-content: end
}

.happy-customer .main-happy-customer .happy-customer-img img {
    max-width: 340px
}

.happy-customer .main-happy-customer .section-title {
    color: #fff
}

.happy-customer .main-happy-customer .section-title::after {
    background-color: #fff
}

@media(max-width: 768px) {
    .happy-customer .main-happy-customer {
        flex-direction: column
    }

    .happy-customer .main-happy-customer .happy-customer-content {
        width: 100%
    }
}

.selling-brand {
    padding: 50px 0
}

.selling-brand .brand-icon {
    margin-top: 40px
}

.selling-brand .brand-icon .item {
    display        : flex;
    justify-content: center;
    box-shadow     : 0 0 12px rgba(204, 204, 204, .4196078431);
    margin         : 10px;
    padding        : 20px
}

.selling-brand .brand-icon img {
    width: 100px
}

.blog-section {
    padding: 100px 0 50px
}

.blog-section .main-blog-section {
    margin-top           : 50px;
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap             : 20px;
    align-items          : stretch
}

.blog-section .main-blog-section .blog-card {
    overflow     : hidden;
    box-shadow   : 2px 2px 12px rgba(175, 175, 175, .2784313725);
    border-radius: 10px;
    background   : #fff
}

.blog-section .main-blog-section .blog-card img {
    transition: all .4s linear
}

.blog-section .main-blog-section .blog-card .blog-img {
    display : flex;
    overflow: hidden
}

.blog-section .main-blog-section .blog-card .blog-content {
    padding       : 15px 20px;
    display       : flex;
    flex-direction: column;
    gap           : 8px;
    color         : #3a3a3a
}

.blog-section .main-blog-section .blog-card .blog-content h5 {
    font-size: 16px
}

.blog-section .main-blog-section .blog-card .blog-content p {
    font-size: 14px
}

@media(max-width: 1150px) {
    .blog-section .main-blog-section .blog-card .blog-content {
        padding: 12px 10px
    }
}

@media(max-width: 992px) {
    .blog-section .main-blog-section .blog-card .blog-content h5 {
        font-size: 14px
    }
}

.blog-section .main-blog-section .blog-card:hover img {
    transform: scale(1.05)
}

@media(max-width: 1150px) {
    .blog-section .main-blog-section {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
    }
}

@media(max-width: 992px) {
    .blog-section .main-blog-section {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    }
}

footer .top-footer {
    padding         : 50px 0px;
    background-color: #f7f8fa
}

footer .top-footer .main-top-footer {
    display: flex;
    gap    : 20px
}

footer .top-footer .main-top-footer .footer-logo img {
    width: 200px
}

footer .top-footer .main-top-footer h5 {
    font-size    : 20px;
    margin-bottom: 15px
}

footer .top-footer .main-top-footer .col {
    width: 25%
}

footer .top-footer .main-top-footer .col ul {
    display       : flex;
    flex-direction: column;
    gap           : 8px
}

footer .top-footer .main-top-footer .col a {
    color      : dimgray;
    line-height: 1.8;
    font-size  : 15px
}

footer .top-footer .main-top-footer .col a:hover {
    color: #023350
}

@media(max-width: 992px) {
    footer .top-footer .main-top-footer .col a {
        font-size: 14px
    }
}

footer .top-footer .main-top-footer ul.social-media {
    display       : flex;
    gap           : 20px;
    flex-direction: row;
    margin-top    : 10px
}

footer .top-footer .main-top-footer ul.social-media a {
    font-size: 20px
}

footer .top-footer .main-top-footer .newslatter {
    width: 25%
}

footer .top-footer .main-top-footer .newslatter p {
    color      : dimgray;
    line-height: 1.8;
    font-size  : 15px
}

@media(max-width: 992px) {
    footer .top-footer .main-top-footer .newslatter p {
        font-size: 14px
    }
}

@media(max-width: 992px) {
    footer .top-footer .main-top-footer h5 {
        font-size: 16px
    }
}

@media(max-width: 768px) {
    footer .top-footer .main-top-footer {
        flex-wrap: wrap
    }

    footer .top-footer .main-top-footer .col {
        width: 48%
    }

    footer .top-footer .main-top-footer .newslatter {
        width: 48%
    }
}

@media(max-width: 768px) {
    footer .top-footer .main-top-footer {
        flex-direction: column-reverse
    }

    footer .top-footer .main-top-footer .col {
        width: 100%
    }

    footer .top-footer .main-top-footer .newslatter {
        width: 100%
    }
}

footer .top-footer .newslatter-form {
    margin-top    : 15px;
    display       : flex;
    flex-direction: column;
    gap           : 10px
}

footer .top-footer .newslatter-form input {
    display      : block;
    width        : 100%;
    padding      : 15px;
    font-family  : poppins;
    border       : 1px solid #ccc;
    border-radius: 5px
}

@media(max-width: 992px) {
    footer .top-footer .newslatter-form input {
        padding: 5px
    }
}

footer .top-footer .newslatter-form input[type=submit] {
    background-color: #2a96ff;
    border          : none;
    font-size       : 16px;
    color           : #fff
}

footer .bottom-footer {
    padding         : 8px 0;
    background-color: #023350
}

footer .bottom-footer .main-bottom-footer {
    color     : #e7e7e7;
    text-align: center;
    font-size : 12px
}

footer .bottom-footer .main-bottom-footer a {
    color: #e7e7e7
}

footer .bottom-footer .main-bottom-footer img {
    width     : 100px;
    margin-top: 10px
}

.login-page .auth-section {
    padding   : 60px 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%)
}

.login-page .auth-tabs {
    display        : flex;
    justify-content: center;
    margin-bottom  : 30px
}

.login-page .tab-btn {
    padding    : 12px 40px;
    background : rgba(0, 0, 0, 0);
    border     : none;
    cursor     : pointer;
    font-weight: 600;
    color      : #6b7280;
    font-size  : 18px;
    position   : relative;
    transition : all .3s ease
}

.login-page .tab-btn.active {
    color: #0056b3
}

.login-page .tab-btn.active::after {
    content      : "";
    position     : absolute;
    bottom       : -8px;
    left         : 50%;
    transform    : translateX(-50%);
    width        : 30px;
    height       : 3px;
    background   : #0056b3;
    border-radius: 3px
}

.login-page .auth-form {
    display      : none;
    max-width    : 450px;
    margin       : 0 auto;
    padding      : 40px;
    background   : #fff;
    border-radius: 12px;
    box-shadow   : 0 10px 25px rgba(0, 0, 0, .08)
}

@media(max-width: 500px) {
    .login-page .auth-form {
        padding: 20px
    }
}

.login-page .auth-form.active {
    display  : block;
    animation: fadeIn .4s ease
}

@keyframes fadeIn {
    from {
        opacity  : 0;
        transform: translateY(10px)
    }

    to {
        opacity  : 1;
        transform: translateY(0)
    }
}

.login-page .form-group {
    margin-bottom: 20px
}

.login-page .form-group label {
    display      : block;
    margin-bottom: 8px;
    font-weight  : 500;
    color        : #374151;
    font-size    : 14px
}

.login-page .form-group input {
    width        : 100%;
    padding      : 14px 16px;
    border       : 1px solid #e5e7eb;
    border-radius: 8px;
    font-size    : 15px;
    transition   : border .3s
}

.login-page .form-group input:focus {
    outline     : none;
    border-color: #0056b3;
    box-shadow  : 0 0 0 3px rgba(0, 86, 179, .1)
}

.login-page .btn-primary {
    background   : #0056b3;
    color        : #fff;
    padding      : 14px;
    border       : none;
    border-radius: 8px;
    cursor       : pointer;
    width        : 100%;
    font-weight  : 600;
    font-size    : 16px;
    transition   : background .3s
}

.login-page .btn-primary:hover {
    background: #004494
}

.login-page .forgot-link {
    display        : block;
    text-align     : center;
    margin-top     : 15px;
    color          : #6b7280;
    text-decoration: none;
    font-size      : 14px;
    transition     : color .3s
}

.login-page .forgot-link:hover {
    color: #0056b3
}

.login-page .auth-section::before {
    content   : "";
    position  : absolute;
    top       : 0;
    left      : 0;
    right     : 0;
    height    : 4px;
    background: linear-gradient(90deg, #0056b3 0%, #00b3ad 100%)
}

.login-page .password-group {
    position: relative
}

.login-page .password-wrapper {
    position: relative
}

.login-page .toggle-password {
    position           : absolute;
    right              : 15px;
    top                : 50%;
    transform          : translateY(-50%);
    cursor             : pointer;
    -webkit-user-select: none;
    -moz-user-select   : none;
    user-select        : none;
    opacity            : .7;
    transition         : opacity .3s
}

.login-page .toggle-password:hover {
    opacity: 1
}

.login-page .eye-icon {
    font-style: normal;
    font-size : 18px
}

.login-page .modal {
    display                : none;
    position               : fixed;
    z-index                : 100;
    left                   : 0;
    top                    : 0;
    width                  : 100%;
    height                 : 100%;
    background             : rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter        : blur(4px)
}

.login-page .modal-content {
    background   : #fff;
    margin       : 10% auto;
    padding      : 40px;
    border-radius: 12px;
    max-width    : 500px;
    position     : relative;
    animation    : modalFadeIn .3s;
    box-shadow   : 0 10px 30px rgba(0, 86, 179, .2)
}

@keyframes modalFadeIn {
    from {
        opacity  : 0;
        transform: translateY(-20px)
    }

    to {
        opacity  : 1;
        transform: translateY(0)
    }
}

.login-page .close-modal {
    position  : absolute;
    right     : 25px;
    top       : 25px;
    font-size : 28px;
    cursor    : pointer;
    color     : #64748b;
    transition: color .3s
}

.login-page .close-modal:hover {
    color: #0056b3
}

.login-page .success-message {
    text-align: center;
    padding   : 20px
}

.login-page .success-icon {
    display      : inline-block;
    background   : #10b981;
    color        : #fff;
    width        : 50px;
    height       : 50px;
    border-radius: 50%;
    font-size    : 28px;
    line-height  : 50px;
    margin-bottom: 20px
}

.login-page .forgot-link {
    display        : block;
    text-align     : center;
    margin-top     : 15px;
    color          : #0056b3;
    text-decoration: none;
    font-size      : 14px;
    transition     : all .3s
}

.login-page .forgot-link:hover {
    text-decoration: underline
}

.login-page .or-separator {
    text-align: center;
    margin    : 20px 0
}

.login-page .or-separator span {
    background: #fff;
    padding   : 0 10px;
    color     : #666
}

.login-page .google-btn {
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : #fff;
    color          : #444;
    border         : 1px solid #ccc;
    padding        : 10px;
    border-radius  : 4px;
    text-decoration: none;
    font-weight    : bold;
    transition     : background .3s
}

.login-page .google-btn:hover {
    background: #f5f5f5
}

.login-page .google-btn img {
    width       : 20px;
    height      : 20px;
    margin-right: 10px
}

.cart-page {
    padding   : 40px 0;
    background: #f9f9f9
}

.cart-page .cart-container {
    display              : grid;
    grid-template-columns: 1fr;
    gap                  : 30px
}

@media(min-width: 992px) {
    .cart-page .cart-container {
        grid-template-columns: 2fr 1fr
    }
}

.cart-page .cart-item {
    display       : flex;
    flex-direction: column;
    background    : #fff;
    padding       : 20px;
    border-radius : 8px;
    box-shadow    : 0 2px 10px rgba(0, 0, 0, .05)
}

.cart-page .cart-item .item {
    display      : flex;
    align-items  : center;
    gap          : 20px;
    padding      : 20px 0px;
    border-bottom: 1px solid #ededed
}

.cart-page .product-meta {
    display  : flex;
    flex-wrap: wrap
}

.cart-page .product-meta .item-meta {
    padding: 5px 10px;
    display: flex;
    gap    : 10px
}

.cart-page .product-meta .item-meta:not(:last-child) {
    border-right: 1px solid #ccc
}

.cart-page .item-image {
    width : 120px;
    height: 120px;
    border: 1px solid #eee
}

.cart-page .item-image img {
    width        : 100%;
    height       : 100%;
    -o-object-fit: cover;
    object-fit   : cover
}

.cart-page .item-details {
    flex: 1
}

.cart-page .item-details h3 {
    margin   : 0 0 8px 0;
    font-size: 16px;
    color    : #333
}

.cart-page .item-meta {
    color    : #666;
    font-size: 14px;
    margin   : 0 0 8px 0
}

.cart-page .stock-status {
    color        : #28a745;
    font-weight  : 500;
    font-size    : 14px;
    margin-bottom: 15px
}

.cart-page .price-quantity {
    display        : flex;
    justify-content: space-between;
    align-items    : center
}

.cart-page .price {
    font-weight: bold;
    font-size  : 16px
}

.cart-page .quantity-control {
    display    : flex;
    align-items: center
}

.cart-page .item-quantity {
    display    : flex;
    align-items: center;
    gap        : 10px
}

.cart-page .item-quantity .delete-item {
    width           : 40px;
    height          : 40px;
    display         : grid;
    place-items     : center;
    border-radius   : 50%;
    background-color: #ffe5e5;
    color           : #fa5d5d;
    cursor          : pointer
}

.cart-page .qty-btn {
    width     : 30px;
    height    : 30px;
    background: #f1f1f1;
    border    : none;
    font-size : 16px;
    cursor    : pointer
}

.cart-page .qty-input {
    width     : 40px;
    height    : 30px;
    text-align: center;
    border    : 1px solid #ddd;
    margin    : 0 5px
}

.cart-page .order-summary {
    background   : #fff;
    padding      : 20px;
    border-radius: 8px;
    box-shadow   : 0 2px 10px rgba(0, 0, 0, .05);
    height       : -moz-max-content;
    height       : max-content
}

.cart-page .order-summary h3 {
    margin-top    : 0;
    padding-bottom: 15px;
    border-bottom : 1px solid #eee;
    margin-bottom : 20px
}

.cart-page .summary-row {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 12px;
    font-size      : 14px
}

.cart-page .total-row {
    display        : flex;
    justify-content: space-between;
    margin         : 20px 0;
    padding-top    : 15px;
    border-top     : 1px solid #eee;
    font-weight    : bold
}

.cart-page .promo-code {
    display: flex;
    margin : 15px 0
}

.cart-page .promo-code input {
    flex         : 1;
    padding      : 10px;
    border       : 1px solid #ddd;
    border-radius: 4px 0 0 4px
}

.cart-page .apply-btn {
    padding      : 0 15px;
    background   : #0056b3;
    color        : #fff;
    border       : none;
    border-radius: 0 4px 4px 0;
    cursor       : pointer
}

.cart-page .payment-option {
    font-size : 13px;
    color     : #666;
    text-align: center;
    margin    : 15px 0
}

.cart-page .free-shipping-msg {
    background   : #fff8e1;
    padding      : 10px;
    border-radius: 4px;
    text-align   : center;
    margin       : 15px 0;
    font-size    : 14px
}

.cart-page .checkout-btn {
    width        : 100%;
    padding      : 12px;
    background   : #0056b3;
    color        : #fff;
    border       : none;
    border-radius: 4px;
    font-weight  : bold;
    cursor       : pointer;
    transition   : background .3s
}

.cart-page .checkout-btn:hover {
    background: #004494
}

.cart-sidebar {
    position      : fixed;
    top           : 0;
    right         : -420px;
    width         : 380px;
    height        : 100vh;
    background    : #fff;
    box-shadow    : -5px 0 25px rgba(0, 0, 0, .1);
    z-index       : 1000;
    transition    : right .4s cubic-bezier(0.22, 1, 0.36, 1);
    display       : flex;
    flex-direction: column
}

.cart-sidebar .sidebar-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 20px;
    border-bottom  : 1px solid #f0f4f8
}

.cart-sidebar .sidebar-header h3 {
    margin   : 0;
    color    : #1a365d;
    font-size: 18px
}

.cart-sidebar .close-sidebar {
    background: none;
    border    : none;
    padding   : 5px;
    cursor    : pointer;
    opacity   : .7;
    transition: opacity .2s
}

.cart-sidebar .close-sidebar:hover {
    opacity: 1
}

.cart-sidebar .close-sidebar svg {
    fill: #64748b
}

.cart-sidebar .cart-items {
    flex      : 1;
    overflow-y: auto;
    padding   : 15px
}

.cart-sidebar .sidebar-item {
    display      : flex;
    gap          : 15px;
    padding      : 15px;
    margin-bottom: 10px;
    background   : #f8fafc;
    border-radius: 8px;
    position     : relative;
    transition   : transform .3s
}

.cart-sidebar .sidebar-item:hover {
    transform : translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05)
}

.cart-sidebar .item-image {
    width        : 80px;
    height       : 80px;
    border-radius: 4px;
    overflow     : hidden;
    border       : 1px solid #e2e8f0;
    flex-shrink  : 0
}

.cart-sidebar .item-image img {
    width        : 100%;
    height       : 100%;
    -o-object-fit: cover;
    object-fit   : cover
}

.cart-sidebar .item-details {
    flex: 1
}

.cart-sidebar .item-details h4 {
    margin   : 0 0 5px 0;
    font-size: 13px;
    color    : #1e293b
}

.cart-sidebar .item-meta {
    margin   : 0 0 10px 0;
    color    : #64748b;
    font-size: 12px
}

.cart-sidebar .item-controls {
    display        : flex;
    justify-content: space-between;
    align-items    : center
}

.cart-sidebar .qty-control {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    background   : #fff;
    border-radius: 20px;
    padding      : 3px 10px;
    border       : 1px solid #e2e8f0
}

.cart-sidebar .qty-btn {
    background : none;
    border     : none;
    font-size  : 16px;
    cursor     : pointer;
    color      : #0056b3;
    padding    : 0 5px;
    line-height: 1
}

.cart-sidebar .qty {
    font-size : 14px;
    min-width : 20px;
    text-align: center
}

.cart-sidebar .item-price {
    font-weight: 600;
    color      : #1a365d
}

.cart-sidebar .delete-item {
    position       : absolute;
    top            : 10px;
    right          : 10px;
    background     : none;
    border         : none;
    width          : 24px;
    height         : 24px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
    opacity        : .5;
    transition     : opacity .2s
}

.cart-sidebar .delete-item:hover {
    opacity: 1
}

.cart-sidebar .delete-item svg {
    fill: #e63946
}

.cart-sidebar .sidebar-footer {
    padding   : 20px;
    border-top: 1px solid #f0f4f8;
    background: #fff
}

.cart-sidebar .summary-row {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 10px;
    font-size      : 14px;
    color          : #475569
}

.cart-sidebar .total-row {
    display        : flex;
    justify-content: space-between;
    margin         : 15px 0;
    padding-top    : 15px;
    border-top     : 1px solid #f0f4f8;
    font-weight    : 600;
    color          : #1e293b
}

.cart-sidebar .checkout-btn {
    width        : 100%;
    padding      : 14px;
    background   : #0056b3;
    color        : #fff;
    border       : none;
    border-radius: 6px;
    font-weight  : 600;
    cursor       : pointer;
    margin-bottom: 15px;
    transition   : background .3s
}

.cart-sidebar .checkout-btn:hover {
    background: #004494
}

.cart-sidebar .view-cart {
    display        : block;
    text-align     : center;
    color          : #0056b3;
    text-decoration: none;
    font-size      : 14px;
    transition     : color .2s
}

.cart-sidebar .view-cart:hover {
    text-decoration: underline
}

.cart-sidebar .sidebar-overlay {
    position               : fixed;
    top                    : 0;
    left                   : 0;
    width                  : 100%;
    height                 : 100%;
    background             : rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter        : blur(4px);
    z-index                : 999;
    opacity                : 0;
    visibility             : hidden;
    transition             : opacity .3s, visibility .3s
}

.sidebar-active .cart-sidebar {
    right: 0
}

.sidebar-active .sidebar-overlay {
    opacity   : 1;
    visibility: visible
}

@media(max-width: 480px) {
    .cart-sidebar {
        width: 90%;
        right: -100%
    }
}

.wishlist-page {
    padding   : 40px 0;
    background: #f8fafc
}

.wishlist-page .wishlist-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 30px
}

.wishlist-page .wishlist-header h3 {
    font-size: 24px;
    color    : #1e293b;
    margin   : 0
}

.wishlist-page .wishlist-actions {
    display: flex;
    gap    : 15px
}

.wishlist-page .wishlist-actions button {
    padding      : 8px 16px;
    border-radius: 6px;
    font-size    : 14px;
    cursor       : pointer;
    display      : flex;
    align-items  : center;
    gap          : 6px
}

.wishlist-page .share-wishlist {
    background: #fff;
    border    : 1px solid #e2e8f0;
    color     : #334155;
    transition: all .3s
}

.wishlist-page .share-wishlist:hover {
    background  : #f1f5f9;
    border-color: #cbd5e1
}

.wishlist-page .share-wishlist svg {
    fill: #64748b
}

.wishlist-page .clear-all {
    background : none;
    border     : none;
    color      : #e63946;
    font-weight: 500
}

.wishlist-page .clear-all:hover {
    text-decoration: underline
}

.wishlist-page .wishlist-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap                  : 20px
}

.wishlist-page .wishlist-item {
    background    : #fff;
    border-radius : 10px;
    overflow      : hidden;
    box-shadow    : 0 2px 10px rgba(0, 0, 0, .05);
    transition    : transform .3s, box-shadow .3s;
    display       : flex;
    flex-direction: column
}

.wishlist-page .wishlist-item:hover {
    transform : translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1)
}

.wishlist-page .product-image {
    position: relative;
    height  : 200px;
    overflow: hidden
}

.wishlist-page .product-image img {
    width        : 100%;
    height       : 100%;
    -o-object-fit: contain;
    object-fit   : contain;
    transition   : transform .5s
}

.wishlist-page .wishlist-item:hover .product-image img {
    transform: scale(1.05)
}

.wishlist-page .remove-item {
    position       : absolute;
    top            : 10px;
    right          : 10px;
    width          : 30px;
    height         : 30px;
    background     : #134464;
    border-radius  : 50%;
    border         : none;
    display        : flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
    opacity        : 0;
    transition     : opacity .3s
}

.wishlist-page .wishlist-item:hover .remove-item {
    opacity: 1
}

.wishlist-page .remove-item svg {
    fill: #fff
}

.wishlist-page .product-details {
    padding: 20px;
    flex   : 1
}

.wishlist-page .product-details h3 {
    margin   : 0 0 8px 0;
    font-size: 16px;
    color    : #1e293b
}

.wishlist-page .product-sku {
    margin   : 0 0 12px 0;
    font-size: 13px;
    color    : #64748b
}

.wishlist-page .price-stock {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-top     : 15px
}

.wishlist-page .price {
    font-weight: 600;
    color      : #1e293b;
    font-size  : 18px
}

.wishlist-page .in-stock {
    color      : #16a34a;
    font-size  : 13px;
    font-weight: 500
}

.wishlist-page .out-of-stock {
    color      : #dc2626;
    font-size  : 13px;
    font-weight: 500
}

.wishlist-page .product-actions {
    display   : flex;
    border-top: 1px solid #f1f5f9;
    padding   : 15px 20px;
    gap       : 10px
}

.wishlist-page .product-actions button {
    flex         : 1;
    padding      : 10px;
    border-radius: 6px;
    font-size    : 14px;
    cursor       : pointer;
    transition   : all .3s
}

.wishlist-page .add-to-cart {
    background: #0056b3;
    color     : #fff;
    border    : none
}

.wishlist-page .add-to-cart:hover {
    background: #004494
}

.wishlist-page .add-to-cart:disabled {
    background: #94a3b8;
    cursor    : not-allowed
}

.wishlist-page .view-details {
    background: #fff;
    border    : 1px solid #cbd5e1;
    color     : #334155
}

.wishlist-page .view-details:hover {
    border-color: #94a3b8
}

.wishlist-page .empty-wishlist {
    text-align   : center;
    padding      : 60px 20px;
    background   : #fff;
    border-radius: 10px;
    box-shadow   : 0 2px 10px rgba(0, 0, 0, .05)
}

.wishlist-page .empty-wishlist svg {
    fill         : #cbd5e1;
    margin-bottom: 20px
}

.wishlist-page .empty-wishlist h3 {
    color        : #334155;
    margin-bottom: 10px
}

.wishlist-page .empty-wishlist p {
    color        : #64748b;
    margin-bottom: 20px
}

.wishlist-page .browse-btn {
    display        : inline-block;
    padding        : 12px 24px;
    background     : #0056b3;
    color          : #fff;
    border-radius  : 6px;
    text-decoration: none;
    font-weight    : 500;
    transition     : background .3s
}

.wishlist-page .browse-btn:hover {
    background: #004494
}

@media(max-width: 768px) {
    .wishlist-page .wishlist-header {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 15px
    }

    .wishlist-page .wishlist-grid {
        grid-template-columns: 1fr
    }
}

.checkout-page {
    padding   : 40px 0 60px;
    background: #f8fafc
}

.checkout-page .checkout-progress {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 40px;
    position       : relative
}

.checkout-page .checkout-progress::before {
    content   : "";
    position  : absolute;
    top       : 15px;
    left      : 0;
    right     : 0;
    height    : 2px;
    background: #e2e8f0;
    z-index   : 1
}

.checkout-page .step {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    position      : relative;
    z-index       : 2
}

.checkout-page .step span {
    width          : 30px;
    height         : 30px;
    background     : #e2e8f0;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #64748b;
    font-weight    : 600;
    margin-bottom  : 8px;
    border         : 2px solid #fff
}

.checkout-page .step p {
    font-size  : 14px;
    color      : #64748b;
    font-weight: 500
}

.checkout-page .step.active span {
    background: #0056b3;
    color     : #fff
}

.checkout-page .step.active p {
    color: #1e293b
}

.checkout-page .step.completed span {
    background: #16a34a;
    color     : #fff
}

.checkout-page .checkout-grid {
    display              : grid;
    grid-template-columns: 1fr;
    gap                  : 30px
}

@media(min-width: 992px) {
    .checkout-page .checkout-grid {
        grid-template-columns: 2fr 1fr
    }
}

.checkout-page .checkout-forms {
    background   : #fff;
    border-radius: 10px;
    padding      : 30px;
    box-shadow   : 0 2px 10px rgba(0, 0, 0, .05)
}

.checkout-page .checkout-form {
    display: none
}

.checkout-page .checkout-form.active {
    display: block
}

.checkout-page .checkout-form h2 {
    margin-top   : 0;
    margin-bottom: 25px;
    font-size    : 22px;
    color        : #1e293b
}

.checkout-page .form-row {
    display              : grid;
    grid-template-columns: 1fr;
    gap                  : 20px;
    margin-bottom        : 20px
}

@media(min-width: 768px) {
    .checkout-page .form-row {
        grid-template-columns: repeat(2, 1fr)
    }

    .checkout-page .form-row-3 {
        grid-template-columns: repeat(3, 1fr)
    }
}

.checkout-page .form-group label {
    display      : block;
    margin-bottom: 8px;
    font-size    : 14px;
    color        : #334155;
    font-weight  : 500
}

.checkout-page .form-group input,
.checkout-page .form-group select,
.checkout-page .form-group textarea {
    width        : 100%;
    padding      : 12px 15px;
    border       : 1px solid #e2e8f0;
    border-radius: 6px;
    font-size    : 15px;
    transition   : border .3s
}

.checkout-page .form-group input:focus,
.checkout-page .form-group select:focus,
.checkout-page .form-group textarea:focus {
    outline     : none;
    border-color: #0056b3;
    box-shadow  : 0 0 0 3px rgba(0, 86, 179, .1)
}

.checkout-page .radio-group {
    border       : 1px solid #e2e8f0;
    border-radius: 6px;
    overflow     : hidden
}

.checkout-page .radio-option {
    display      : block;
    padding      : 15px;
    border-bottom: 1px solid #f1f5f9;
    cursor       : pointer
}

.checkout-page .radio-option:last-child {
    border-bottom: none
}

.checkout-page .radio-option input {
    display: none
}

.checkout-page .radio-content {
    display        : flex;
    justify-content: space-between;
    align-items    : center
}

.checkout-page .radio-option input:checked+.radio-content {
    color: #0056b3
}

.checkout-page .radio-content span:first-child {
    font-weight: 500
}

.checkout-page .radio-content small {
    color    : #64748b;
    font-size: 13px
}

.checkout-page .radio-content .price {
    font-weight: 600
}

.checkout-page .payment-tabs {
    display      : flex;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px
}

.checkout-page .tab-btn {
    padding      : 12px 20px;
    background   : none;
    border       : none;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    font-weight  : 500;
    color        : #64748b;
    cursor       : pointer
}

.checkout-page .tab-btn.active {
    color              : #0056b3;
    border-bottom-color: #0056b3
}

.checkout-page .payment-content {
    display: none
}

.checkout-page .payment-content.active {
    display: block
}

.checkout-page .card-input {
    position: relative
}

.checkout-page .card-input input {
    padding-right: 80px
}

.checkout-page .card-icons {
    position : absolute;
    right    : 15px;
    top      : 50%;
    transform: translateY(-50%);
    display  : flex;
    gap      : 8px
}

.checkout-page .card-icons img {
    height: 20px;
    width : auto
}

.checkout-page .paypal-info {
    text-align: center;
    padding   : 20px 0
}

.checkout-page .paypal-logo {
    height    : 40px;
    margin-top: 15px
}

.checkout-page .review-section {
    margin-bottom : 25px;
    padding-bottom: 20px;
    border-bottom : 1px solid #f1f5f9
}

.checkout-page .review-section h3 {
    font-size    : 16px;
    margin-bottom: 15px;
    color        : #334155
}

.checkout-page .review-info {
    background    : #f8fafc;
    padding       : 15px;
    border-radius : 6px;
    margin-bottom : 10px;
    line-height   : 1.6;
    font-size     : 14px;
    display       : flex;
    flex-direction: column;
    gap           : 8px
}

.checkout-page .review-info p span {
    color: #646464
}

.checkout-page .order-items {
    margin-bottom: 20px
}

.checkout-page .order-item {
    display       : flex;
    margin-bottom : 15px;
    padding-bottom: 15px;
    border-bottom : 1px solid #f1f5f9
}

.checkout-page .order-item:last-child {
    border-bottom : none;
    margin-bottom : 0;
    padding-bottom: 0
}

.checkout-page .item-details {
    width: 70%
}

.checkout-page .item-name {
    display      : block;
    font-weight  : 500;
    margin-bottom: 5px;
    font-size    : 14px
}

.checkout-page .item-qty {
    font-size: 13px;
    color    : #64748b
}

.checkout-page .item-price {
    font-weight: 600;
    width      : 30%;
    text-align : end
}

.checkout-page .review-totals {
    margin: 25px 0
}

.checkout-page .total-row {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 12px;
    font-size      : 15px
}

.checkout-page .total-row.grand-total {
    font-size  : 18px;
    font-weight: 600;
    margin-top : 20px;
    padding-top: 15px;
    border-top : 1px solid #e2e8f0
}

.checkout-page .checkbox-label {
    display    : flex !important;
    align-items: flex-start;
    cursor     : pointer;
    font-size  : 14px;
    line-height: 1.5
}

.checkout-page .checkbox-label input {
    margin-right: 10px;
    margin-top  : 3px;
    width       : auto
}

.checkout-page .checkbox-label a {
    color          : #0056b3;
    text-decoration: underline
}

.checkout-page .form-actions {
    display        : flex;
    justify-content: space-between;
    margin-top     : 30px
}

.checkout-page .btn-prev,
.checkout-page .btn-next,
.checkout-page .btn-submit {
    padding      : 12px 25px;
    border-radius: 6px;
    font-weight  : 500;
    cursor       : pointer;
    transition   : all .3s
}

.checkout-page .btn-prev {
    background: #fff;
    border    : 1px solid #cbd5e1;
    color     : #334155
}

.checkout-page .btn-prev:hover {
    background: #f1f5f9
}

.checkout-page .btn-next,
.checkout-page .btn-submit {
    background: #0056b3;
    color     : #fff;
    border    : none
}

.checkout-page .btn-next:hover,
.checkout-page .btn-submit:hover {
    background: #004494
}

.checkout-page .order-summary {
    background   : #fff;
    border-radius: 10px;
    padding      : 25px;
    box-shadow   : 0 2px 10px rgba(0, 0, 0, .05);
    align-self   : flex-start;
    position     : sticky;
    top          : 20px
}

.checkout-page .order-summary h2 {
    margin-top   : 0;
    margin-bottom: 20px;
    font-size    : 20px;
    color        : #1e293b
}

.checkout-page .order-item {
    display      : flex;
    margin-bottom: 15px
}

.checkout-page .item-image {
    width        : 60px;
    height       : 60px;
    border-radius: 4px;
    overflow     : hidden;
    margin-right : 15px;
    border       : 1px solid #e2e8f0
}

.checkout-page .item-image img {
    width        : 100%;
    height       : 100%;
    -o-object-fit: cover;
    object-fit   : cover
}

.checkout-page .item-details h4 {
    margin   : 0 0 5px 0;
    font-size: 13px
}

.checkout-page .item-details p {
    margin   : 0 0 8px 0;
    font-size: 13px;
    color    : #64748b
}

.checkout-page .item-price-qty {
    display        : flex;
    justify-content: space-between
}

.checkout-page .summary-totals {
    margin       : 20px 0;
    padding      : 20px 0;
    border-top   : 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9
}

.checkout-page .secure-checkout {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    color          : #16a34a;
    font-size      : 14px;
    font-weight    : 500;
    margin-top     : 20px
}

.checkout-page .secure-checkout svg {
    fill: #16a34a
}

.checkout-page .checkout-modal {
    position       : fixed;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    background     : rgba(0, 0, 0, .5);
    display        : none;
    align-items    : center;
    justify-content: center;
    z-index        : 1000
}

.checkout-page .modal-content {
    background   : #fff;
    border-radius: 10px;
    padding      : 40px;
    max-width    : 500px;
    width        : 90%;
    text-align   : center
}

.checkout-page .success-icon {
    margin-bottom: 20px
}

.checkout-page .success-icon svg {
    fill: #16a34a
}

.checkout-page .modal-content h3 {
    margin: 0 0 15px 0;
    color : #1e293b
}

.checkout-page .modal-content p {
    margin: 0 0 20px 0;
    color : #64748b
}

.checkout-page .order-details {
    text-align   : left;
    background   : #f8fafc;
    padding      : 15px;
    border-radius: 6px;
    margin-bottom: 25px
}

.checkout-page .order-details p {
    margin: 0 0 10px 0;
    color : #334155
}

.checkout-page .order-details p:last-child {
    margin-bottom: 0
}

.checkout-page .modal-actions {
    display       : flex;
    flex-direction: column;
    gap           : 10px
}

.checkout-page .btn-dashboard {
    display        : block;
    padding        : 12px;
    background     : #0056b3;
    color          : #fff;
    border-radius  : 6px;
    text-decoration: none;
    font-weight    : 500
}

.checkout-page .btn-continue {
    display        : block;
    padding        : 12px;
    background     : #fff;
    color          : #0056b3;
    border         : 1px solid #0056b3;
    border-radius  : 6px;
    text-decoration: none;
    font-weight    : 500
}

.invoice-page {
    padding: 80px 0
}

.product-page {
    padding: 100px 0
}

.product-page .section-title {
    text-align: center
}

.product-page .section-title::after {
    display: none
}

.product-page .product-grid {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 30px;
    margin         : 0px 0;
    justify-content: center;
    background     : rgba(0, 0, 0, 0);
    box-shadow     : none
}

.product-page .product-grid .product-card {
    width: 270px;
    flex : 0 0 auto
}

.product-page .main-product-page {
    margin-top    : 30px;
    display       : flex;
    flex-direction: column;
    gap           : 10px
}

.product-page .product-card-box {
    width        : 270px;
    flex         : 0 0 auto;
    background   : #113c58;
    border-radius: 12px;
    overflow     : hidden;
    box-shadow   : 0 8px 24px rgba(0, 0, 0, .1);
    text-align   : center;
    transition   : transform .3s ease, box-shadow .3s ease
}

.product-page .product-card-box:hover {
    transform : translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .15)
}

.product-page .product-card-box img {
    width        : 100%;
    height       : 180px;
    -o-object-fit: cover;
    object-fit   : cover
}

.product-page .product-card-box h3 {
    margin     : 15px 0;
    font-size  : 1.1rem;
    color      : #fff;
    font-weight: normal;
    font-size  : 18px
}

.product-details-page {
    padding: 40px 0
}

.product-details-page .main-product-detail {
    display  : flex;
    flex-wrap: wrap;
    gap      : 40px
}

.product-details-page .main-table-design {
    overflow-x: scroll
}

.product-details-page .main-table-design th,
.product-details-page .main-table-design td {
    white-space     : nowrap;
    background-color: #fff;
    text-align      : center
}

.product-details-page .main-table-design .wrap {
    white-space: normal;
    display    : block
}

.product-details-page th.fixed-col:nth-last-child(3),
.product-details-page td.fixed-col:nth-last-child(3) {
    position : sticky;
    right    : 265px;
    width    : 216px;
    min-width: 216px;
    z-index  : 1
}

.product-details-page th.fixed-col:nth-last-child(2),
.product-details-page td.fixed-col:nth-last-child(2) {
    position : sticky;
    right    : 121px;
    width    : 144px;
    min-width: 144px;
    z-index  : 1
}

.product-details-page th.fixed-col:last-child,
.product-details-page td.fixed-col:last-child {
    position : sticky;
    right    : 0;
    width    : 121px;
    min-width: 121px;
    z-index  : 1
}

.product-details-page .product-images {
    flex     : 1;
    min-width: 300px;
    display  : flex;
    gap      : 20px
}

.product-details-page .product-images .sub-images {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    height        : 400px
}

.product-details-page .product-images .sub-images img {
    width: 100px
}

.product-details-page .product-images .main-image-box img {
    width: 100%
}

.product-details-page .product-info {
    flex     : 1;
    min-width: 300px
}

.product-details-page .breadcrumbs {
    font-size    : 14px;
    color        : #666;
    margin-bottom: 15px
}

.product-details-page .breadcrumbs a {
    color          : #007bff;
    text-decoration: none
}

.product-details-page .breadcrumbs a:hover {
    text-decoration: underline
}

.product-details-page .new-badge {
    display      : inline-block;
    background   : #ff6b6b;
    color        : #fff;
    padding      : 3px 10px;
    font-size    : 12px;
    font-weight  : bold;
    border-radius: 3px;
    margin-bottom: 10px
}

.product-details-page .product-title {
    font-size: 28px;
    margin   : 0 0 10px;
    color    : #333
}

.product-details-page .product-subtitle {
    font-size    : 18px;
    color        : #666;
    margin-bottom: 20px
}

.product-details-page .product-price {
    font-size  : 24px;
    font-weight: bold;
    color      : #333;
    margin     : 20px 0
}

@media(max-width: 768px) {
    .product-details-page .main-product-detail {
        flex-direction: column
    }

    .product-details-page .product-images,
    .product-details-page .product-info {
        width: 100%
    }
}

.product-details-page table {
    width          : 100%;
    border-collapse: collapse;
    margin-top     : 20px
}

.product-details-page thead tr th {
    background-color: #023350 !important;
    color           : #fff;
    font-weight     : 400;
    font-size       : 14px
}

.product-details-page th,
.product-details-page td {
    padding      : 12px 15px;
    text-align   : left;
    border-bottom: 1px solid #ddd
}

.product-details-page td {
    font-size: 13px
}

.product-details-page th {
    background-color: #f2f2f2;
    font-weight     : bold
}

.product-details-page tr:hover {
    background-color: #f5f5f5
}

.product-details-page .price {
    font-weight: bold;
    color      : #06c
}

.product-details-page .quantity-control {
    display        : flex;
    align-items    : center;
    justify-content: space-around;
    padding        : 10px;
    background     : #e3e3e3;
    border-radius  : 10px
}

.product-details-page .quantity-input {
    width     : 40px;
    text-align: center;
    margin    : 0 5px;
    border    : 1px solid #ccc
}

.product-details-page .add-to-cart {
    background-color: #134464;
    color           : #fff;
    border          : none;
    padding         : 8px 15px;
    text-align      : center;
    text-decoration : none;
    display         : inline-block;
    font-size       : 14px;
    margin          : 4px 2px;
    cursor          : pointer;
    border-radius   : 4px
}

.product-details-page .add-to-cart:hover {
    background-color: #0e5584
}

.product-details-page .quantity-btn {
    background-color: rgba(0, 0, 0, 0);
    border          : none;
    cursor          : pointer;
    border-radius   : 3px;
    font-size       : 16px
}

.product-details-page .quantity-btn:hover {
    background-color: #e6e6e6
}

.about-page .about-section {
    padding         : 80px 0;
    background-color: #f9f9f9
}

.about-page .about-container {
    max-width: 1200px;
    margin   : 0 auto;
    padding  : 0 15px
}

.about-page .about-row {
    display    : flex;
    align-items: center;
    gap        : 50px
}

.about-page .padding-top {
    padding-top: 50px
}

.about-page .about-col {
    padding: 15px;
    width  : 60%
}

.about-page .about-col ul {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    color         : #555;
    margin-bottom : 20px
}

.about-page .about-content h5 {
    font-size: 20px
}

.about-page .about-content ul {
    list-style: inside;
    margin    : 5px;
    color     : #555
}

.about-page .no-padding {
    padding-top: 0
}

.about-page .about-img {
    width        : 40%;
    border-radius: 8px;
    box-shadow   : 0 5px 15px rgba(0, 0, 0, .1);
    display      : flex;
    overflow     : hidden
}

.about-page .about-content h1 {
    font-size    : 26px;
    margin-bottom: 20px;
    color        : #2c3e50
}

.about-page .about-content p {
    font-size    : 16px;
    line-height  : 1.8;
    color        : #555;
    margin-bottom: 20px
}

@media(max-width: 768px) {
    .about-page .about-col {
        flex     : 0 0 100%;
        max-width: 100%
    }

    .about-page .about-content {
        text-align: center;
        margin-top: 30px
    }

    .about-page .about-list {
        text-align: left
    }
}

.blog-page .main-blog-section {
    margin-top: 0
}

.inner-blog-page {
    padding: 60px 0
}

.inner-blog-page .blog-row {
    display  : flex;
    flex-wrap: wrap;
    margin   : 0 -15px
}

.inner-blog-page .blog-main {
    flex     : 0 0 70%;
    max-width: 70%;
    padding  : 0 15px
}

.inner-blog-page .blog-sidebar {
    flex     : 0 0 30%;
    max-width: 30%;
    padding  : 0 15px
}

.inner-blog-page .blog-detail {
    background   : #fff;
    border-radius: 8px;
    box-shadow   : 0 2px 10px rgba(0, 0, 0, .05);
    overflow     : hidden
}

.inner-blog-page .blog-detail-img {
    width        : 100%;
    height       : 450px;
    display      : block;
    -o-object-fit: cover;
    object-fit   : cover
}

.inner-blog-page .blog-detail-content {
    padding: 30px
}

.inner-blog-page .blog-date {
    color        : #666;
    font-size    : 14px;
    margin-bottom: 15px
}

.inner-blog-page .blog-title {
    font-size: 28px;
    margin   : 0 0 20px;
    color    : #2c3e50
}

.inner-blog-page .blog-text {
    margin-bottom: 25px;
    font-size    : 16px
}

.inner-blog-page .sidebar-widget {
    background   : #fff;
    border-radius: 8px;
    box-shadow   : 0 2px 10px rgba(0, 0, 0, .05);
    padding      : 25px;
    margin-bottom: 30px
}

.inner-blog-page .widget-title {
    font-size     : 20px;
    margin        : 0 0 20px;
    padding-bottom: 10px;
    border-bottom : 2px solid #2c3e50;
    color         : #2c3e50
}

.inner-blog-page .recent-blog {
    margin-bottom : 20px;
    padding-bottom: 20px;
    border-bottom : 1px solid #eee
}

.inner-blog-page .recent-blog:last-child {
    margin-bottom : 0;
    padding-bottom: 0;
    border-bottom : 0
}

.inner-blog-page .recent-blog a {
    display        : flex;
    text-decoration: none;
    color          : #333
}

.inner-blog-page .recent-blog-img {
    width        : 80px;
    height       : 80px;
    -o-object-fit: cover;
    object-fit   : cover;
    border-radius: 4px;
    margin-right : 15px
}

.inner-blog-page .recent-blog-content {
    flex: 1
}

.inner-blog-page .recent-blog-title {
    font-size : 15px;
    margin    : 0 0 5px;
    transition: color .3s
}

.inner-blog-page .recent-blog-date {
    font-size: 12px;
    color    : #666
}

.inner-blog-page .recent-blog a:hover .recent-blog-title {
    color: #2c3e50
}

@media(max-width: 992px) {
    .inner-blog-page .blog-main {
        flex         : 0 0 100%;
        max-width    : 100%;
        margin-bottom: 40px
    }

    .inner-blog-page .blog-sidebar {
        flex     : 0 0 100%;
        max-width: 100%
    }
}

@media(max-width: 576px) {
    .inner-blog-page .recent-blog a {
        flex-direction: column
    }

    .inner-blog-page .recent-blog-img {
        width        : 100%;
        height       : auto;
        margin-right : 0;
        margin-bottom: 10px
    }
}

.inner-blog-page .sharethis-inline-share-buttons {
    margin-top: 20px
}

.contact-page {
    padding: 60px 0
}

.contact-page .contact-info-row {
    display        : flex;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : 20px;
    margin-bottom  : 40px;
    background     : #fff;
    padding        : 30px;
    border-radius  : 8px;
    box-shadow     : 0 2px 15px rgba(0, 0, 0, .05)
}

.contact-page .contact-item {
    flex        : 1;
    min-width   : 200px;
    padding     : 15px;
    text-align  : center;
    border-right: 1px solid #eee
}

.contact-page .contact-item:last-child {
    border-right: none
}

.contact-page .contact-icon {
    color        : #134464;
    font-size    : 28px;
    margin-bottom: 15px
}

.contact-page .contact-item h3 {
    color        : #134464;
    margin-bottom: 10px;
    font-size    : 18px
}

.contact-page .contact-item p,
.contact-page .contact-item a {
    color          : #666;
    text-decoration: none;
    transition     : color .3s
}

.contact-page .contact-item a:hover {
    color: #134464
}

.contact-page .content-row {
    display      : flex;
    gap          : 30px;
    margin-bottom: 40px;
    align-items  : center
}

.contact-page .image-column {
    flex      : 1;
    min-height: 400px
}

.contact-page .image-column img {
    width: 100%
}

.contact-page .form-column {
    flex         : 1;
    background   : #fff;
    padding      : 40px;
    border-radius: 8px;
    box-shadow   : 0 2px 15px rgba(0, 0, 0, .05)
}

.contact-page .form-column .group {
    display: flex;
    gap    : 20px
}

.contact-page .form-column .group .form-group {
    width: 100%
}

.contact-page .form-column h2 {
    color        : #134464;
    margin-bottom: 25px;
    font-size    : 24px
}

.contact-page .form-group {
    margin-bottom: 20px
}

.contact-page .form-group label {
    display      : block;
    margin-bottom: 8px;
    color        : #134464;
    font-weight  : 500
}

.contact-page .form-control {
    width        : 100%;
    padding      : 12px 15px;
    border       : 1px solid #ddd;
    border-radius: 4px;
    font-size    : 16px;
    transition   : all .3s
}

.contact-page .form-control:focus {
    outline     : none;
    border-color: #134464;
    box-shadow  : 0 0 0 2px rgba(19, 68, 100, .1)
}

.contact-page textarea.form-control {
    min-height: 150px;
    resize    : vertical
}

.contact-page .submit-btn {
    background   : #134464;
    color        : #fff;
    border       : none;
    padding      : 14px 30px;
    border-radius: 4px;
    cursor       : pointer;
    font-size    : 16px;
    font-weight  : 500;
    transition   : background .3s;
    width        : 100%
}

.contact-page .submit-btn:hover {
    background: #0d3552
}

@media(max-width: 768px) {
    .contact-page .contact-item {
        flex          : 100%;
        border-right  : none;
        border-bottom : 1px solid #eee;
        padding-bottom: 20px
    }

    .contact-page .contact-item:last-child {
        border-bottom: none
    }

    .contact-page .content-row {
        flex-direction: column
    }

    .contact-page .image-column {
        min-height: 300px
    }
}

.delete-btn {
    border: none
}

.product-categories-page {
    padding: 60px 0
}

.product-categories-page .product-columns {
    -moz-column-count: 3;
    column-count     : 3;
    -moz-column-gap  : 40px;
    column-gap       : 40px
}

@media(max-width: 1024px) {
    .product-categories-page .product-columns {
        -moz-column-count: 2;
        column-count     : 2
    }
}

@media(max-width: 600px) {
    .product-categories-page .product-columns {
        -moz-column-count: 1;
        column-count     : 1
    }
}

.product-categories-page .category-group {
    -moz-column-break-inside: avoid;
    break-inside            : avoid;
    margin-bottom           : 30px;
    background-color        : #f9f9f9;
    padding                 : 10px;
    border-radius           : 4px
}

.product-categories-page .category-group h4 {
    margin          : 0 0 10px;
    background-color: #e9e9e9;
    padding         : 8px 10px;
    font-weight     : bold;
    font-size       : 20px
}

.product-categories-page .category-group h4 a {
    color: #222
}

.product-categories-page .category-group ul {
    list-style  : none;
    padding-left: 0;
    margin      : 0
}

.product-categories-page .category-group ul li a {
    margin-bottom: 5px;
    font-size    : 15px;
    color        : #333;
    padding      : 4px;
    display      : block
}

.product-categories-page .category-group ul li a:hover {
    text-decoration: underline;
    color          : #004494
}

.sub-category-items .lab-glassware-section {
    background: #e4f8ff;
    padding   : 60px 20px
}

@media(max-width: 600px) {
    .sub-category-items .lab-glassware-section {
        padding: 40px 10px
    }
}

.sub-category-items .lab-glassware-section .breadcrumb-nav {
    font-size    : 14px;
    margin-bottom: 30px;
    color        : #333
}

.sub-category-items .lab-glassware-section .breadcrumb-nav a {
    color          : #007bff;
    text-decoration: none
}

.sub-category-items .lab-glassware-section .breadcrumb-nav .active {
    font-weight: bold
}

.sub-category-items .lab-glassware-section .lab-glassware-content {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 30px;
    align-items: flex-start
}

.sub-category-items .lab-glassware-section .glassware-icons {
    display       : flex;
    flex-direction: column;
    gap           : 15px;
    flex          : 0 0 auto;
    max-height    : 400px;
    overflow-y    : auto
}

.sub-category-items .lab-glassware-section .glassware-icons img {
    width        : 80px;
    height       : 80px;
    -o-object-fit: cover;
    object-fit   : cover;
    border       : 1px solid #ccc;
    border-radius: 8px
}

.sub-category-items .lab-glassware-section .glassware-main-image {
    flex      : 1 1 350px;
    text-align: center
}

@media(max-width: 600px) {
    .sub-category-items .lab-glassware-section .glassware-main-image {
        flex: auto
    }
}

.sub-category-items .lab-glassware-section .glassware-main-image img {
    width        : 100%;
    height       : 350px;
    border-radius: 20px;
    box-shadow   : 0 0 15px rgba(0, 0, 0, .1);
    -o-object-fit: scale-down;
    object-fit   : scale-down
}

.sub-category-items .lab-glassware-section .glassware-description {
    flex: 1 1 400px
}

.sub-category-items .lab-glassware-section .glassware-description h2 {
    font-size    : 36px;
    margin-bottom: 20px;
    color        : #000
}

.sub-category-items .lab-glassware-section .glassware-description p {
    font-size    : 16px;
    color        : #333;
    margin-bottom: 16px;
    line-height  : 1.6
}

@media(max-width: 768px) {
    .sub-category-items .lab-glassware-section .lab-glassware-content {
        flex-direction: column;
        align-items   : center
    }

    .sub-category-items .lab-glassware-section .glassware-description h2 {
        font-size: 28px
    }

    .sub-category-items .lab-glassware-section .glassware-description p {
        font-size: 15px
    }

    .sub-category-items .lab-glassware-section .glassware-icons {
        flex-direction : row;
        flex-wrap      : wrap;
        justify-content: center;
        max-height     : none;
        margin-bottom  : 20px
    }

    .sub-category-items .lab-glassware-section .glassware-icons img {
        margin: 5px
    }

    .sub-category-items .lab-glassware-section .breadcrumb-nav {
        font-size : 13px;
        text-align: center
    }
}

.sub-category-items .glassware-types-section {
    background: #e4f8ff;
    padding   : 60px 20px
}

@media(max-width: 600px) {
    .sub-category-items .glassware-types-section {
        padding: 40px 10px
    }
}

.sub-category-items .glassware-types-section .glassware-item {
    display      : flex;
    align-items  : flex-start;
    gap          : 30px;
    margin-bottom: 60px;
    flex-wrap    : wrap
}

@media(max-width: 600px) {
    .sub-category-items .glassware-types-section .glassware-item {
        margin-bottom: 20px
    }
}

.sub-category-items .glassware-types-section .glassware-image {
    position : relative;
    flex     : 0 0 250px;
    max-width: 250px
}

.sub-category-items .glassware-types-section .glassware-image img {
    width        : 100%;
    height       : 200px;
    -o-object-fit: cover;
    object-fit   : cover;
    border-radius: 20px;
    box-shadow   : 0 0 12px rgba(0, 0, 0, .1)
}

.sub-category-items .glassware-types-section .glassware-label {
    margin-top      : 12px;
    background-color: #0c3f57;
    color           : #fff;
    text-align      : center;
    padding         : 10px 12px;
    border-radius   : 8px;
    font-weight     : 600;
    font-size       : 16px
}

.sub-category-items .glassware-types-section .glassware-description {
    flex: 1
}

.sub-category-items .glassware-types-section .glassware-description p {
    font-size  : 16px;
    line-height: 1.7;
    color      : #333
}

@media(max-width: 768px) {
    .sub-category-items .glassware-types-section .glassware-item {
        flex-direction: column;
        align-items   : center
    }

    .sub-category-items .glassware-types-section .glassware-image,
    .sub-category-items .glassware-types-section .glassware-description {
        max-width : 100%;
        text-align: center
    }

    .sub-category-items .glassware-types-section .glassware-label {
        font-size: 15px
    }

    .sub-category-items .glassware-types-section .glassware-description p {
        font-size: 15px
    }
}

.sub-category-items .thumb-img {
    cursor    : pointer;
    border    : 2px solid rgba(0, 0, 0, 0);
    transition: border .3s ease
}

.sub-category-items .thumb-img:hover {
    border-color: #0c3f57
}

.main-categories {
    position: relative
}

.main-categories .owl-nav {
    position       : absolute;
    top            : 50%;
    width          : 100%;
    display        : flex;
    justify-content: space-between;
    transform      : translateY(-50%);
    pointer-events : none
}

.main-categories .owl-nav button.owl-prev,
.main-categories .owl-nav button.owl-next {
    pointer-events  : all;
    background-color: rgba(159, 207, 245, .4);
    color           : #000;
    border          : none;
    border-radius   : 50%;
    width           : 45px;
    height          : 45px;
    font-size       : 44px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    line-height     : 20px;
    transition      : background-color .3s ease
}

.main-categories .owl-nav button.owl-prev:hover,
.main-categories .owl-nav button.owl-next:hover {
    background-color: var(--primary);
    color           : #fff
}

@media(max-width: 450px) {

    .main-categories .owl-nav button.owl-prev,
    .main-categories .owl-nav button.owl-next {
        width    : 35px;
        height   : 35px;
        font-size: 38px
    }
}
.seo-none {
    display: none;
}