/* Print and Scan Clients */

.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Ensure consistent spacing between items */
    align-items: center;
    gap: 5px; /* Horizontal gap */
    margin-top: 2%; /* Adjust this as needed */
   
}

.client {
    width: calc(33.333% - 20px); /* Three items per row minus gap */
    cursor: pointer; /* Change cursor on hover */
    display: flex;
    flex-direction: column; /* Arrange image and title vertically */
    align-items: center; /* Center the content */
    position: relative; /* Needed for absolute positioning of info */
    
}


.client-logo {
    overflow: hidden;
    width: 100%; /* Makes the logo responsive to the .client width */
    display: flex;
    justify-content: center;
    margin: 0; /* No margin */
    position: relative; /* Needed for positioning the overlay and title */
}

.client-logo img {
    width: auto;
    height: auto;
    max-width: 100%; /* Ensures the image fits within its container */
    max-height: 100%; /* Adjust as needed */
    transition: transform 0.3s ease-in-out;
}

.client-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Initial dark overlay */
    transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1; /* Full opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 2em;
}

.client-title-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    padding: 5px 0; /* Reduced padding */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    text-transform: uppercase; 
}

.client-logo:hover .client-overlay {
    background: rgba(0, 0, 0, 0.1); /* Almost transparent on hover */
    opacity: 0; /* Hide the overlay */
}

.client-logo:hover img {
    transform: scale(1.1); /* Scales up the image */
}

.client-logo:hover .client-title-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.clneye {
 
 font-style: normal;
 font-size: 50px;
 opacity: 0.8;
    
}

/* About Us Container */
.mpccontainer {
    
    padding-left: 350px;
    padding-right: 350px;
  
}

.mpctextmob {
    
    display: none;
}



/* Main Custom Gallery Slider Styling */
    .main_galleries {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.main_gallery-slider {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.main_slider-controls {
    display: block;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.main_prev,
.main_next {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 2em;
    padding: 0 10px;
}

.main_gallery-grid {
    display: block;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.main_gallery-grid::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, and Opera */
}

.main_gallerymount {
    flex: 0 0 auto;
    margin-right: 10px;
}

.main_gallery-logo img {
     width: 100%; /* Makes the image fit its container */
    height: auto; /* Maintains the aspect ratio */
    cursor: pointer;
}

.main_image-modal {
    display: none;
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.main_image-modal .main_modal-content {
    max-width: 80%;
    margin: auto;
}

.main_close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 2em;
    cursor: pointer;
}

.main_modal-info {
    text-align: center;
    color: white;
}

.main_modal-prev,
.main_modal-next {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 2em;
    padding: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.main_modal-prev {
    left: 10px;
}

.main_modal-next {
    right: 10px;
}

/* Gallery Slider Styling */

.gallery-slider {
    position: relative;
    width: 100%; /* Ensure full width */
}

.slider-controls {
    position: absolute;
    left: 10px; /* Adjusted for visibility */
    right: 10px; /* Adjusted for visibility */
    top: 40%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    pointer-events: none;
}

.prev, .next {
    cursor: pointer;
    padding: 5px;
    background: rgba(0, 0, 0, 0.7); /* Darker background for visibility */
    color: white;
    font-size: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    pointer-events: auto; /* Ensure they are clickable */
}

.slider-controls > .prev,
.slider-controls > .next {
    visibility: visible !important; /* Ensure the buttons are not hidden */
    opacity: 1; /* Ensure the buttons are fully opaque */
}

.gallery-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    margin: 10px 100px 40px; /* top | right & left | bottom */
    z-index: 2;
    cursor: pointer;
}

.gallerymount {
    flex: 0 0 50%; /* Each item takes up half of the width */
    box-sizing: border-box;
    padding: 10px; /* Padding around items */
    z-index: 2;
}

.gallerymount:last-child {
    margin-right: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.gallery-grid::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.gallery-grid {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Gallery Modals */

.image-modal {
    display: none; /* Hide initially */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.image-modal .close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.image-modal .close:hover,
.image-modal .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.image-modal .modal-content {
    width: 80%;
    max-height: 80%;
    object-fit: contain;
    animation-name: zoom;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    transform-origin: center; /* Ensure zoom starts from center */
}

/* Modal info styling */
.image-modal .modal-info {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
}

.image-modal .modal-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.image-modal .modal-description {
    font-size: 14px;
}



@keyframes zoom {
    from { transform: scale(0.5); opacity: 0; } /* Start smaller and more transparent */
    to { transform: scale(1); opacity: 1; } /* End at normal size and fully opaque */
}

/* Modal navigation buttons */
.image-modal .modal-prev,
.image-modal .modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
}

.image-modal .modal-prev {
    left: 10px;
}

.image-modal .modal-next {
    right: 10px;
}

.image-modal .modal-prev:hover,
.image-modal .modal-next:hover {
    color: #bbb;
}



/*Sections of the main page*/

#content-display {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease;
}



#hover-img {
  width: 100%; 
  height: auto;
  transition: height 0.6s ease-in-out; 
}

.hover-me-class {
  position: relative;
  filter: brightness(1);
}

#hover-img-1, #hover-img-2, #hover-img-3, #hover-img-4 {
  width: 100%; /* You can set your own size */
  cursor: pointer; /* Changes the cursor to a pointer to indicate the image is clickable */
}

.hover-me-class {
  position: relative;
  filter: brightness(1);
  cursor: pointer; /* Also ensure the container has a pointer cursor to cover any gaps */
}




.collapse-button {
  display: none; /* Initially hidden, shown only when content is active */
  box-sizing: border-box;
  padding-left: 5px;
  width: 30px;
  margin-bottom: 10px;
  transition: background-color 0.6s ease;
  position: absolute;
  top: 95%;
  right: -3%;
  transform: translateY(-50%);
}

.content-display.active .collapse-button {
  display: flex;
  justify-content: center;
  background-color: black;
  color: white;
  font-size: 15px;
  text-align: center;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
}

.content-display.active .collapse-button:hover {
  border: 1px solid white;
}



/*Slider for the sections*/


.srv-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: auto;
    transition: height 1s ease-out;
}

.srv-slide {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 1s 1s;
    pointer-events: none;
    
}



.srv-slide.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 1s, visibility 0s 0s;
}

.srv-video {
  
    width: 100%;
    height: 600px;
    display: block;
    object-fit: cover;
    overflow: hidden;
    z-index: 1;
}

.srv-video-rm {
  position: fixed; /* Fix the position of the video/div */
  top: 0;
  left: 0;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  z-index: -1; /* Ensure it stays behind other content */
  object-fit: cover; /* Cover the area without losing aspect ratio */
}


.srv-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 600px;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: hsla(0, 0%, 20%, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    overflow-y: auto;
    z-index: 10;
    transform: translateX(0);
    transition: transform 0.5s ease; /* Smooth transition for transform */
}

