/* input(80,1): run-time error CSS1019: Unexpected token, found '@'
input(94,17): run-time error CSS1030: Expected identifier, found ' '
input(94,18): run-time error CSS1031: Expected selector, found '.5'
input(94,18): run-time error CSS1025: Expected comma or open brace, found '.5'
input(105,1): run-time error CSS1019: Unexpected token, found '}' */
/* ============================================================================
   International Shopping page (Views/Home/InternationalShopping.cshtml).
   Hero + country flag / text overlays.
   ============================================================================ */

/* Hero Section */
.HeroSection {
    position: relative;
    height: 300px;
    color: white;
    background-position: center;
    background-image: url('https://cdn.bqwatches.com/images/dc33c914-18ff-4212-b90e-93288c669c20.png');
    background-size: cover;
    text-align: center;
}

    .HeroSection::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.25);
        z-index: 1;
    }

    .HeroSection > .container {
        position: relative;
        height: 100%;
        z-index: 2;
    }

/* USP Bar */
.usp-bar {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.usp-text {
    margin: 0;
}

      
/* Pop-Out Bar Styling */
.pop-out-bar {
    position: absolute;
    top: 6.5%; /* Adjust based on desired vertical position */
    right: 0;
    width: 25%; /* Stretches 1/4 of the page width */
    background-color: rgba(0, 0, 0, 0.75); /* Slightly transparent black */
    color: white;
    text-align: center;
    padding: 10px 0; /* Add padding inside the bar */
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 5px 0 0 5px; /* Rounded left corners */
    z-index: 100; /* Ensure it stays above other elements */
    transform: translateX(0); /* Default position */
    transition: transform 0.3s ease-in-out; /* Smooth slide-in effect */
}

/* 
Effect to Slightly Slide Out */
.pop-out-bar:hover {
    transform: translateX(-20px); /* Slight slide-out on hover */
}

.pop-out-bar {
    transform: translateX(100%); /* Initially hidden */
    animation: slideIn 0.5s ease-in-out forwards; /* Slide-in animation */
}

@@keyframes slideIn {
    to

{
    transform: translateX(0); /* Fully visible */
}

}



/* Stack the USP bars as separate bars on smaller screens */
@media (max-width: 767.98px) {
    .usp-bar .row > .col-12
  margin.bottom: 0.5;
{
    border-bottom: 1px solid #ccc; /* Grey divider lines */
    padding-bottom: 2px;
    padding-top: 2px;
}

.usp-bar .row > .col-12:last-child {
    border-bottom: none;
}

}

/* General Image Styles */
.white-section img {
    border-radius: 10px;
    transition: transform 0.3s;
}

    .white-section img:hover {
        transform: scale(1.05);
    }

.image-container {
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 5px;
}

.rect-img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    z-index: 2;
}