/* ----------------------------------

Template Name: Humnafs
Author: validtheme
Version: 1.0

-------------------------------------

Table of contents
        
    01. Google font
    02. Reset
    03. Typography
    04. Background color
    05. Custom
    06. Button
    07. Border
    08. Aside style
    09. Video
    10. Background image
    11. Icon
    12. Magnific popup
    13. Header
    14. Page title
    15. Swiper carousel
    16. Slider and parallax typography
    17. Portfolio
    18. Elements
    19. Blog
    20. Footer
    21. Home Page
    22. Services Page
    23. About Page
    24. Projects Page
    25. Pricing Page
    26. PHP Contact Form
    27. Others

*/


/*
** General Styles for HTML tags
*/

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=M+PLUS+1p&display=swap');


body {
    --bs-link-color: #052c65;
    --bs-primary: #052c65;
    --bs-primary-rgb: 191, 98, 18;
    --bs-btn-hover-bg: #052c65;
    --bs-btn-hover-border-color: #052c65;
    z-index: -1;
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
}

h1,
h2 {
    color: var(--bs-primary-text-emphasis) !important;
    font-size: 27px;
}

*:focus {
    box-shadow: none !important;
}

.fs-5 {
    font-size: 1.15rem !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #bf6212;
    --bs-btn-border-color: #bf6212;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bf6212;
    --bs-btn-hover-border-color: #bf6212;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bf6212;
    --bs-btn-active-border-color: #bf6212;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #bf6212;
    --bs-btn-disabled-border-color: #bf6212;
}

.btn-outline-primary {
    --bs-btn-color: #bf6212;
    --bs-btn-border-color: #bf6212;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bf6212;
    --bs-btn-hover-border-color: #bf6212;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bf6212;
    --bs-btn-active-border-color: #bf6212;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #bf6212;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #bf6212;
    --bs-gradient: none;
}

.btn:hover {
    background-color: #bf6212;
    border-color: #bf6212;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background-color: #bf6212;
    border-color: #bf6212;
}