.srv-content.hidden {
    transform: translateX(-100%); /* Slide out of view to the left */
    visibility: hidden; /* Optional: keep element in the layout */
}


.srv-content-ov-wrapper {
    display: flex; /* This makes the child divs sit side by side */
    max-width: 100%;
    margin-right: 4px;
    margin-bottom: 50px;
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 30px;
    color: #4c4c4c;
    background-color: #FFFFFF;
}

.column-ov {
    flex: 1; /* This ensures that both columns take up equal width */
    padding: 30px; /* Adds padding around the text for better readability */
    text-align: justify; /* Justifies the text for a uniform appearance */
    line-height: 1.6; /* Improves readability */
    
    /* Optional: If you still want the column gap as specified earlier */
    margin-right: 5px; /* Half of your original column-gap to apply between the two columns */
}

.column-ov:last-child {
    margin-right: 0; /* Remove margin on the last column */
}

/* If you want to keep the box shadow and border effects, apply them to the wrapper */
.srv-content-ov-wrapper {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.15), -5px 0 15px rgba(0,0,0,0.15);
    border-left: 1px solid rgba(0,0,0,0.15);
}

.srv-content-cf-wrapper {
    display: flex; /* This makes the child divs sit side by side */
     flex-direction: column;
    max-width: 100%;
    margin-right: 4px;
    margin-bottom: 50px;
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 30px;
    color: #4c4c4c;
    background-color: #FFFFFF;
}

.column-cf {
    flex: 1; /* This ensures that both columns take up equal width */
    padding: 20px; /* Adds padding around the text for better readability */
    text-align: justify; /* Justifies the text for a uniform appearance */
    line-height: 1.6; /* Improves readability */
    
    /* Optional: If you still want the column gap as specified earlier */
    margin-right: 5px; /* Half of your original column-gap to apply between the two columns */
   
}

.column-cf:last-child {
    margin-right: 0; /* Remove margin on the last column */
}

/* If you want to keep the box shadow and border effects, apply them to the wrapper */
.srv-content-cf-wrapper {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.15), -5px 0 15px rgba(0,0,0,0.15);
    border-left: 1px solid rgba(0,0,0,0.15);
     margin-top: -15px;
}



.srv-content-rm {
    column-count: 2;       /* Splits the content into two columns */
    column-gap: 40px;      /* Defines the gap between columns */
    padding: 60px;         /* Adds padding around the text for better readability */
    text-align: justify;   /* Justifies the text for a uniform appearance */
    max-width: 100%;       /* Ensures the content uses the full width available */
    margin: auto;          /* Centers the content block if needed */
     color: #000000; /* Sets the font color to white for the text */
    /* Improves readability */
    line-height: 1.6;
    font-size: 18px;
}

.parallax-section-rm {
    width: 100%;
    height: 400px; /* Adjust the height as needed */
    overflow: hidden;
    position: relative;
}

.parallax-image-rm {
    background-image: url('https://nicheprintandframe.co.uk/pub/media/wysiwyg/nicheimagesrm.jpg'); /* Update with the actual image URL */
    height: 100%;
    width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.full-width-gallery {
    width: 100%;
    padding: 20px;
}

.columns-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .srv-content-rm {
        column-count: 1;   /* Reverts to a single column for smaller screens */
        padding: 15px;     /* Adjusts padding for smaller screens */
    }
}




/* Styling the scrollbar track (the part the scrollbar moves along) */
.srv-content::-webkit-scrollbar-track {
    background-color: #2e2e2e; /* A darker shade for the track */
    border-radius: 10px; /* Optional: Adds rounded corners to the track */
}

/* Styling the scrollbar thumb (the part that you drag) */
.srv-content::-webkit-scrollbar-thumb {
    background-color: rgb(242, 242, 242); /* A lighter shade for the thumb for contrast */
    border-radius: 10px; /* Optional: Adds rounded corners to the thumb */
    border: 3px solid #2e2e2e; /* Optional: Adds a border between the thumb and track */
}

/* Optional: Styling the scrollbar thumb on hover */
.srv-content::-webkit-scrollbar-thumb:hover {
    background-color: #777; /* A lighter shade when hovering over the thumb */
}

/* Styling the scrollbar itself (width and color) */
.srv-content::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
    background-color: #2e2e2e; /* A darker shade for the scrollbar background */
}

/* For other browsers that support scrollbar styling, such as Firefox */
.srv-content {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #555 #2e2e2e; /* thumb and track color */
}




.srv-prev, .srv-next {
    position: fixed;
    top: 30%;
    bottom: 0;
    z-index: 10;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 40px;
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.1);
}

.srv-prev:hover, .srv-next:hover {
    background-color: #333;
}

.srv-prev {
    left: 0;
}

.srv-next {
    right: 0;
}



.imgsrvc {
    
    padding: 25px;
}

.txtsrvc {
    
    padding: 25px;
}



.srv-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    z-index: 10;
}

.srv-nav-btn {
    padding: 5px 10px;
    margin: 0 5px;
    cursor: pointer;
    background-color: #eee;
    border: none;
    transition: background-color 0.2s;
}

.srv-nav-btn.active {
    background-color: #666;
    color: #fff;
}


.srv-additional-content {
    margin-top:15px;
    display: flex;
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; /* Ensures the child elements' borders or shadows are clipped to the parent's border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Subtle shadow for depth */
    background: #ffffff; /* Light background for the whole component */
}





/* Menu Styles */
.srv-menu {
    flex-basis: 25%;
    background: #f9f9f9; /* Slightly off-white background for the menu */
}

.srv-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.srv-menu li {
    cursor: pointer;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.srv-menu li:last-child {
    border-bottom: none; /* Removes the border from the last item */
}

.srv-menu li:hover, .srv-menu li.active-menu-item {
    background-color: #626262;
    color: white;
}










/* Initial display for the first content item - optional, can be controlled by JavaScript */
#text-1 {
    display: block;
}

/* Frame Menu Styles */
.srv-text-right {
    flex-basis: 75%;
    padding: 20px;
    display: none; /* Initially hide all content */
    border-left: 1px solid #eee; /* Subtle separation line */
}

.srv-text-right p {
    margin-top: 0; /* Removes the top margin from the first paragraph for cleaner alignment */
}


/* Content Styles */


/* Menu Container and Items */
.srv-menu-fc {
    flex-basis: 25%; /* Adjust based on your layout requirements */
    background: #f9f9f9;
    padding: 0;
    margin: 0;
}

