html body {
font-family: 'Sora', sans-serif !important;
}

.bg-main-color {
background-color: #043391; /* base blue */
transition: background-color 0.3s ease; /* smooth hover effect */
}
.bg-main-color:hover {
background-color: #0a2170; /* darker on hover */
}

.text-main-color{
color: #043391;
}
.text-main-color:hover{
    color: #0a2170;
}

.text-normal-blue{
    color: #043391;
}
.text-deep-blue{
    color: #0a2170;
}

.icon-main-color{
background-color: white;
}
.icon-main-color:hover{
background-color: #043391;
}

.text-link-hover{
color: black;
}
.text-link-hover:hover{
color: blue;
}
.text-gray-link{
color: #696363;
}
.text-gray-link:hover{
color: #043391;
}

.text-black-link{
color: #000000;
}
.text-black-link:hover{
color: #043391;
}


.btn-white-blue{
background-color: #043391;
color:white !important;

}
.btn-white-blue:hover{
background-color: white;
color: #043391 !important;
} 
.text-white-blue{
color:white;
}
.text-white-blue:hover{
color:#043391;
}


.btn-blue-toggle {
background-color: #043391;   /* base blue */
color: #ffffff;              /* text/icons white */
transition: all 0.3s ease;   /* smooth hover */
}

.btn-blue-toggle:hover {
background-color: #ffffff;   /* white background */
color: #043391;              /* text/icons blue */
border: 2px solid #043391; 
}

/* Make sure child icons/text inherit the color */
.btn-blue-toggle i,
.btn-blue-toggle span {
transition: color 0.3s ease;
}

.btn-blue-toggle:hover i,
.btn-blue-toggle:hover span {
color: #043391;
}

.text-blue-towhite{
    color: #043391;
}
.text-blue-towhite:hover{
    color: white;
}

.bg-light-blue{
    background-color: #f0f3f9;
}



    /* Remove focus outlines */
    .slick-slide:focus,
    .slick-track:focus,
    .banner-three-slider:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Remove extra borders if slick adds them */
    .slick-slide,
    .slick-track,
    .banner-three-slider {
        border: none !important;
        background: none !important;
    }

    /* Default font size for mobile/tablet */
    .display-one {
        font-size: 32px;
        /* smaller font for small screens */
    }

    /* For desktop/large screens only */
    @media screen and (min-width: 1024px) {
        .display-one {
            font-size: 68px;
        }
    }

    #banner-three-prev,
    #banner-three-next {
        z-index: 9999 !important;
        /* ensures buttons are on top */
        pointer-events: auto !important;
        /* make sure clicks work */
    }

    /* Custom height for desktop/laptop only */
    @media (min-width: 1024px) {

        /* Tailwind xl breakpoint */
        .banner-desktop-height {
            height: 486px;
        }
    }

    /* Reduce image size on desktop/laptop */
    @media (min-width: 1024px) {
        .image-desktop-size img {
            max-width: 60%;
            /* Adjust percentage as needed */
            height: auto;
            /* Keep aspect ratio */
        }
    }

    /* Optional: make images responsive on smaller screens */
    /* .img-responsive {
    width: 100%;
    height: auto;
} */

    /* Reduce font size on desktop/laptop */
    @media (min-width: 1024px) {

        /* Tailwind xl breakpoint */
        .heading-desktop-sm {
            font-size: 4rem;
            /* Adjust size as needed */
            line-height: 1;
            /* Optional: adjust line height */
        }
    }

    .simple-countdown {
        background: white;
    }

    .countdown-display {
        font-family: monospace;
        font-weight: 400;
        letter-spacing: 0.5px;
    }

    .place-bid-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;        /* Default size */
    border-radius: 2px;
    font-weight: 600;
    font-size: 16px;
    background-color: #043391; /* Orange background */
    color: #ffffff;            /* White text */
    border: 2px solid #043391; /* Orange border */
    gap: 8px;                  /* Space between text and icon */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover effect */