.btn {
    --cz-btn-active-border-color: transparent;
    --cz-btn-disabled-border-color: transparent;
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.btn-dark {
    --cz-btn-hover-bg: #131920;
    --cz-btn-hover-border-color: #131920;
    --cz-btn-active-bg: #131920;
    --cz-btn-active-border-color: #131920;
}

.btn-icon {
    --cz-btn-size: 2.5rem;
    flex-shrink: 0;
    height: var(--cz-btn-size);
    padding: 0;
    width: var(--cz-btn-size);
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #bf6212;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(191, 98, 18, .10);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #052c65;
}

.dropdown-item {
    cursor: pointer;
}

/* HEADER */
.bd-navbar {
    padding: .75rem 0;
    background-color: transparent;
}

.bd-search {
    position: relative;
}

@media (min-width: 992px) {
    .bd-search {
        position: absolute;
        top: .875rem;
        left: 50%;
        width: 200px;
        margin-left: -100px;
    }
}

@media (min-width: 1200px) {
    .bd-search {
        width: 280px;
        margin-left: -140px;
    }
}

.navbar {
    padding: 0;
    --bs-navbar-nav-link-padding-x: 0.9rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.humnafs-logo {
    height: 75px;
    width: auto;
}

.nav-link {
    font-weight: 400;
    color: #2d2d2d;
    font-size: 15px;
    font-family: "Lexend", sans-serif;
}

.nav-link:hover {
    color: #bf6212;
}



.slick-prev {
    left: -70px;
}

.slick-next {
    right: -70px;
}

.product-title {
    font-weight: 300;
    font-size: 15px;
}

.product-title a {
    text-decoration: none;
    font-weight: 300;
    font-size: 15px;
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--bs-heading-color);
    height: 30px;
    display: block;
}

.category-title {
    font-size: 15px;
}

.breadcrumb {
    font-size: 15px;
    color: #757575;
}

.breadcrumb a {
    color: #757575;
}

.sort-dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.sort-dropdown .dropdown-toggle::after {
    margin-left: 0.5rem;
}

/* Optional: Keep it open on hover only */
.sort-dropdown .dropdown-menu {
    display: none;
}

.product-listing-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.card-img {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    height: 400px;
    /* Set a fixed height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-img img,
.card-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-wrapper,
.video-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.video-wrapper {
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
    display: none;
    /* Hide by default */
}

.card-img:hover .video-wrapper {
    display: block;
    /* Only show if it exists */
    opacity: 1;
}

.image-wrapper {
    z-index: 2;
    transition: opacity 0.3s ease;
}

.card-img:hover .video-wrapper {
    opacity: 1;
    z-index: 2;
}

.card-img {
    height: 410px !important;
    border-radius: 1rem 1rem 0 0 !important;
}

.cart-img {
    height: 410px !important;
}

@media only screen and (max-width: 600px) {
    .category-title {
        font-size: 13px;
        color: var(--bs-primary-text-emphasis) !important;
        font-weight: 500;
        margin-bottom: 0;
    }

    .breadcrumb {
        font-size: 13px;
        color: var(--bs-primary-text-emphasis) !important;
        font-weight: 500;
    }

    .card-img {
        height: 300px !important;
    }

    .cart-img {
        height: 250px !important;
    }
}

.sale-badge {
    font-size: 11px;
}

.new-price {
    font-size: 15px;
    font-weight: 600;
}

.old-price {
    font-size: 13px;
    color: #757575;
}

.page-title {
    font-size: 20px;
}

.social-media {
    border-top: 1px solid #000;
}

.social-media a {
    color: #bf6212;
    font-size: 20px;
}

.social-media ul {
    display: inline-flex;
    padding: 0px 0px 0px 5px;
    margin-top: 1rem;
}

.social-media ul li {
    list-style: none;
    padding: 0px 10px 0px 0px;
}

.social-media h6 {
    margin-top:1.3rem
}

.bg-orange {
    background-color: #f3efe5;
    padding: 30px 30px 0px;
}

.bg-orange h1 {
    font-size: 16px;
}

.bg-orange h3 {
    font-size: 16px;
}

.bg-orange .breadcum {
    color: #bf6212;
    text-decoration: none;
}


/********blog-main*******/
.blog-detail br {
    display: none;
}

.blog-detail h3 {
    margin-bottom: -10px;
    margin-top: 40px;
}

.blog-detail {
    margin-top: 0;
    margin-bottom: 2rem;
}

.blog-detail .special::before {
    display: none;
    /* removes any content injected */
}

/********blog-main*******/


/* FOOTER */

footer {
    background-color: #f3efe5;
    position: relative;
    z-index: -1
}

footer::before {
    content: '';
    background: url("https://millclient.com/projects/humnafsci/assets/public/images/footer-img.png") no-repeat;
    width: 280px;
    height: 807px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1
}

footer ul {
    margin-left: 0;
    padding-left: 0;
}

footer li {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

footer a {
    text-decoration: none;
    color: #000;
}

footer h5 {
    font-weight: 400;
    margin-bottom: 45px;
    font-size: 1rem;
}

footer li a {
    font-size: 14px;
    padding-bottom: 15px;
    position: relative;
    display: block;
    font-weight: 500;
}

footer p {
    font-size: 15px;
}


.description-title {
    font-weight: 200;
    font-size: 22px;
}

.sizes {
    border-bottom: 1px solid #333;
    border-top: 1px solid #333333;
}

.sizes a {
    color: #bf6212;
    font-weight: 400;
    font-size: 15px;
    text-decoration: underline overline;
}

.sizes h4 {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 15px;
}

.size-btn button {
    background: transparent;
    border: 1px solid #b6b6b6;
    border-radius: 25px;
    padding: 3px 15px;
    font-size: 16px;
    line-height: 35px;
    font-weight: 300;
}

.size-btn button:hover {
    background-color: #bf6212;
    color: #fff;
    border: 1px solid #bf6212;
}

.wishlist-btn,
.cart-btn {

    border-radius: 0;
    padding: 8px 24px;
    border: 1px solid #b6b6b6;
}

.wishlist-btn {
    background-color: transparent;
}

.cart-btn {
    background-color: #bf6212;
    color: #fff;
    border: 1px solid #bf6212;
}

.cart h5 {
    font-weight: 400;
    font-size: 15px;
    margin-bottom: 0;
}

.cart label {
    font-size: 14px;
}

.top-message {
    font-size: 14px;
}

@media only screen and (max-width: 600px) {
    .cart h5 {
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .cart label {
        text-align: center;
        display: block;
        margin-bottom: 15px;
        font-weight: 900;
    }

    .remove-item {}

    .top-message {
        font-size: 10px;
    }
}

.checkout a {
    color: #757575;
}

.usp {
    font-weight: 300;
    font-size: 15px;
}

.usp div {}

.usp svg {
    height: 40px;
    width: 40px;
    fill: #bf6212;
    margin-bottom: 10px;
}


.accordion {}

.accordion-button:not(.collapsed) {
    background: transparent;
}

.accordion h3 a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 300;
}

ul.pinfo {
    margin: 0;
    padding: 0;
}

.pinfo li {
    list-style-type: none;
    font-size: 15px;
    margin-bottom: 5px;
}

.pinfo strong {
    font-size: 14px;
}

.disclaimer {
    font-size: 14px;
}

.menu-content-wrap a {
    font-size: 14px;
    padding: 6px 0;
}

.order-table {
    font-size: 13px;
}

.order-table th {
    font-size: 14px;
    font-weight: 500;
}

.order-table .btn:hover {
    background-color: transparent;
    border-color: transparent;

}

.order-table td:nth-child(2) {
    width: 40%;
}

.table thead th,
.table tfoot th {
    color: #333;
}

.address-table {
    font-size: 13px;
}

.address-table th {
    font-size: 14px;
    font-weight: 500;
}

.address-table .btn:hover {
    background-color: transparent;
    border-color: transparent;

}

.address-table td:nth-child(2) {
    width: 40%;
}

.fade-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fade-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease-in-out;
}

.fade-image-wrapper .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

.fade-image-wrapper:hover .hover-img {
    opacity: 1;
}

.fade-image-wrapper:hover .main-img {
    opacity: 0;
}

.fade-image-wrapper img {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade-image-wrapper:hover .hover-img {
    transform: scale(1.05);
}




/* Enhanced Zoom Styles */
.zoom-container {
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}

.zoom-container img {
    transition: transform 0.3s ease;
    width: 100%;
    height: auto;
}

.zoomed {
    transform: scale(2);
    cursor: zoom-out;
}

/* Modal Zoom Styles */
#modalZoomContainer {
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

#modalImage {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.home-card-img {
    height: 325px !important;
}

@media only screen and (max-width: 600px) {
    .home-card-img {
        height: 350px !important;
    }
}


.fonticon-text {
    font-size: 18px;
    font-weight: 400;
    padding-right: 8px;
}

.fonticon-text span {
    font-family: "Lexend", sans-serif;
    text-transform: none;
    font-weight: 400;
    margin-left: 3px;
}

.navbar-toggler {
    font-size: 13px;
}

@media only screen and (max-width: 600px) {
    .fonticon-text {
        font-size: 20px;
        padding-right: 10px;
    }
}

.modal-backdrop {
    z-index: 1;
}

.navbar-nav {
    margin-left: 17px;
}

.video-style {
    width: 100%;
    height: 487px;
    object-fit: cover;
}

@media only screen and (max-width: 600px) {
    .video-style {
        width: 100%;
        height: 255px;
        object-fit: cover;
    }

    .slick-prev,
    .slick-next {
        width: 35px;
    }

    .slick-prev {
        left: 0px;
        z-index: 1;
    }

    .slick-next {
        right: 0px;
    }
}

.tracking-step {
    position: relative;
    text-align: center;
}

.tracking-line {
    position: absolute;
    top: 25px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #ccc;
    z-index: 0;
}

.tracking-circle {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .timeline-wrapper {
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .timeline-wrapper::before {
        content: '';
        position: absolute;
        top: 25px;
        left: 12%;
        right: 12%;
        height: 2px;
        background-color: #ccc;
        z-index: 0;
    }

    .tracking-step {
        flex: 1;
    }
}

@media (max-width: 767px) {
    .timeline-wrapper {
        border-left: 2px solid #ccc;
        margin-left: 20px;
    }

    .tracking-step {
        text-align: left;
        position: relative;
        margin-bottom: 3rem;
    }

    .tracking-step::before {
        content: '';
        position: absolute;
        top: 12px;
        left: -11px;
        background-color: #0d6efd;
        border-radius: 50%;
        z-index: 1;
    }

    .tracking-circle {
        float: left;
        margin-right: 20px !important;
        margin-left: -25px !important;
    }
}


.bg-success {
    --bs-bg-opacity: 1;
    background-color: rgba(0, 122, 172, var(--bs-bg-opacity)) !important;
}


/* Container to wrap gallery */
.product-gallery-wrapper {
    display: flex;
}

/* Sidebar for thumbnails */
.product-gallery-thumbs {
    width: 150px;
    overflow-y: auto;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 670px;
}

.product-gallery-thumbs img,
.product-gallery-thumbs video {
    width: 120px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.product-gallery-thumbs img:first-child,
.product-gallery-thumbs video:first-child {
    margin-left: 0;
}

/* Active thumbnail styling */
.product-gallery-thumbs img.active,
.product-gallery-thumbs video.active {
    border-color: #007bff;
    /* Blue border when active */
}

.product-gallery-main {
    width: 600px;
    height: 670px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* For images and videos in the main display */
.product-gallery-main img,
.product-gallery-main video {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;

}

/* Make image/video fill the div */
@media(max-width: 768px) {
    .product-gallery-wrapper {
        flex-direction: column;
        height: auto;
        max-width: 100%;
    }

    .product-gallery-thumbs {
        height: auto;
        flex-direction: row !important;
        width: 100% !important;
    }

    .product-gallery-thumbs img,
    .product-gallery-thumbs video {
        height: 120px;
    }


    /* Ensure the main display area is properly adjusted for mobile */
    .product-gallery-main {
        width: 100%;
        height: auto;
        margin-top: 5px;
    }

    .product-title {
        margin-bottom: 20px;
    }

    .product-title a {
        font-size: 12px;
        height: 20px;
    }
}



.coupon-card{
    background: linear-gradient(135deg, #bf6212, #cac1bb);
    color: #fff;
    text-align: center;
    padding: 40px 80px;
    border-radius: 15px;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.15);
    position: relative;

}
.logo{
    width: 80px;
    border-radius: 8px;
    margin-bottom: 20px;

}
.coupon-card h3{
    font-size: 28px;
    font-weight: 400;
    line-height: 40px;

}
.coupon-card p{
    font-size: 15px;

}
.coupon-row{
    display: flex;
    align-items: center;
    margin: 25px auto;
    width: fit-content;

}
#cpnCode{
    border: 1px dashed #fff;
    padding: 10px 20px;
    border-right: 0;

}
#cpnBtn{
    border: 1px solid #fff;
    background: #fff;
    padding: 10px 20px;
    color: #7158fe;
    cursor: pointer;
}
.circle1, .circle2{
    background: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}
.circle1{
    left: -25px;
}
.circle2{
    right: -25px;
}