.srv-menu-fc ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.srv-menu-fc li {
    cursor: pointer;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

.srv-menu-fc li:hover, .srv-menu-fc li.active-menu-item-fc {
    background-color: #626262;
    color: white;
}

/* Submenu specific styles */
.srv-menu-fc li ul.submenu {
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.srv-menu-fc li.active-menu-item-fc ul.submenu {
    max-height: 1000px; /* Sufficiently high to accommodate any submenu */
}

.srv-text-right-fc {
    flex-basis: 75%;
    padding: 20px;
    display: none;
    border-left: 1px solid #eee;
}

/* Ensure all text elements within the menu are styled uniformly */
.srv-menu-fc li ul.submenu li {
    padding: 10px; /* Adjust padding for submenu items */
    border: none; /* Remove borders if previously set */
}

.srv-menu-fc li ul.submenu li:hover, .srv-menu-fc li ul.submenu li.active-submenu-item-fc {
    background-color: #484848; /* Darker shade for hover and active state */
    color: white;
}

 .srv-main-active {
        background-color: #484848; /* Adjust the color to match your design */
        color: #fff; /* Adjust text color if needed */
    }


/* Cookies */

#notice-cookie-block {
    background: #333; /* Dark background for the block */
    color: #fff; /* White text for contrast */
    padding: 12px 1em; /* Adjusted padding */
    display: block;
    font-size: 1rem; /* Adjusted font size for readability */
    border: 1px solid #555; /* Slight border for definition */
    margin: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1000; /* Ensure it's above other content */
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#notice-cookie-block .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

#notice-cookie-block p {
    margin: 0;
    padding-right: 20px; /* Space between text and button */
}

#notice-cookie-block a {
    color: #fff;
    text-decoration: underline;
}

#notice-cookie-block a:hover,
#notice-cookie-block a:focus {
    color: #bbb;
    text-decoration: none;
}

#notice-cookie-block .actions {
    display: flex;
}

#btn-cookie-allow {
    background-color: #fff; /* White background for the button */
    color: #333; /* Dark text for the button */
    border: 1px solid #555; /* Slight border to match the block */
    cursor: pointer;
    padding: 10px 20px; /* Button padding */
    font-size: 1rem; /* Button font size */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

#btn-cookie-allow:hover {
    background-color: #ddd; /* Lighter background on hover */
    color: #333; /* Keeping text color consistent on hover */
}




/* Video Controls Sector */



.video-controls-scr {
    position: absolute;
    top: 520px; 
    right: 3%; /* Align to the right */
    transform: none; /* Remove the translateX(-50%) */
    z-index: 10; /* Ensure controls are visible */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: #fff; /* White text/color for elements */
    padding: 10px;
    border-radius: 5px;
    display: flex;
    gap: 10px;
    opacity: 1; /* Start fully visible */
    transition: opacity 0.1s ease; /* Smooth transition for the opacity change */
}


.video-controls-scr button {
    color: #000; /* Black text for better contrast */
    background: #fff; /* White background for buttons */
    border: 1px solid #000; /* Black border for elements */
    padding: 5px 10px;
    border-radius: 5px;
}

.video-controls-scr input[type="range"] {
    -webkit-appearance: none; /* For WebKit browsers */
    appearance: none;
    width: 100%; /* Full width of its container */
    background: transparent; /* No background */
    cursor: pointer; /* Cursor appears as a pointer */
}

/* Thumb (the slider control) adjustments */
.video-controls-scr input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #fff; /* Black thumb */
    height: 12px; /* Slightly smaller for aesthetics */
    width: 12px; /* Square, but you can adjust as needed */
    border-radius: 50%; /* Circular */
    cursor: pointer;
}

.video-controls-scr input[type="range"]::-moz-range-thumb {
    background: #fff; /* Black thumb for Firefox */
    height: 12px;
    width: 12px;
    border-radius: 50%; /* Circular */
    cursor: pointer;
}

/* Track (the background of the slider) adjustments */
.video-controls-scr input[type="range"]::-webkit-slider-runnable-track,
.video-controls-scr input[type="range"]::-moz-range-track {
    background: #343434; /* Darker track for contrast and visibility */
    height: 2px; /* Thinner track as requested */
}

/* For WebKit browsers, additional styling for the track */
.video-controls-scr input[type="range"]::-webkit-slider-runnable-track {
    background: #343434; /* Ensuring consistency across browsers */
}

.video-wrapper-scr {
    position: relative;
    cursor: pointer;
    
   
}

.video-wrapper-scr-mnt {
    position: relative;
    cursor: pointer;
    
   
}

.video-overlay-scr {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Adjust color as necessary */
    font-size: 20px; /* Adjust size as necessary */
    cursor: pointer;
}

.video-wrapper-scr:hover .video-overlay-scr {
    background: rgba(0, 0, 0, 0.7); /* Increase darkness of the overlay */
    transition: background 0.3s ease; /* Smooth transition for the background change */
}

.video-wrapper-scr-mnt:hover .video-overlay-scr {
    background: rgba(0, 0, 0, 0.7); /* Increase darkness of the overlay */
    transition: background 0.3s ease; /* Smooth transition for the background change */
}

/* Scale the play button up slightly on hover */
#playSymbol {
  
    z-index: 9999;
}

/* Scale the play button up slightly on hover */
#playSymbol:hover {
    transform: scale(1.1); /* Enlarge play symbol */
    transition: transform 0.3s ease; /* Smooth transition for the transformation */
}

/* Video Controls Products */

.video-controls-prd {
    position: absolute;
    top: 430px; /* Position at the bottom */
    right: 3%; /* Align to the right */
    transform: none; /* Remove the translateX(-50%) */
    z-index: 3; /* Ensure controls are visible */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: #fff; /* White text/color for elements */
    padding: 10px;
    border-radius: 5px;
    display: flex;
    gap: 10px;
    opacity: 1; /* Start fully visible */
    transition: opacity 0.1s ease; /* Smooth transition for the opacity change */
}


.video-controls-prd button {
    color: #000 !important; /* Black text for better contrast */
    background: #fff !important; /* White background for buttons */
    border: 1px solid #000 !important; /* Black border for elements */
    padding: 5px 10px !important;
    border-radius: 5px !important;
}




.video-controls-prd input[type="range"] {
    -webkit-appearance: none; /* For WebKit browsers */
    appearance: none;
    width: 100%; /* Full width of its container */
    background: transparent; /* No background */
    cursor: pointer; /* Cursor appears as a pointer */
}

/* Thumb (the slider control) adjustments */
.video-controls-prd input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #fff; /* Black thumb */
    height: 12px; /* Slightly smaller for aesthetics */
    width: 12px; /* Square, but you can adjust as needed */
    border-radius: 50%; /* Circular */
    cursor: pointer;
}

.video-controls-prd input[type="range"]::-moz-range-thumb {
    background: #fff; /* Black thumb for Firefox */
    height: 12px;
    width: 12px;
    border-radius: 50%; /* Circular */
    cursor: pointer;
}

/* Track (the background of the slider) adjustments */
.video-controls-prd input[type="range"]::-webkit-slider-runnable-track,
.video-controls-prd input[type="range"]::-moz-range-track {
    background: #343434; /* Darker track for contrast and visibility */
    height: 2px; /* Thinner track as requested */
}