.place-bid-btn:hover {
    background-color: #ffffff;
    color: #043391;
    border-color: #043391;
}

/* Mobile responsiveness */
@media (max-width: 640px) { /* Mobile devices */
    .place-bid-btn {
        width: 100%;         /* Full width on mobile */
        font-size: 18px;     /* Slightly larger text for readability */
        padding: 14px 20px;  /* More padding for touch */
        justify-content: center;
    }
}

@media (min-width: 641px) and (max-width: 1024px) { /* Tablets / small screens */
    .place-bid-btn {
        width: 75%;          /* Slightly smaller than full width */
        font-size: 17px;
        padding: 13px 22px;
    }
}

.next-btn-blue:hover{
   background-color: blue;
}

.place-bid-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;        /* Default size */
    border-radius: 2px;
    font-weight: 600;
    font-size: 16px;
    background-color: #043391; /* Orange background */
    color: #ffffff;            /* White text */
    border: 2px solid #043391; /* Orange border */
    gap: 8px;                  /* Space between text and icon */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover effect */
.place-bid-btn:hover {
    background-color: #ffffff;
    color: #043391;
    border-color: #043391;
}

/* Mobile responsiveness */
@media (max-width: 640px) { /* Mobile devices */
    .place-bid-btn {
        width: 100%;         /* Full width on mobile */
        font-size: 18px;     /* Slightly larger text for readability */
        padding: 14px 20px;  /* More padding for touch */
        justify-content: center;
    }

    /* Product image container height on mobile */
    .product-card__thumb {
        height: 50px !important;
    }

    /* Optional: scale down the image inside the container */
    .product-card__thumb img {
        max-height: 100%;
        object-fit: contain;
    }
}

@media (min-width: 641px) and (max-width: 1024px) { /* Tablets / small screens */
    .place-bid-btn {
        width: 75%;          /* Slightly smaller than full width */
        font-size: 17px;
        padding: 13px 22px;
    }
}

/* Mobile view: ≤640px */
@media (max-width: 640px) {
    /* Cards layout: 2 per row */
    .tab-content .row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px; /* spacing between cards */
    }

    .tab-content .row > div {
        flex: 0 0 48%; /* Two cards per row */
        max-width: 48%;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    /* Reduce card padding and height */
    .product-card {
        padding: 2px !important; /* reduce top/bottom padding */
    }

    /* Reduce space above image */
    .product-card__thumb {
        margin-top: 0 !important;
        margin-bottom: 6px; /* small gap below image */
    }

    /* Reduce product name and spacing */
    .product-card .title {
        font-size: 1rem !important;
        margin-top: 3px;
        margin-bottom: 4px;
    }

    /* Reduce category, bids, countdown font size and spacing */
    .product-card p,
    .product-card .simple-countdown span {
        font-size: 0.8rem !important;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    /* Place Bid Button adjustments */
    .place-bid-btn {
        font-size: 14px;
        padding: 6px 12px;
        gap: 4px;
        width: 100%; /* full width for mobile touch-friendliness */
    }
   
}

/* Mobile view: ≤640px */
@media (max-width: 640px) {
    /* Reduce line height across content */
    .card-height,
    .card-height * {
        line-height: 1.2 !important; /* tighter spacing */
    }

    /* Title */
    .card-height .title {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        font-size: 1rem !important;
    }

    /* Category & Color */
    .card-height p {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        font-size: 0.85rem !important;
    }

    /* Countdown */
    .card-height .simple-countdown {
        margin-top: 1px !important;
        margin-bottom: 1px !important;
    }

    /* Bid Display */
    .card-height .product-card__price {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    /* Place Bid Button */
    .card-height .place-bid-btn {
        margin-top: 1px !important;
    }
}

.sora-fonts {
  font-family: 'Sora', sans-serif !important;
}