/* For WebKit browsers, additional styling for the track */
.video-controls-prd input[type="range"]::-webkit-slider-runnable-track {
    background: #343434; }


.video-controls-prd-mnt {
    position: absolute;
    top: 430px; /* Position at the bottom */
    right: 3%; /* Align to the right */
    transform: none; /* Remove the translateX(-50%) */
    z-index: 3; /* Ensure controls are visible */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: #fff; /* White text/color for elements */
    padding: 10px;
    border-radius: 5px;
    display: flex;
    gap: 10px;
    opacity: 1; /* Start fully visible */
    transition: opacity 0.1s ease; /* Smooth transition for the opacity change */
}


.video-controls-prd-mnt button {
    color: #000 !important; /* Black text for better contrast */
    background: #fff !important; /* White background for buttons */
    border: 1px solid #000 !important; /* Black border for elements */
    padding: 5px 10px !important;
    border-radius: 5px !important;
}




.video-controls-prd-mnt input[type="range"] {
    -webkit-appearance: none; /* For WebKit browsers */
    appearance: none;
    width: 100%; /* Full width of its container */
    background: transparent; /* No background */
    cursor: pointer; /* Cursor appears as a pointer */
}

/* Thumb (the slider control) adjustments */
.video-controls-prd-mnt input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #fff; /* Black thumb */
    height: 12px; /* Slightly smaller for aesthetics */
    width: 12px; /* Square, but you can adjust as needed */
    border-radius: 50%; /* Circular */
    cursor: pointer;
}

.video-controls-prd-mnt input[type="range"]::-moz-range-thumb {
    background: #fff; /* Black thumb for Firefox */
    height: 12px;
    width: 12px;
    border-radius: 50%; /* Circular */
    cursor: pointer;
}

/* Track (the background of the slider) adjustments */
.video-controls-prd-mnt input[type="range"]::-webkit-slider-runnable-track,
.video-controls-prd-mnt input[type="range"]::-moz-range-track {
    background: #343434; /* Darker track for contrast and visibility */
    height: 2px; /* Thinner track as requested */
}

/* For WebKit browsers, additional styling for the track */
.video-controls-prd-mnt input[type="range"]::-webkit-slider-runnable-track {
    background: #343434; }


/* Enlarged Video Styling */
.enlarged-video {
    position: fixed; /* Fix position to the screen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* Adjust based on preference */
    height: auto;
    z-index: 1000; /* Ensure it's above other content */
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Optional: adds shadow for better visibility */
}

.vidmainpage {max-height: 200px !important;
    
    
}

.txtmainlog {z-index: 1000 !important;
    
    
}

.mainrowvidnw { height: 80vh;
                
                
    
}



.page-header.type3.sticky-header .header-main {
    
    background: rgba(56, 56, 56, 0.9) !important;
    
}


::-webkit-scrollbar {
    width: 12px; /* width of the entire scrollbar */
}

::-webkit-scrollbar-track {
    background: #333; /* color of the tracking area */
}

::-webkit-scrollbar-thumb {
    background-color: #f1f1f1; /* color of the scroll thumb */
    border-radius: 6px; /* roundness of the scroll thumb */
    border: 3px solid #333; /* creates padding around scroll thumb */
}

/* For IE, Edge, and Firefox */
* {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #f1f1f1 #333; /* thumb and track color */
}

.page-title-wrapper {
    display: none;
}
.ntm-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ntm-member {
    background-color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.ntm-member:hover {
    transform: scale(1.05);
}

.ntm-member img {
    width: 100%;
    height: auto;
    transition: all 0.3s ease-in-out;
}

.ntm-modal {
    position: fixed;  
    display: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.ntm-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    display: block;
}

.ntm-modal-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.ntm-modal-content img {
    max-width: 100px;
    border-radius: 50%;
    margin-right: 20px;
}

.ntm-modal-content div {
    flex: 1;
}

.ntm-close {
    position: absolute;
    right: 10px;
    top: 10px; 
    cursor: pointer;
    font-size: 30px;
    color: #fff; /* Set the close button color to white for visibility */
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    line-height: 1;
    padding: 5px;
    z-index: 10; /* Ensure it appears above other elements */
}

.ntm-modal-bio {
    text-align: justify;
    margin-top: 20px;
}



.rm_info_img {
      display: flex; /* Changed from grid to flex for easier vertical alignment */
      flex-wrap: wrap; /* Allows items to wrap as needed */
      gap: 10px;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      margin-top: 10px;
      justify-content: center; /* Centers items horizontally */
      align-items: center; /* Centers items vertically */
      height: 100%; /* Make sure the container has a height to align items within */
      overflow: hidden; /* Ensures the flexbox doesn't exceed its container */
    }
    
    .rm_info_img img {
      max-width: 200px; /* Adjust the max-width as needed */
      height: auto;
      border-radius: 4px;
      object-fit: cover;
    }
    
    
    
    
.grid-container-rm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.thumbnail-item-rm {
    position: relative;
}

.thumbnail-rm {
    width: 100%; /* Ensure the image takes up the full width of its container */
}

.thumbnail-title {
    text-align: center; /* Center the title text */
    margin-top: 5px; /* Add margin between the image and the title */
    font-size: 14px;
    color: black; /* Adjust text color as needed */
}

      
      .rm_grid-item {
        position: relative;
        cursor: pointer;
      }
    
      .rm_grid-item img {
        width: 100%;
        display: block;
        transition: opacity 0.3s ease;
      }
    
      
  
    
     
    
      /* Ensure the image retains its pointer events */
      .rm_grid-item img {
        pointer-events: auto;
      }


/* Button print */

.button-container-print {
    text-align: center; /* Centers the buttons */
    margin: 0 auto; /* Ensures the container is centered */
    width: 100%; /* Takes full width of its parent */
}

.action-print {
    display: block !important; 
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important; /* Removes underline from links */
    margin: 5px 0 !important; /* Adds a little space between the buttons */
    width: auto !important; /* Auto width to fit the text */
    margin-left: auto !important; /* Along with margin-right: auto for centering block elements */
    margin-right: auto !important;
}

a.action-print {
    color: #626262 !important;
}

.action-print:hover {
    background-color: #626262 !important;
    color: white;
}

.action-print:active {
    background-color: #1a1a1a !important; /* Slightly darker shade for click */
    border-color: #1a1a1a !important;
}

/* Button book*/

.button-container-book {
        text-align: center; /* Centers the buttons */
        margin: 0 auto; /* Ensures the container is centered */
        width: 100%; /* Takes full width of its parent */
    }

 .action-book {
        display: block; 
        background-color: transparent;
        color: #626262;
        border: 2px solid #626262;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
         cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none; /* Removes underline from links */
        margin: 5px 0; /* Adds a little space between the buttons */
        width: auto; /* Auto width to fit the text */
        margin-left: auto; /* Along with margin-right: auto for centering block elements */
        margin-right: auto;
    }
    
    a.action-book {
        color: #626262;
    }

    .action-book:hover {
        background-color: #626262;
        color: white;
    }

    .action-book:active {
        background-color: #1a1a1a; /* Slightly darker shade for click */
        border-color: #1a1a1a;
    }



/* Button calculate*/

.button-container-calc {
        text-align: center; /* Centers the buttons */
        margin: 0 auto; /* Ensures the container is centered */
        width: 100%; /* Takes full width of its parent */
    }

 .action-calc {
        display: block; 
        background-color: transparent;
        color: #FFFFFF;
        border: 2px solid #FFFFFF;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
         cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none; /* Removes underline from links */
        margin: 5px 0; /* Adds a little space between the buttons */
        width: auto; /* Auto width to fit the text */
        margin-left: auto; /* Along with margin-right: auto for centering block elements */
        margin-right: auto;
    }
    
    a.action-calc {
        color: #FFFFFF;
    }

    .action-calc:hover {
        background-color: #626262;
        color: white;
    }

    .action-calc:active {
        background-color: #1a1a1a; /* Slightly darker shade for click */
        border-color: #1a1a1a;
    }



/* RM*/


#default-content-rm {
  display: block; /* Visible by default */
}

#text-cont,
#text-wood,
#text-smooth,
#text-nat,
#text-sat {
  display: none; /* Other content hidden by default */
}



.modal-rm {
  display: none;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.9);
}

.modal-content-rm {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  max-width: 60%; /* Adjust maximum width as needed */
  max-height: 60%; /* Adjust maximum height as needed */
}

.close-rm {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #000000;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-rm:hover,
.close-rm:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}



.thumbnail-container-rm {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.thumbnail-rm {
   /* Adjust the width as needed */
    cursor: pointer;
}

.thumbnail-rm:hover {
    opacity: 0.7; /* Change opacity on hover */
}



.two-column-container-rm {
    display: flex;  /* This enables Flexbox layout */
    width: 100%;    /* Sets the container width to fill its parent */
}



.two-column-container-rm .column-rm:first-child {
    flex: 2;  
}

.two-column-container-rm .column-rm:last-child {
    flex: 1;  
}


/* Style for the overall product details container */
.product-details {
   
    margin-left: 25px;
    padding: 20px;
    background-color: #f9f9f9; /* Light background for the form area */
    box-shadow: 0 2px 15px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    border-radius: 8px; /* Rounded corners */
}

/* Styling for each field within the form */
.product-details .field {
    margin-bottom: 15px;
}

/* Label styling */
.product-details .label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

/* Select dropdown styling */
.product-details .super-attribute-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    transition: border-color 0.3s;
}

.product-details .super-attribute-select:focus {
    border-color: #0056b3; /* Highlight color when focused */
}

/* Button styling */
.product-details .action.primary.tocart {
    display: block;
    width: 100%;
    
    background-color: #fff; 
    color: #626262;
    border: none;
    border-radius: 1px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s;
}

.product-details .action.primary.tocart:hover {
    background-color: #626262; 
    color: #fff;
}

/* SKU and price display styling */

/* SKU text styling */
.product-details .SKU {
    font-size: 12px; /* Smaller font size for SKU */
    color: #666; /* Slightly lighter color for less emphasis */
    margin-bottom: 15px; /* Adjust spacing as needed */
}

/* Price text styling */
.product-details #base-price {
    font-size: 20px; /* Larger font size for price to make it stand out */
    color: #333; /* Darker color for more emphasis */
    font-weight: bold; /* Makes the price text bold */
    margin-bottom: 15px; /* More spacing below the price */
}




.image-row-rm {
  display: flex;
}

.image-container-rm {
  position: relative;
    display: inline-block;
}

.first-image-rm,
.second-image {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

.second-image-rm {
    opacity: 0;
}

.image-container-rm:hover .first-image-rm {
    opacity: 0;
}

.image-container-rm:hover .second-image-rm {
    opacity: 1;
}



/* Update the arrow buttons style */
.arrow-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between; /* Add space between the buttons */
  width: calc(100% - 20px); /* Adjust width to accommodate both buttons */
  margin: 0 10px; /* Add margin to position the buttons */
}

.arrow-left,
.arrow-right {
  font-size: 24px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.arrow-left:hover,
.arrow-right:hover {
  background-color: rgba(0, 0, 0, 0.7);
}


/* Style for the thumbnail container */
.thumbnail-container-rm {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* Increase margin for better spacing */
}

/* Style for the individual thumbnails */
.thumbnail-small {
    border: 1px solid;
  width: 80px; /* Increase thumbnail size */
  height: 60px; /* Increase thumbnail size */
  margin: 0 5px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* Style for the active thumbnail */
.active-thumbnail {
  border: 2px solid #007bff;
}

/* Position the thumbnails at the bottom */
.modal-content-rm {
  position: relative;
}

.thumbnail-container-rm {
  position: absolute;
  bottom: 10px; /* Adjust the distance from the bottom as needed */
  left: 0;
  right: 0;
}


.image-title {
    color: black;
    padding-top: 150px;
    font-size: 20px;
    text-align: center; /* Center the text horizontally */
    display: flex;
    justify-content: center; /* Center the flex items horizontally */
}


















.txtsectabs {
  display: flex; /* Use flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  padding: 3%;
  /* Add any other styles you need for txtsectabs here */
}




.full-width-testimonial {
  width: 100%;
  height: auto;
}

.testimonial {
    width: 80%;  /* Adjust this value to change the width of the testimonial */
    margin: auto;  /* Center the testimonial */
    font-size: 1.2em;  /* Increase the font size */
    padding: 20px;  /* Add some padding around the testimonial */
}
.testimonial-content {
  display: flex;
  align-items: center;
}

.full-width-testimonial {
  min-width: 200px;
}











div.header-main {
    background: rgba(rgba(56, 56, 56, 0.7)) !important;
}
 
#html-body > div.page-wrapper > header > div.header-main > div > div.header-left > div {
     background: rgba(255, 255, 255, 0.0) !important;
}
 
 
#mpajaxcart-popup-main {
     
     min-width: 60% !important;
     
     padding: 5% !important;
     
     background: rgba(255, 255, 255, 0.8) !important;
     
     color: #000000 !important;
 }
 
  .mpquickview-popup div.column.main {
     
     
     
     background: rgba(255, 255, 255, 0.0) !important;
 }
 
 
 .papertypessection a.action.tocompare.actions-secondary  {
    
    visibility:hidden !important;
}
 

.papertypessection a.action.towishlist.actions-secondary  {
    
    visibility:hidden !important;
}
 
.papertypessection .price-box .price {
    
    visibility:hidden !important;
}


.papertypessection .product-item-actions {
    
    visibility:hidden !important;
}
 
 .papertypessection .product-item {
     
   
     
     
 }
 
 .product-item-photo {
       
      padding: 10px !important;
 }
.calcmain {
min-height: 300px !important;
}
 
 .header-main {
     
  
 }
 
 
  .category-printing-products a.action.tocompare.actions-secondary  {
    
    visibility:hidden !important;
}
 

.category-printing-products a.action.towishlist.actions-secondary  {
    
    visibility:hidden !important;
}





 
/* Base styles for tab headers */
.tab-header {
  line-height: 0px !important;
      max-height: 50px !important;
  overflow: hidden;
}

/* Set the max height of the tabs and make them evenly spread */
li[role="tab"] {
  max-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  flex-grow: 1; /* Allow tabs to fill available space */
  text-align: center; /* Center align the text horizontally */
  z-index: 1;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Create a flex container to spread the tabs evenly across the full width */
div[data-content-type='tabs'] .tabs-navigation {
  display: flex;
  justify-content: space-between; /* Distribute tabs evenly */
  align-items: center; /* Center align vertically */
  flex-wrap: wrap; /* Allow tabs to wrap to the next row */
  z-index: 1;
  position: relative;
  width: 100%; /* Ensure the container takes up the entire available width */
}

/* Style for the tab title */
.tab-title {
  font-size: 12px !important;
  color: #fff !important;
}

/* Hover effect for the whole tab */
li[role="tab"]:hover {
  background: #fff !important;
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

li[role="tab"]:hover .tab-title {
  color: #000000 !important;
  transition: color 0.3s ease; /* Smooth transition for text color */
}

/* Active tab state */
li[role="tab"].ui-state-active {
  background: #fff !important;
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

li[role="tab"].ui-state-active .tab-title {
  color: #000000 !important;
  transition: color 0.3s ease; /* Smooth transition for text color */
}







.txtmaintb  {
    position: relative;
    
    
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 35px;
    padding-right: 35px;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    text-align: left;
    overflow-y: auto; /* Scrollable content */

    display: block; /* Default block display */
}





/* Styling the scrollbar track (the part the scrollbar moves along) */
.txtmaintb::-webkit-scrollbar-track {
    background-color: #2e2e2e; /* A darker shade for the track */
    border-radius: 10px; /* Optional: Adds rounded corners to the track */
}

/* Styling the scrollbar thumb (the part that you drag) */
.txtmaintb::-webkit-scrollbar-thumb {
    background-color: rgb(242, 242, 242); /* A lighter shade for the thumb for contrast */
    border-radius: 10px; /* Optional: Adds rounded corners to the thumb */
    border: 3px solid #2e2e2e; /* Optional: Adds a border between the thumb and track */
}

/* Optional: Styling the scrollbar thumb on hover */
.txtmaintb::-webkit-scrollbar-thumb:hover {
    background-color: #777; /* A lighter shade when hovering over the thumb */
}

/* Styling the scrollbar itself (width and color) */
.txtmaintb::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
    background-color: #2e2e2e; /* A darker shade for the scrollbar background */
}

/* For other browsers that support scrollbar styling, such as Firefox */
.txtmaintb {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #555 #2e2e2e; /* thumb and track color */
}








 
 .mainpageinsta {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff;
  
}

.mainpagetextbckgrnd {
background: rgba(80, 80, 80, 0.9) !important;
color: #fff;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  margin-top: 3%;
  margin-bottom: 3%;
  padding-top: 5%;
  padding-bottom: 2%;
  padding-left: 5%;
  padding-right: 5%;
  font-size: 15px;
  text-indent: 0.3em;
  line-height: 0.3em;
}

.mainsldrttle {
color: #fff;
margin-top: 15%;
}

.slidermainpage {
  display: flex; /* Use flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100vw; /* Set the width to 100% of the viewport width */
  height: 100vh; /* Set the height to 100% of the viewport height */
  margin: 0; /* Remove any margins */
}

@media screen and (max-height: 1090px) {
  .slidermainpage {
    margin-top: -10%;
    
  }
}


  .imgmainslider {
    margin-top: 11%;
    
  }



.calctest {
min-width: 100%;
min-height: 1000px;
border: 0px;
padding:20px;
}

a.pagebuilder-button-primary {
background: transparent !important;
border: 0px !important;
cursor: pointer !important;

}






.btnmainpg {
  --b: 3px;   /* border thickness */
  --s: .15em; /* size of the corner */
  --c: #fff;
  
  padding: calc(.05em + var(--s)) calc(.3em + var(--s));
  color: var(--c);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--c) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .2em;
}

.btnmainpg:hover,
.btnmainpg:focus-visible{
  --_p: 0px;
  outline-color: var(--c);
  outline-offset: .15em;
}

.btnmainpg:active {
  background: var(--c);
  color: #fff;
}

.btnmainpg {
  font-weight: bold;
  font-size: 1.7rem;
  cursor: pointer;
  border: none;
  margin: .1em;
}



.btnmainpgrm {
  --b: 1px;   /* border thickness */
  --s: .15em; /* size of the corner */
  --c: #fff;
  
  padding: calc(.05em + var(--s)) calc(.3em + var(--s));
  color: var(--c);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--c) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .2em;
}

.btnmainpgrm:hover,
.btnmainpgrm:focus-visible{
  --_p: 0px;
  outline-color: var(--c);
  outline-offset: .35em;
}

.btnmainpgrm:active {
  background: var(--c);
  color: #fff;
}

.btnmainpgrm {
  
  filter: brightness(1.2);
  
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
  
padding-top: 13px;
padding-left: 10px;
  text-align: center;
}

.rmcolumn {
  display: flex;
  justify-content: center; /* Align horizontally in the center */
  align-items: center;     /* Align vertically in the center */
  height: 100%;            /* Take up full height of its container */
}

.btnmainpg2 {
  --b: 1px;   /* border thickness */
  --s: .15em; /* size of the corner */
  --c: #fff;
  
  padding: calc(.05em + var(--s)) calc(.3em + var(--s));
  color: var(--c);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--c) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .2em;
}

.btnmainpg2:hover,
.btnmainpg2:focus-visible{
  --_p: 0px;
  outline-color: var(--c);
  outline-offset: .35em;
}

.btnmainpg2:active {
  background: var(--c);
  color: #fff;
}

.btnmainpg2 {
  
  filter: brightness(1.2);
  
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
  margin-top: 90%;
padding-top: 13px;
padding-left: 10px;
  text-align: center;
}




.btnmainpg3 {
  --b: 1px;   /* border thickness */
  --s: .15em; /* size of the corner */
  --c: #fff;
  
  padding: calc(.03em + var(--s)) calc(.2em + var(--s));
  color: var(--c);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--c) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .2em;
}

.btnmainpg3:hover,
.btnmainpg3:focus-visible{
  --_p: 0px;
  outline-color: var(--c);
  outline-offset: .35em;
}

.btnmainpg3:active {
  background: var(--c);
  color: #fff;
}

.btnmainpg3 {
  
  filter: brightness(1.2);
  
  font-size: 0.6rem;
  cursor: pointer;
  border: none;
  margin: 30px;
padding-top: 13px;
padding-left: 10px;
  text-align: center;
}




.btnservices {
  --b: 1px;   /* border thickness */
  --s: .15em; /* size of the corner */
  --c: #fff;
  width: 500px;
  padding: 0;
  color: var(--c);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--c) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .2em;
  
  display: flex; /* Add flex display */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  margin-top: 30px;
}

.btnservices:hover,
.btnservices:focus-visible {
  --_p: 0px;
  outline-color: var(--c);
  outline-offset: .35em;
}

.btnservices:active {
  background: var(--c);
  color: #fff;
}

.btnservices {
  filter: brightness(1.2);
  font-size: 0.6rem;
  cursor: pointer;
  border: none;
  padding-top: 13px;
  padding-left: 10px;
  text-align: center;
}








.prntnvid {
  filter: brightness(0.8);
  height: 200px;
}

.prntnvid:hover {
filter:  brightness(1);
         transition: .6s;
         cursor: pointer;
 height: 375px;
}

.clmnmaintab3 {
  filter: brightness(1);
  background-image: url("https://nicheprintandframe.co.uk/media/wysiwyg/Printing_Main_Menu_placeholder.jpg") !important;
}

.clmnmaintab3:hover {
background-image: url("https://nicheprintandframe.co.uk/media/wysiwyg/Printing_Main_Tab.gif") !important;
filter:  brightness(1.5);
         transition: .6s;
         cursor: pointer;
}


.clmnmaintab4 {
  filter: brightness(1);
  background-image: url("https://nicheprintandframe.co.uk/media/wysiwyg/Scanning_Main_Menu_placeholder.jpg") !important;
}

.clmnmaintab4:hover {
background-image: url("https://nicheprintandframe.co.uk/media/wysiwyg/Scanning_Main_Tab.gif") !important;
filter:  brightness(1.5);
         transition: .6s;
         cursor: pointer;
}



div.search-area.show-icon {
    display: none;
}

a.wishlist.mr-1 {
    display: none;
}

.full-width-video {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}


@media (max-width: 1024px) {
    .client {
        width: calc(50% - 10px); /* Two items per row minus gap */
    }
}



@media screen and (min-width: 768px) {
    
    
   
    
   
    .rmmob {
      display: none;
  }
    
    .click-container-mob {
        display: none;
    }
    
    .sldrsecmob {
    display: none;
}

.srv-content-cf-wrapper-mob {
    display: none;
}

.srv-content-ov-wrapper-mob {
    
     display: none;
    
}
    
}


.logo img {
    max-width: 50px;
     
    
}




.nav-sections-item-title a[href="#store.links"] {
    display: none;
}

.section-item-title {
    display: none;
}






@media screen and (max-width: 768px) { /* Targeting devices with width less than or equal to 768px */

.client {
        width: calc(100% - 10px); /* One item per row minus gap */
    }


/* Gallery Slider Styling */

.gallery-slider {
    position: relative;
    width: 100%; /* Ensure full width */
}

.slider-controls {
    position: absolute;
    left: -30px; /* Adjusted for visibility */
    right: -30px; /* Adjusted for visibility */
    top: 40%;
    display: flex;
    justify-content: space-between;
     z-index: 1;
     pointer-events: none;
}

.prev, .next {
    cursor: pointer;
    padding: 5px;
    background: transparent !important; /* Darker background for visibility */
    
    font-size: 20px;
    border: 0px !important;
    box-shadow: none !important;
    pointer-events: auto; /* Ensure they are clickable */
    
}

.slider-controls > .prev,
.slider-controls > .next {
    visibility: visible !important; /* Ensure the buttons are not hidden */
    opacity: 1; /* Ensure the buttons are fully opaque */
    
}


.gallery-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    margin: 10px 20px 30px; /* top | right & left | bottom */
    z-index: 2;
    cursor: pointer;
    
}

.gallerymount {
    flex: 0 0 100%; /* Each item takes up full width on mobile */
    box-sizing: border-box;
    padding: 10px; /* Padding around items */
    z-index: 2;
}

.gallerymount:last-child {
    margin-right: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.gallery-grid::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.gallery-grid {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}



.video-wrapper-scr-mnt {
    
    position: relative;
    cursor: pointer;
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    margin-right: 4px;
    margin-left: 1px;
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.15), -5px 0 10px rgba(0, 0, 0, 0.15);
   
}


.full-width-video {
  
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
    overflow: hidden;
    z-index: 1;
}

.video-wrapper-scr {
    position: relative;
    cursor: pointer;
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    margin-right: 4px;
    margin-left: 1px;
   box-shadow: 5px 0 10px rgba(0, 0, 0, 0.15), -5px 0 10px rgba(0, 0, 0, 0.15);
}


.video-controls-prd {
  position: absolute;
  top: 598px; /* Fixed height from the top */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center horizontally by shifting left by 50% of its own width */
  
  width: calc(100% - 15px);
  z-index: 3; /* Ensure controls are visible */
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  color: #fff; /* White text/color for elements */
  padding: 10px;
  border-radius: 0;
  display: flex;
  gap: 10px;
  opacity: 1; /* Start fully visible */
  transition: opacity 0.1s ease; /* Smooth transition for opacity changes */
  margin-left: -2px;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.15), -5px 0 10px rgba(0, 0, 0, 0.15); /* Shadows only on the left and right */
}
  
 .video-controls-prd-mnt {
  position: absolute;
  top: 733px; /* Fixed height from the top */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center horizontally by shifting left by 50% of its own width */
  
  width: calc(100% - 15px);
  z-index: 3; /* Ensure controls are visible */
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  color: #fff; /* White text/color for elements */
  padding: 10px;
  border-radius: 0;
  display: flex;
  gap: 10px;
  opacity: 1; /* Start fully visible */
  transition: opacity 0.1s ease; /* Smooth transition for opacity changes */
  margin-left: -2px;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.15), -5px 0 10px rgba(0, 0, 0, 0.15); /* Shadows only on the left and right */
} 

.srv-content-cf-wrapper {
    display: none;
}

.srv-content-cf-wrapper-mob {
    display: flex; /* This makes the child divs sit side by side */
    max-width: 100%;
    margin-right: 4px;
    margin-top: 56px;
    margin-bottom: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 15px;
    color: #4c4c4c;
    background-color: #FFFFFF;
    
    box-shadow: 5px 0px 10px rgba(0,0,0,0.15), -5px 0 15px rgba(0,0,0,0.15);
    border-left: 1px solid rgba(0,0,0,0.15);
}

.column-cf-mob {
    flex: 1; /* This ensures that both columns take up equal width */
    padding: 20px; /* Adds padding around the text for better readability */
    text-align: justify; /* Justifies the text for a uniform appearance */
    line-height: 1.6; /* Improves readability */
    
    /* Optional: If you still want the column gap as specified earlier */
    margin-right: 5px; /* Half of your original column-gap to apply between the two columns */
   
}

.column-cf-mob:last-child {
    margin-right: 0; /* Remove margin on the last column */
}



.video-overlay-scr {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Adjust color as necessary */
    font-size: 20px; /* Adjust size as necessary */
    cursor: pointer;
}

.video-wrapper-scr:hover .video-overlay-scr-mob {
    background: rgba(0, 0, 0, 0.7); /* Increase darkness of the overlay */
    transition: background 0.3s ease; /* Smooth transition for the background change */
}





 .srv-additional-content {
        flex-direction: column;
    }

    .srv-menu-fc {
        flex-basis: 100%; /* Take full width for the menu */
        order: 1; /* Ensure the menu is placed above the content */
    }

    .srv-text-right-fc {
        flex-basis: 100%; /* Full width for the content area */
        order: 2; /* Content comes after the menu */
        border-left: none; /* Remove the border that was previously on the left */
    }
 .srv-menu-fc {
        display: flex;
        flex-direction: column;
        width: 100%;  /* Ensures full width */
        margin: 0;    /* Removes any default margin */
        padding: 0;   /* Removes any default padding */
    }

    .srv-menu-fc li {
    display: block !important;
    width: 100% !important;
}

    .srv-menu-fc li ul.submenu {
        width: 100%;  /* Submenu width is 100% to match the parent item */
    }

    .srv-text-right-fc {
        flex-basis: 100%; /* Allows content area to fill available space when visible */
        padding: 5px;
    }



.srv-nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;  /* Adjusted to flex-start to ensure natural alignment */
    margin-bottom: 5px;
    z-index: 10;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-left: 10px;  /* Ensure padding doesn't obstruct scrolling */
    padding-right: 10px; /* Ensure padding doesn't obstruct scrolling */
}

.srv-nav::-webkit-scrollbar {
    display: none;
}



.srv-content-ov-wrapper {
    
     display: none;
    
}

.srv-content-ov-wrapper-mob {
    display: flex; /* This makes the child divs sit side by side */
    max-width: 100%;
    margin-right: 4px;
    margin-top: 55px;
    margin-bottom: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 30px;
    color: #4c4c4c;
    background-color: #FFFFFF;
    
    box-shadow: 5px 5px 10px rgba(0,0,0,0.15), -5px 0 15px rgba(0,0,0,0.15);
    border-left: 1px solid rgba(0,0,0,0.15);
}

.video-controls-scr {
    position: absolute;
    top: 327px; /* Set top to 50% of the parent container */
    left: 50%; /* Center horizontally too, aligns the top-left corner at the center */
    transform: translate(-50%, -50%); /* Shift back by 50% of its own width and height */
    width: 100%;
    z-index: 3; /* Ensure controls are visible */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: #fff; /* White text/color for elements */
    padding: 10px;
    border-radius: 0;
    display: flex;
    gap: 10px;
    opacity: 1; /* Start fully visible */
    transition: opacity 0.1s ease; /* Smooth transition for opacity changes */
}



.srv-video {
  
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
    overflow: hidden;
    z-index: 1;
}


.mpccontainer {
    
    padding-left: 25px;
    padding-right: 25px;
  
}

.mpctext {
    
    display: none;
}

.mpctextmob {
    
    display: visible;
}


#html-body > div.page-wrapper > header > div.header-main > div > div.header-left > div {
     background: rgba(255, 255, 255, 1) !important;
}



.section-item-content {
    height: 100%; /* This makes the content take up the entire height of its parent */
    overflow-y: auto; /* Adds scroll if content exceeds the height */
}


.click-container {
  position: relative;
  margin-bottom: 5px;
}

.click-me-class {
  position: relative;
  cursor: pointer;
}

.click-img-1, .click-img-2, .click-img-3, .click-img-4 {
  width: 100%; /* Responsive image width */
}

.click-title {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.click-content-display {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.click-collapse-button {
  display: none; /* Initially hide the collapse button */
}



  

  

  
  


.minicart-wrapper .action.showcart .counter.qty {
  
  background-color: #00a6a6 !important;
  
}
  
  .slidermainpage {
  display: flex; /* Use flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100vw; /* Set the width to 100% of the viewport width */
  height: 100vh; /* Set the height to 100% of the viewport height */
  margin-top: -30%; /* Remove any margins */
  padding-bottom: 5%;
}
  
  .imgmainslider {
    max-width: 220px;
   margin-top: 65% !important;
    
  }
  
  .ourservicesmain {
      
      margin-top: -25px;
      font-size: 20px;
      margin-left: 25px;
  }
  
  a.pagebuilder-button-primary, button.pagebuilder-button-primary, div.pagebuilder-button-primary  {
      
     margin: -25px 10px -20px 10px;
  }
  
  .btnmainpg {
  --b: 3px;   /* border thickness */
  --s: .15em; /* size of the corner */
  --c: #fff;
 
  
  color: var(--c);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--c) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .2em;
}

.btnmainpg:hover,
.btnmainpg:focus-visible{
  --_p: 0px;
  outline-color: var(--c);
  outline-offset: .10em;
}

.btnmainpg:active {
  background: var(--c);
  color: #fff;
}

.btnmainpg {
  font-weight: bold;
  font-size: 0.7rem;
  cursor: pointer;
  
 

}


.lftcolumnmtabs {
    
    min-height: 300px;
}


.mainsldrttle {
    
    font-size: 10px;
}


 
 
 div[data-content-type='tabs'] .tabs-navigation {
    flex-wrap: wrap; /* Allow tabs to wrap to the next line */
  }

  li[role="tab"] {
    flex-basis: 50%; /* Set each tab to take up one-third of the container width */
    max-width: 50%; /* Ensure tabs do not grow beyond one-third */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 5px; /* Add some padding for better readability */
    font-size: 10px; /* Optionally, reduce the font size for smaller screens */
  }

  .tab-header {
    max-width: 100%; /* Adjust the max-width of the tab header for smaller screens */
  }

  .tab-title {
    font-size: 10px !important; /* Reduce the font size for the tab titles */
  } 
  
  
  a.ba_floating-button {
        display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

 .btnservices {
        display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-bottom: 10px;
    min-width: 100% !important;

}
a.pagebuilder-button-primary {
    padding:0;
}


  
  .rmmob {
      display: block;
  }
  
  .sldrsecscreen {
      
  }
  
  .srv-nav {
      
  }
  
  .srv-prev {
      
      display: none;
      
  }
  
  .srv-next {
      
      display: none;
      
  }
  
  .mobsldr_container {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.mobsldr_slide {
  position: relative;
  width: 100%;
  height: 100vh;
}

.mobsldr_video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobsldr_text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dark overlay */
  color: white;
  overflow-y: auto; /* Allows scrolling for overflow text */
}

.mobsldr_text-content {
  padding: 20px;
}

.mobsldr_prev, .mobsldr_next {
  position: absolute;
  bottom: 20px;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.8);
}

.mobsldr_next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.mobsldr_prev:hover, .mobsldr_next:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
}

  
}

.columns .column.main {
    max-width: 100%;
    padding-bottom: 0px;
}