@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); /* New font import */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dangrek&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Leckerli+One&display=swap');













body {
    font-family: 'Lora', serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Changed background color to white */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full viewport height */
}

header {
    background-color: #ffffff; /* Changed background color to white */
    color: white;
    padding: 0.5em 1em; /* Add horizontal padding for the logo and menu button */
    position: sticky; /* Make the header sticky */
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensure the header stays on top */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between logo and menu */
    height: 85px; /* Reduce header height */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

header img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    margin-left: 20px;
}

/* Menu Button Styles */
.menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 10px;
}

.menu-button div {
    width: 35px;
    height: 3px; /* Make the lines thinner */
    background-color: #666; /* Dark grey color */
    margin: 4px 0; /* Adjust margin to balance spacing */
    transition: 0.4s;
    position: relative;
}

/* Add outlined circles to lines */
.menu-button div::before,
.menu-button div::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #666; /* Dark grey border for outline */
    border-radius: 50%;
    left: -12px;
    transition: 0.4s;
    opacity: 0;
}

/* Toggle menu button to "X" */
.change .bar1 {
    transform: rotate(-45deg) translate(-5px, 5px);
}

.change .bar1::before {
    opacity: 1;
    transform: translate(2px, -3.2px); /* Adjust the circle position */
}

.change .bar3 {
    transform: rotate(45deg) translate(-5px, -5px);
}

.change .bar3::before {
    opacity: 1;
    transform: translate(3px, -2px); /* Adjust the circle position */
}

.change .bar2 {
    opacity: 0;
}

/* Dropdown Styles */
.nav {
    position: relative;
    padding-right: 1em; /* Ensure the dropdown doesn't get cut off */
}

.nav .dropdown-content {
    display: none;
    position: absolute;
    right: 0; /* Ensure the dropdown aligns to the right edge */
    background-color: #ffffff; /* Changed background color to white */
    min-width: 190px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-family: 'Quicksand';
    font-size: 1.2em;
}

.nav .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.nav .dropdown-content a:hover {
    background-color: #ddd;
}

.nav .dropdown-content.show {
    display: block;
}


/* Styles for the new sticky bar */
.sticky-bar {
    position: sticky;
    top: 85px; /* Adjust to match the height of the header */
    width: 100%;
    background-color: #333; /* Dark background color */
    color: white; /* White text color */
    display: flex;
    justify-content: space-around; /* Space links evenly */
    align-items: center; /* Center links vertically */
    height: 30px; /* Adjust height as needed */
    z-index: 999; /* Ensure it stays above other content */
}

.product-link {
    font-family: 'Montserrat', sans-serif; /* Ensure font family matches the site */
    color: white; /* Text color */
    text-decoration: none; /* Remove underline */
    font-size: .7em; /* Font size */
    padding: 5px 10px; /* Padding around links */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition for hover effect */
}

.product-link:hover {
    color: hwb(211 66% 0%); /* Change text color on hover */
    background-color: #555; /* Change background color on hover */
    border-radius: 4px; /* Rounded corners on hover */
}



main {
    max-width: 1200px;
    margin: 2em auto;
    padding: 0 1em;
    flex: 1;
}

.shear {
    display: flex;
    align-items: center; /* Center text vertically */
    margin-bottom: 1em; /* Reduce bottom margin */
    flex-wrap: wrap;
}

.shear:nth-child(odd) .shear-image {
    order: 1;
}

.shear:nth-child(odd) .shear-info {
    order: 2;
}

.shear-image {
    flex: 1;
    text-align: center;
}

.shear-image img {
    width: 100%;
    height: auto;
    cursor: pointer; /* Add pointer cursor to indicate clickability */
}

.shear-info {
    flex: 1;
    padding: 1em;
    text-align: center; /* Center text horizontally */
    line-height: 1.6;
    font-family: 'Quicksand';
}

.shear-info h2 {
    margin-top: 0;
    font-weight: 600;
    color: #444;
    font-family: 'Quicksand';
}

.shear-info p {
    color: #666;
    font-size: 0.95em; /* Slightly smaller font size */
}


.shear-info ul, .accessories-product-info ul {
    list-style-position: inside; /* Ensure the bullets are inside the content box */
    padding-left: 20px; /* Add padding to create space for the bullet points */
}

.shear-info li, .accessories-product-info li {
    text-indent: -20px; /* Keeps the text aligned under the bullet point */
    padding-left: 20px; /* Ensures proper spacing after the bullet */
    line-height: 1.5; /* Adjusts line height for better readability */
}


.shear-info-wrap {
    flex: 1;
    text-align: left;
    margin-left: 100px;
    margin-right: 100px;
}

.shear-info .price {
    font-family: 'Bebas Neue', sans-serif; /* Use the same font as the title */
    font-size: 1.5em; /* Make it a bit smaller */
    color: #3f58a8; /* Blue color */
    margin: 10px; /* Add some space above the price */
}

.top-sellers {
    text-align: center;
    padding: 2em 0;
    background-color: #f8f8f8; /* Light background color */
}

.top-sellers h2 {
    font-size: 2em;
    margin-bottom: 1em;
    color: #333;
    font-family: 'Amatic SC', cursive;}

.top-sellers-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3em; /* Space between items */
}

.shear-item {
    width: 250px;
    text-align: center;
    transition: transform 0.3s ease;
}

.shear-item img {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    border-radius: 25px;
}

footer {
    text-align: center;
    padding: 0.25em 0; /* Smaller vertical padding */
    background-color: #ffffff00;
    color: rgb(82, 151, 197);
    font-size: 0.8em;
    width: 100%;
    margin-top: auto;
	position: relative;
	bottom: 0;
    height: 30px;
}

.logo-hover {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 45px; /* Ensure same size as .logo */
    margin-left: 20px;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

.logo-link:hover .logo {
    opacity: 0;
}

.logo-link:hover .logo-hover {
    opacity: 1;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* Ensure no underline */
    position: relative;
}

.logo {
    max-height: 45px; /* Adjust according to header height */
    margin-left: 20px;
    transition: opacity 0.1s ease-in-out;
}

.shear-banner {
    max-height: 45px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .shear {
        flex-direction: column;
    }
    
    .shear-image img {
        max-width: 80%;
        height: auto;
        cursor: pointer;
    }
}

/* Enlarge image on click */
.shear-image img:active {
    transform: scale(2); /* Scale image up when clicked */
}

.shear-image img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Splash Page Styles */
.splash-page {
    position: relative;
    height: 55vh; /* Full viewport height */
    width: 100%;
    overflow: hidden;
}

.splash-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers children horizontally */
}

.splash-logo img {
    width: auto; /* Keep the logo width */
    height: 40vh;
    max-height: 90%;
    margin-bottom: 5px;
}

.splash-contact {
    font-size: 1.6em;
    color: white;
    font-family: 'Alata';
    margin: 5px;
    text-shadow: rgb(0, 0, 0, 1) 1px 0 22px;
}


.splash-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.splash-text h1 {
    font-size: 3em;
    margin: 0;
}

.splash-text p {
    font-size: 1.5em;
    margin: 0;
}

.contact-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.contact-page-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; /* Change to 100% to ensure it takes up the full height of .contact-body */
    background: url('../images/contactbg.png') no-repeat center center fixed;
    background-size: cover;
	position: relative;
	overflow: hidden;
}


.contact-page-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* White overlay with 80% opacity */
    z-index: 0;
}

.contact-container {
    position: relative; /* Needed for absolute positioning of the overlay */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 500px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.95); /* White overlay with 95% opacity */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1; /* Ensure it is above the overlay */
    text-align: center;
	margin: 0 auto;
}

.contact-card h1, .contact-card p {
    margin: 0 0 10px;
}



.scroll-button {
    margin-top: 20px;
    padding: 12px 40px;
    font-size: 1.2em;
    font-family: 'Montserrat', sans-serif;
    color: black; /* Black text color */
    background-color: #f0f0f0; /* Neutral light background color */
    border: none;
    border-radius: 50px; /* Slightly rounded edges */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.scroll-button:hover {
    background-color: #e0e0e0; /* Slightly darker background on hover */
    transform: translateY(-3px); /* Lift the button on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
}

.rotating-text-container {
    flex: 1;
    text-align: center;
    font-size: 1.3em;
    color: #333; /* Adjust color as needed */
    margin: 0 20px; /* Adjust margins to position text properly */
}

#rotating-text {
    display: inline-block;
    transition: opacity 0.5s ease-in-out;
    font-style: italic;
}

.floating-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #3d55a5;
    color: white;
    text-align: center;
    padding: 15px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); /* Add a subtle shadow for a floating effect */
    transition: height 0.6s ease-in-out, opacity 0.6s ease-in-out; /* Smooth transition for height change */
    z-index: 1000; /* Ensure it stays above other elements */
    height: 50px; /* Initial height */
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8em;
}

.floating-banner.floating {
    height: 70px; /* Increased height */
}

.floating-banner.pinned {
    height: 50px; /* Initial height */
}

.floating-banner p {
    margin: 0;
    font-size: 1em;
}

/* Color Selector Section */
.color-selector {
    position: relative;
    height: 70vh; /* Same height as splash section */
    width: 100%;
    overflow: hidden;
}

.color-selector-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.color-selector-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1s ease-in-out;
}

.color-selector-image.top {
    z-index: 1;
}

.color-options {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 3; /* Ensure color options are above the images */
}

.color-box {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 4; /* Ensure color boxes are above everything else */
}

.color-box.blue {
    background-color: rgb(54, 101, 204);
}

.color-box.pink {
    background-color: rgb(247, 175, 187);
}

.color-box.green {
    background-color: rgb(79, 156, 79);
}

.color-box.purple {
    background-color: rgb(131, 64, 161);
}

.color-text {
    position: absolute;
    top: 30px; /* Adjust as needed */
    left: 40px; /* Adjust as needed */
    color: white;
    font-size: 6em; /* Adjust as needed */
    padding: 10px; /* Add some padding */
    z-index: 3; /* Ensure it stays above the images */
    font-family: 'Bebas Neue', sans-serif; /* Ensure font family matches the site */
}

.info-box {
    position: absolute; /* Use absolute positioning */
    top: 50%;
    right: 22%; /* Ensure consistent spacing from the right edge */
    transform: translateY(-50%); /* Center vertically */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.8); /* Slight transparency */
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); /* Subtle shadow */
    border-radius: 8px; /* Rounded corners */
    z-index: 2; /* Ensure it stays above the images */
    font-family: 'Montserrat', sans-serif; /* Ensure font family matches the site */
    color: #ffffff; /* Text color */
    text-align: left;
    max-width: 27%; /* Adjust width as a percentage of the container */
}


/* Header in the info box */
.info-box h1 {
    font-family: 'Pacifico', cursive; /* More decorative font */
    font-size: 2em; /* Adjust font size */
    margin-bottom: 10px; /* Add spacing below the header */
    margin-top: -1%;
}

/* Wave Banner Section */
.wave-banner {
    position: relative;
    height: 50vh; /* Same height as the color selector section */
    width: 100%;
    overflow: hidden;
}

.wave-banner-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wave-banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wave-banner-text {
    position: absolute;
    top: 50%;
    left: 7%;
    transform: translateY(-50%);
    color: #ffffff; /* Stylish blue color */
    font-size: 3em; /* Large text size */
    font-weight: bold; /* Bold text */
    font-family: 'Montserrat', sans-serif; /* Ensure it matches the site */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for better readability */
    z-index: 2; /* Ensure it stays above the image */
    max-width: 40%;
}

.shop-button {
    display: inline-block;
    margin-top: 20px; /* Space above the button */
    padding: 10px 20px;
    font-size: 1.5em; /* Large font size */
    font-family: 'Montserrat', sans-serif;
    color: white; /* White text color */
    background-color: #a87b5a; /* Match the stylish blue color */
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    text-decoration: none;
    font-weight: normal;
    text-align: center;
}

.shop-button:hover {
    background-color: #966542; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Banner Section */
.shearpage-banner {
    position: relative;
    width: 100%;
    height: 9vh; /* Adjust this value to make the banner taller */
    background-image: url('../images/shearspagebanner.png'); /* Path to your background image */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shearpage-banner h1 {
    color: rgb(255, 255, 255);
    font-size: 3em; /* Adjust the size as needed */
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 2); /* Heavy black drop shadow */
    font-family: 'Montserrat', sans-serif; /* Ensure font family matches the site */
    margin: 0;
    padding-top: 0px;
}







.accessorypage-banner {
    position: relative;
    width: 100%;
    height: 9vh; /* Adjust this value to make the banner taller */
    background-image: url('../images/accessorybanner.png'); /* Path to your background image */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accessorypage-banner h1 {
    color: rgb(255, 255, 255);
    font-size: 3em; /* Adjust the size as needed */
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 2); /* Heavy black drop shadow */
    font-family: 'Montserrat', sans-serif; /* Ensure font family matches the site */
    margin: 0;
    padding-top: 0px;
}



.thinner-texturizer-page-banner {
    position: relative;
    width: 100%;
    height: 9vh; /* Adjust this value to make the banner taller */
    background-image: url('../images/Texturizerpagebanner.png'); /* Path to your background image */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thinner-texturizer-page-banner h1 {
    color: rgb(255, 255, 255);
    font-size: 3em; /* Adjust the size as needed */
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 2); /* Heavy black drop shadow */
    font-family: 'Montserrat', sans-serif; /* Ensure font family matches the site */
    margin: 0;
    padding-top: 0px;
}




.shear-sets-page-banner {
    position: relative;
    width: 100%;
    height: 19vh; /* Adjust this value to make the banner taller */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

.shear-sets-page-banner h1 {
    color: rgb(255, 255, 255);
    font-size: 4em; /* Adjust the size as needed */
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 2); /* Heavy black drop shadow */
    font-family: 'Montserrat', sans-serif; /* Ensure font family matches the site */
    margin: 0;
    padding-top: 0px;
}





/* Product Page Styles */
.product-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 40px; /* Space between image and info */
}

.product-image {
    flex: 1;
    text-align: center;
    position: relative;
}

.product-image img {
    max-width: 565px; /* Set a max width for the image */
    max-height: 565px; /* Set a max height for the image */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    cursor: zoom-in; /* Indicate clickability */
    transition: transform 0.3s ease; /* Smooth transition for zoom effect */
    /*transform: rotate(90deg); /* Rotate the image 90 degrees clockwise */
    margin: 0 auto; /* Center the image within the container */
}

.product-info {
    position: relative;
    flex: 5;
    padding: 40px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
    border-radius: 8px; 
    max-width: 600px;
    margin-left: 200px;
    background: none; 
}

.product-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   /* background-image: url('../images/bamboobg.png'); */
    background-color:white;
    background-size: cover;
    background-position: center;
    opacity: 0.4; 
    z-index: -1; 
    border-radius: 8px; 
}


.product-info h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5em; 
    margin-bottom: 10px; 
    position: relative; 
    z-index: 1; 
}

.product-info p {
    font-family: 'Montserrat', sans-serif;
    color: #333; 
    line-height: 1.6;
    position: relative; 
    z-index: 1; 
}

.magnifier-glass {
    position: absolute;
    border: 2px solid #838383;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    cursor: none; 
    width: 250px; 
    height: 250px; 
    visibility: hidden; 
    pointer-events: none; 
    z-index: 1000;
}

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

#image-modal img {
    max-width: 90%;
    max-height: 90%;
}

#enlarged-image-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#enlarged-img {
    max-width: 80%;
    max-height: 80%;
}

#enlarged-image-container img {
    max-width: 90%;
    max-height: 90%;
    cursor: none; 
}








.contact-section {
    display: flex;
    justify-content: center; 
    align-items: center; 
    padding: 2em;
    /*background-color: #f8f8f8; /* Light background color */
    background-image: url(../images/topsellBG.jpg);
    min-height: 70vh; 
    text-align: center;
    width: 100%; 
}



.contact-container {
    width: 90%; 
    max-width: 1000px; 
    background-color: white;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    justify-content: center;
}

.contact-form {
    width: 100% !important; 
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100% !important;
}

.form-group label {
    margin-bottom: 0.5em;
    font-weight: bold;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100% !important;
    padding: 0.75em;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
    min-width: 100% !important;
}


.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #666;
}

.submit-button {
    align-self: flex-end;
    background-color: #333;
    color: white;
    border: none;
    padding: 1em 2em;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 1em;
}

.submit-button:hover {
    background-color: #555;
}

.contact-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.contact-container h2 {
    color: #3d55a5;
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 0.2em;
    font-family: 'Dancing Script', cursive;

}

.contact-container p {
    color: black;
}





/* FAQ-specific main styling */
.faq-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    background-size: cover;
    background-position: center;
    min-height: 80vh;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0;
}

/* FAQ section styling */
.faq-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
    width: 100%;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
}

.faq-container {
    width: 90%;
    max-width: 1200px;
    background-color: white;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.faq-container h2 {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5em;
    margin-top: 0;
    margin-bottom: 1em;
    color: #333;
}

.faq-item {
    margin-bottom: 1.5em;
}

.faq-question {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    color: #333;
    text-align: left;
}

.faq-answer {
    font-size: 1em;
    color: #666;
    text-align: left;
    line-height: 1.6;
}




.accessories-banner {
    display: flex;
    height: 40vh;
    justify-content: center;
    align-items: center;
    padding: 3.2em;
    background-image: url(../images/flowingwaterHIRES2.jpg);
 /*   background-color: #f8f8f8; /* Light background color or change as needed */
}

.accessories-banner-container {
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 1300px;
    background-color: white;
    padding: 1em;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 90%;
}

.banner-image {
    flex-shrink: 0;
    width: 40%;
    max-width: 400px;
    height: auto;
    border-radius: 10px;
    margin-right: 1em;
}

.banner-text {
    flex-grow: 1;
    text-align: left;
}

.banner-text h2 {
    font-family: 'Quicksand';
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #333;
}

.banner-text p {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
}

.accessories-button {
    display: inline-block;
    margin-top: 1em;
    padding: 0.75em 1.5em;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    cursor: pointer;
}

.accessories-button:hover {
    background-color: #555;
}







.payment-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
    background-color: white;
}

.payment-banner-container {
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 800px;
    background-color: white;
    padding: 1em;
    border-radius: 10px;
    overflow: hidden;
}

.payment-badge {
    flex-shrink: 0;
    width: 40%;
    max-width: 300px;
    border-radius: 10px;
    margin-right: 1em;
}

.payment-text {
    flex-grow: 1;
    text-align: left;
}

.payment-text h2 {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #333;
}

.payment-text p {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
}

.payment-text strong {
    color: #e63946;
    font-size: 1.2em;
}



/* Tensioner Banner Styles */
.tensioner-banner {
    position: relative;
    height: 70vh; /* Set the height of the banner */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tensioner-banner img {
    position: absolute;
    top: 50%; /* Moves the image down by 50% of its container's height */
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1); /* Zooms in the image by 10% */
    height: auto; /* The image will fill the container's height */
    width: 100%; /* Allows the width to adjust dynamically */
    object-fit: cover; /* Ensures the image covers the container */
    z-index: -1;
    min-height: 700px;
}


.tensioner-header-text {
    position: absolute;
    top: 10px;
    font-family: 'Leckerli One';
    font-size: 5em;
    color: white;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Shadow for better contrast */
    z-index: 2;
    font-weight: 100;
    margin-top: 30px;
}

.tensioner-paragraph-box {
    position: absolute;
    left: 5%;
    max-width: 300px; /* Limit the width of the paragraph */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.6); /* Dark background with transparency */
    color: white; /* White text for contrast */
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Shadow for a 3D effect */
    z-index: 2;
    top: 30%;
    border-radius: 20px;
}

.tensioner-banner-button {
    position: absolute;
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.4em;
    color: rgb(0, 0, 0);
    background-color: #ffffff8f;
    text-decoration: none;
    border-radius: 20px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    bottom: 50px;
    font-family: 'Quicksand';

}

.tensioner-banner-button:hover {
    background-color: #ececec;
    transform: translateY(-2px);
}







/* Why Choose Us Section */
.why-choose-us {
    max-width: 950px;
    margin: 0 auto;
    padding: 2em;
    background-color: #f8f8f8;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: left;
}

.why-choose-us h1 {
    font-size: 2.5em;
    font-family: 'Concert One';
    color: #333;
    margin-bottom: 1em;
    text-align: center;
    margin-top: 0;
    margin-bottom: .8em;
}

.why-choose-us ul {
    list-style: none;
    padding: 0;
}

.why-choose-us li {
    font-size: 1.2em;
    margin-bottom: 1.1em;
    padding-left: 1.5em;
    position: relative;
}

.why-choose-us li:before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #3f58a8;
    font-size: 1em;
    line-height: 1.2em;
}






.feel-the-difference-banner {
    position: relative;
    height: 65vh; /* Adjust the height as needed */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feel-banner-container {
    position: relative;
    height: 100%;
    width: 100%;
}

.feel-banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.feel-banner-text {
    position: absolute;
    top: 10%; /* Position towards the top */
    left: 5%; /* Position towards the left */
    color: white;
    font-size: 8em;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    max-width: 40%;
    z-index: 1;
}

.feel-banner-info {
    position: absolute;
    bottom: 5%; /* Position towards the bottom */
    right: 5%; /* Position towards the right */
    color: white;
    background: rgba(0, 0, 0, 0.35);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-family: 'Montserrat', sans-serif;
    max-width: 30%;
    z-index: 1;
}

.feel-banner-info p {
    font-size: 1.1em;
    margin-bottom: 15px;
}

.learn-more-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.5em;
    color: white;
    background-color: #142d3b;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.learn-more-button:hover {
    background-color: #2a363d;
    transform: translateY(-2px);
}








.badge-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 1em 0;
}

.badge {
    width: 100px; /* Adjust the size as needed */
    height: 100px; /* Maintain aspect ratio */
    margin: 2em; /* Space around each badge */
    margin-top: 1em;
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.badge:hover {
    transform: scale(1.5); /* Slightly enlarge the badge on hover */
}






.icon-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 30px;
}

.bottom-icon {
    width: 70px; /* Adjust the size of the icons */
    height: 70px; /* Ensure they are all uniformly sized */
    opacity: 0.5; /* Set initial opacity */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

.bottom-icon:hover {
    opacity: 1; /* Full opacity on hover */
    transform: scale(1.5); /* Slightly enlarge on hover */
}






.product-info ul {
    list-style-type: disc; /* Use bullet points */
    list-style-position: inside;
    margin-left: 20px; /* Add some left margin */
    padding-left: 20px; /* Remove default padding */
    line-height: 1.3; /* Increase line height for better spacing */

}

.product-info li {
    margin-bottom: 5px; /* Add space between items */
    margin-left: 20px;
    font-family: 'Montserrat', sans-serif; /* Ensure font family matches the site */
    color: #333; /* Text color */
    line-height: 1.3; /* Increase line height for better spacing */
    text-indent: -20px;

}




.product-info .model-number {
    display: block; /* Ensures it starts on a new line */
    font-size: 0.9em; /* Smaller font size */
    color: #777; /* Lighter color for less prominence */
    margin-top: -10px; /* Adjust spacing as needed */
    margin-bottom: 10px; /* Space between model number and list */
}




.product-info .price {
    font-family: 'Bebas Neue', sans-serif; /* Use the same font as the title */
    font-size: 1.5em; /* Make it a bit smaller */
    color: #3f58a8; /* Blue color */
    margin-top: 20px; /* Add some space above the price */
}



.size-selector {
    display: flex;
    justify-content: flex-start; /* Center the buttons */
    margin-top: 25px; /* Space between the buttons and the info box */
}

.size-button {
    font-family: 'Montserrat', sans-serif; /* Ensure consistent font */
    color: #333; /* Text color */
    background-color: #f0f0f0; /* Light background color */
    border: 2px solid #ccc; /* Border around the button */
    padding: 7px 20px; /* Padding inside the button */
    margin: 0 10px; /* Space between buttons */
    text-decoration: none; /* Remove underline from links */
    border-radius: 5px; /* Slightly rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.size-button:hover {
    background-color: #ddd; /* Darken background on hover */
    color: #000; /* Darken text on hover */
}

.size-button.active {
    background-color: #3f58a8; /* Highlighted background color */
    color: white; /* Highlighted text color */
}




.return-button {
    position: absolute;
    top: 160px; /* Adjust to be below the sticky navigation bar */
    left: 70px; /* Adjust distance from the left */
    padding: 5px 10px; /* Small padding */
    padding-bottom: 8px;
    font-size: 1em; /* Small font size */
    font-family: 'Montserrat', sans-serif;
    color: #000000; /* White text color */
    text-decoration: none; /* Remove underline */
    border-radius: 3px; /* Slightly rounded corners */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    z-index: 2; /* Ensure it stays above other elements */
}

.return-button::before {
    content: '←'; /* Arrow character */
    color: #333333; /* Light gray color */
    margin-right: 8px; /* Space between arrow and text */
    font-size: 1.2em; /* Slightly larger arrow size */
}

.return-button:hover {
    background-color: #ececec; /* Darker background on hover */
    transform: translateY(-2px); /* Slight lift on hover */
    color:rgb(0, 0, 0);
}

.product-page {
    position: relative; /* Ensure the return button is positioned within this container */
}







/* Accessories Page Styles */
.accessories-product-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 40px; /* Space between image and info */
    padding-top: 100px;
}

.accessories-product-image {
    flex: 1;
    text-align: center;
    position: relative;
}

.accessories-product-image img {
    max-width: 565px; /* Set a max width for the image */
    max-height: 400px; /* Set a max height for the image */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.3s ease; /* Smooth transition for zoom effect */
    /*transform: rotate(90deg); /* Rotate the image 90 degrees clockwise */
    margin: 0 auto; /* Center the image within the container */
    padding-top: 100px;
    padding-right: 150px;
}

.accessories-product-info {
    position: relative;
    flex: 6;
    padding: 40px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
    border-radius: 8px; 
    max-width: 600px;
    min-width: 300px;
    margin-right: 150px;
    background: none; 
}

.accessories-product-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   /* background-image: url('../images/bamboobg.png'); */
    background-color:white;
    background-size: cover;
    background-position: center;
    opacity: 0.4; 
    z-index: -1; 
    border-radius: 8px; 
}


.accessories-product-info h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5em; 
    margin-bottom: 10px; 
    position: relative; 
    z-index: 1; 
}

.accessories-product-info p {
    font-family: 'Montserrat', sans-serif;
    color: #333; 
    line-height: 1.6;
    position: relative; 
    z-index: 1; 
}


.accessories-product-info ul {
    list-style-type: disc; /* Use bullet points */
    margin-left: 20px; /* Add some left margin */
    padding-left: 0; /* Remove default padding */
    line-height: 1.3; /* Increase line height for better spacing */

}

.accessories-product-info li {
    margin-bottom: 5px; /* Add space between items */
    font-family: 'Montserrat', sans-serif; /* Ensure font family matches the site */
    color: #333; /* Text color */
    line-height: 1.3; /* Increase line height for better spacing */

}




.accessories-product-info .model-number {
    display: block; /* Ensures it starts on a new line */
    font-size: 0.9em; /* Smaller font size */
    color: #777; /* Lighter color for less prominence */
    margin-top: -10px; /* Adjust spacing as needed */
    margin-bottom: 10px; /* Space between model number and list */
}




.accessories-product-info .price {
    font-family: 'Bebas Neue', sans-serif; /* Use the same font as the title */
    font-size: 1.5em; /* Make it a bit smaller */
    color: #3f58a8; /* Blue color */
    margin-top: 20px; /* Add some space above the price */
}







/* Container for shear sets */
.shear-set-container {
    display: flex;
    justify-content: space-between; /* Space the images evenly */
    align-items: center;
    width: 100%; /* Ensure the container takes the full width of the viewport */
    margin: 0 auto;
    box-sizing: border-box;
}


/* Individual shear set styling */
.shear-set {
    flex: 1; /* Make each shear set take up equal space */
    position: relative;
}

.shear-set img {
    width: 100%; /* Ensure the image fills the container width */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%;
    object-fit: contain; /* Ensure the image fits within its container without distortion */
}

.shear-model {
    color: #ffffff;
    font-family: 'quicksand';
    font-size: 3em;
    padding: 5px 10px;
}

/* Info box styling */
.shear-set-info-box {
    margin-top: 4em;
    margin-bottom: 1em;
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    text-align: left;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.shear-set-info-box h2 {
    font-size: 2em;
    margin-bottom: 1em;
}

.shear-set-info-box p {
    font-size: 1.2em;
    line-height: 1.6;
}


.shear-set-body {
    background-color: #000000; /* Dark background color */
    font-family: 'Lora', serif;
    margin: 0;
    padding: 0;
    color: #ececec;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full viewport height */
}

.shear-set-main {
    padding: 0 1em;
    flex: 1;
    width: 100vw;
}



.shear-model-banner {
    width: 100%;
    background-color: #000000; /* Black background for the banner */
    text-align: center;
    box-sizing: border-box;
}




.three-image-section {
    display: flex;
    justify-content: space-between; /* Distributes the containers evenly */
    background-color: #000000; /* Optional: Add a background color */
}

.image-container {
    flex: 1; /* Each container takes up equal space */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    padding: 65px; /* Adds padding inside the container */
    box-sizing: border-box;
    padding-bottom: 0;
}

.image-container img {
    max-width: 90%; /* Image takes up 90% of its container width */
    height: auto;
    object-fit: contain; /* Ensures the image does not distort */
    padding: 10px; /* Adds padding around the image */
}




.three-text-section {
    display: flex;
    justify-content: space-between; /* Distributes the text boxes evenly */
    background-color: #000000; /* Optional: Add a background color for contrast */
    padding-bottom: 120px;
}

.text-box {
    flex: 1; /* Each text box takes up equal space */
    background-color: #222222; /* Dark gray background */
    color: #ffffff; /* White text */
    padding: 20px; /* Adds padding inside the text box */
    border-radius: 10px; /* Rounds the corners */
    margin: 0 75px; /* Adds space between the boxes */
    box-sizing: border-box;
}

.text-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
    font-family: 'Montserrat', sans-serif; /* Ensure the font matches the rest of the site */
}

.text-box p {
    margin: 0;
    line-height: 1.2;
    font-family: 'Lora', serif; /* Ensure the font matches the rest of the site */
    font-size: 1.2em;
}

.text-box li {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif; /* Ensure the font matches the rest of the site */
}


.text-box .price {
    font-family: 'Bebas Neue', sans-serif; /* Use the same font as the title */
    font-size: 1.5em; /* Make it a bit smaller */
    color: #9eaee4; /* Blue color */
    margin-top: 20px; /* Add some space above the price */
}



.info-text-image {
    display: flex;
    justify-content: center; /* Centers the entire section horizontally */
    align-items: center;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    max-width: 1200px; /* Set a max-width to keep the content centered */
    margin: 0 auto; /* Centers the container within the viewport */
}

.info-text {
    flex: 1;
    margin-right: 70px; /* Space between text and image */
}

.info-image {
    flex: 1;
    text-align: center;
}

.info-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: Add some rounding to the corners */
}




.all-products-heading {
    font-family: 'Amatic SC', cursive;
    font-size: 5em;
    text-align: center;
    margin: 0;
    margin-top: 1em;
    color: #333; /* Adjust the color to match your design */
}




.mobile-overlay-text {
    display: none;
}


/* Style for the phone number link inside the floating banner */
.floating-banner .phone-link {
    color: white; /* Default color for the phone number */
    text-decoration: underline; /* Remove the underline */
}

/* Change the color of the phone number when it's clicked (active state) */
.floating-banner .phone-link:active,
.floating-banner .phone-link:visited,
.floating-banner .phone-link:link {
    color: #dcecff; /* Example: Yellow color that stands out against a blue background */
}

/* Optional: Add a hover effect for desktops */
.floating-banner .phone-link:hover {
    color: #ffffff; /* Example: A bright color when hovered over */
}


.splash-contact .phone-link {
    color: white; /* Ensure the phone number is white */
    text-decoration: none; /* Remove underline */
}

/* Add a hover effect (optional) */
.splash-contact .phone-link:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #dcecff; /* Slightly different color on hover */
}


/* Container to align price and button */
.price-button-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px; /* Space between the price and the button */
}

/* Style for the "Learn More" button */
.learn-shear-button {
    font-family: 'Bebas Neue', sans-serif;
    color: #3f58a8;
    background-color: transparent;
    border: 2px solid #3f58a8;
    padding: 1px 15px;
    text-decoration: none;
    font-size: 1em;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-top: 3px;
    margin-bottom: 4px;
}

/* Hover effect for the button */
.learn-shear-button:hover {
    background-color: #3f58a8; /* The same blue as the price */
    color: white;
}


/* Remove underline from shear model links */
.shear-model-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit the color from the parent element */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

/* Change text color on hover to match the blue used for the price */
.shear-model-link:hover {
    color: #3f58a8; /* Blue color matching the price */
}








/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Header Adjustments */
    .logo-link {
        margin-left: -1em; /* Push logo towards the left edge */
    }

    .logo {
        max-height: 32px;
        margin-left: 15px;
        transition: opacity 0.1s ease-in-out;
    }

    .logo-hover {
        position: absolute;
        top: 0;
        left: 0;
        max-height: 32px;
        margin-left: 15px;
        opacity: 0;
        transition: opacity 0.1s ease-in-out;
    }

    .menu-button {
        margin-right: -1em; /* Push menu button towards the right edge */
    }

    .nav .dropdown-content {
        right: 0; /* Align dropdown to right for mobile */
        left: auto;
        width: 100%; /* Full width dropdown */
        box-sizing: border-box;
    }

    /* Fixing the Main Section Overflow */
    main {
        padding: 0;
        margin: 0;
        max-width: 100%; /* Ensure main content doesn't overflow */
        overflow-x: hidden; /* Prevent horizontal overflow */
    }

    /* Product Section Adjustments */
    .shear {
        display: flex;
        flex-direction: column; /* Stack images and text vertically */
        align-items: center; /* Center align items */
        margin-bottom: 8em; /* Add space between sections */
        position: relative; /* Allow overlapping of text */
        padding: 0 1em; /* Padding around the section to prevent spillover */
    }

    .shear-image {
        order: 1; /* Ensure image is always first */
        width: 100%;
        text-align: center; /* Center images */
    }

    .shear-image img {
        max-width: 80%; /* Reduce image width */
        height: auto;
    }

    .shear-info {
        order: 2; /* Ensure text is always second */
        text-align: center; /* Center align text */
        margin-top: -4em; /* Overlap text with the image */
        padding: 0 1em; /* Add padding for better readability */
        background-color: rgba(255, 255, 255, 0.8); /* Add a background for better contrast */
        position: relative;
        z-index: 1; /* Ensure text is above the image */
    }

    /* Adjusting the Sticky Bar */
    .sticky-bar {
        top: 85px; /* Adjust for smaller header */
        height: 40px;
    }

    .product-link {
        font-size: 0.6em; /* Slightly larger for easier tap */
    }

    /* Splash Page Adjustments */
    .splash-logo {
        position: absolute;
        top: 50%; /* Center vertically */
        left: 50%;
        transform: translate(-50%, -50%); /* Center horizontally */
        width: 100%; /* Make the logo container full width */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .splash-logo img {
        width: 90%; /* Stretch the logo to 90% of the screen width */
        max-width: 90vw; /* Ensure it doesn't overflow the viewport width */
        height: auto;
    }

    .scroll-button {
        width: auto; /* Allow the button to adjust its width */
        font-size: 1em; /* Adjust font size */
        padding: 8px 20px; /* Adjust padding */
    }


    .rotating-text-container {
        font-size: 1em; /* Reduced from 1.3em to 1em for mobile */
    }


    .floating-banner, .floating-banner.pinned {
        font-size: 1em; /* Ensure text size is reduced */
        padding: 10px 20px; /* Add padding to create space on the left and right */
        text-align: center; /* Center text */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }


    .splash-page {
        position: relative;
        height: 50vh;
        width: 100%;
        overflow: hidden;
    }

    .top-sellers {
        text-align: center;
        padding: 1em 0;
        background-color: #ffffff;
    }


    .top-sellers-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal-width columns */
        gap: 1em; /* Space between items */
        padding: 0 1em; /* Padding around the grid */
        overflow: hidden; /* Prevents horizontal scroll */
    }

    .shear-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        width: 100%; /* Ensure items take full width of grid cell */
    }

    .shear-item img {
        width: 100%;
        height: 150px; /* Set a fixed height for uniformity */
        object-fit: cover; /* Ensure the image covers the area without distortion */
    }

    .shear-info {
        margin-top: 0.5em; /* Space between image and text */
        padding: 0.5em;
        font-size: 0.85em; /* Slightly smaller text */
        height: auto; /* Allow the container to expand as needed */
        line-height: 1.4em; /* Adjust line height for readability */
        overflow: hidden; /* Hide overflow */
        text-overflow: ellipsis; /* Add ellipsis if text is too long */
        white-space: normal; /* Allow text to wrap to the next line */
        background-color: rgba(255, 255, 255, 0.9); /* Background for readability */
        box-sizing: border-box;
        width: 100%;
    }


    .feel-the-difference-banner {
        height: 40vh; /* Match the height of the banner container */
        padding: 0; /* Remove any padding that might cause extra space */
    }

    /* Adjusting the "Feel the Difference" Banner */
    .feel-banner-container {
        position: relative;
        height: 100%; /* Adjust to fill the height of the section */
        overflow: hidden; /* Ensure no overflow */
    }

    .feel-banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensure the image covers the banner area without distortion */
        object-position: center; /* Center the image horizontally */
    }

    .feel-banner-text {
        position: absolute;
        font-size: 2.9em; /* Reduce the font size */
        color: white;
        text-transform: uppercase;
    }

    .feel-banner-info {
        position: absolute;
        max-width: 65%;
        font-size: .6em;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 0.5em;
        border-radius: 5px;
        box-sizing: border-box;
    }

    .learn-more-button {
        display: inline-block;
        padding: 5px 10px;
        font-size: 1em;
        color: white;
        background-color: #142d3b;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .shear-info-wrap {
        flex: 1;
        text-align: left;
        margin-left: 10%;
        margin-right: 0;
    }

    .all-products-heading {
        font-family: 'Amatic SC', cursive;
        font-size: 3em;
        text-align: center;
        margin: 0;
        margin-top: 1em;
        color: #333;
    }


    .payment-banner {
        display: flex;
        flex-direction: column; /* Stack image on top, text below */
        align-items: center;
        height: auto; /* Allow the height to adjust based on content */
        overflow-x: hidden; /* Prevent overflow horizontally */
        padding: 1em;
    }

    .payment-banner-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%; /* Ensure full width of the container */
        max-width: 100%; /* Prevent overflow */
        padding: 0;
    }

    .payment-badge {
        width: 100%; /* Make the image full width */
        height: auto; /* Keep aspect ratio */
        max-width: 100%; /* Ensure it doesn't exceed the screen width */
        margin-bottom: 1em; /* Space between the image and text */
        margin-right: 0;
    }

    .payment-text {
        text-align: center; /* Center the text */
        font-size: 0.7em; /* Reduce font size slightly */
        padding: 0 1em; /* Add some padding for readability */
        width: 100%;
        box-sizing: border-box;
    }


    .wave-banner {
        height: 30vh; /* Reduce vertical height */
        padding: 0; /* Remove padding for a more compact look */
    }

    .wave-banner-container {
        position: relative;
        height: 100%; /* Make the container fill the section */
        overflow: hidden; /* Prevent overflow */
    }

    .wave-banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensure the image covers the banner area */
        object-position: right; /* Prioritize the right side of the image */
    }

    .wave-banner-text {
        position: absolute;
        bottom: 1em; /* Adjust the text position */
        left: 1em;
        font-size: 1.2em; /* Reduce font size appropriately */
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        max-width: 60%;
    }

    .shop-button {
        font-size: 0.9em; /* Reduce the button font size */
        padding: 0.5em 1em; /* Adjust padding for the button */
        border-radius: 5px; /* Optional: Add rounding to the button */
    }


    .accessories-banner {
        height: 45vh; /* Reduce the overall height of the banner */
        padding: 0; /* Remove any padding for a compact look */
    }

    .accessories-banner-container {
        display: flex;
        flex-direction: row; /* Keep the layout with image on the left, text on the right */
        justify-content: space-between;
        align-items: center;
        overflow: hidden; /* Prevent overflow */
        padding: 0 1em; /* Add some padding for the container */
        box-sizing: border-box; /* Include padding in the element's width */
    }


    .banner-text {
        width: 50%; /* Text takes up 50% of the width */
        font-size: 0.6em; /* Reduce font size for mobile */
        color: white;
        text-align: left; /* Keep text left-aligned */
        padding: 0 1em; /* Add padding around the text */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }

    .accessories-button {
        font-size: 0.8em; /* Reduce button font size */
        padding: 0.5em 1em; /* Adjust padding for the button */
        background-color: rgba(0, 0, 0, 0.7); /* Optional: Darken the button background for contrast */
        border-radius: 5px; /* Optional: Add rounding to the button */
        display: inline-block;
        margin-top: 1em; /* Add some space above the button */
    }

    .thinner-texturizer-page-banner h1 {
        color: rgb(255, 255, 255);
        font-size: 1.5em;
        text-shadow: 4px 4px 10px rgba(0, 0, 0, 2);
        font-family: 'Montserrat', sans-serif;
        margin: 0;
        padding-top: 0px;
    }

    .shearpage-banner h1 {
        color: rgb(255, 255, 255);
        font-size: 2em;
        text-shadow: 4px 4px 10px rgba(0, 0, 0, 2);
        font-family: 'Montserrat', sans-serif;
        margin: 0;
        padding-top: 0px;
    }

    .accessorypage-banner h1 {
        color: rgb(255, 255, 255);
        font-size: 2em;
        text-shadow: 4px 4px 10px rgba(0, 0, 0, 2);
        font-family: 'Montserrat', sans-serif;
        margin: 0;
        padding-top: 0px;
    }

    .why-choose-us {
        max-width: 950px;
        margin: 0 auto;
        padding: 2em;
        background-color: #ffffff;
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        text-align: left;
        padding-bottom: .5em;
    }

    .why-choose-us li {
        font-size: 1em;
        margin-bottom: 1.1em;
        padding-left: 1.5em;
        position: relative;
    }

    .contact-container p {
        color: black;
        font-size: .8em;
    }


    .faq-main {
        display: flex;
        flex-direction: column; /* Stack content vertically */
        justify-content: center;
        align-items: center;
        width: 100%; /* Ensure it takes up the full width of the viewport */
        padding: 0 1em; /* Add padding to prevent content from touching the edges */
        overflow-x: hidden; /* Prevent horizontal overflow */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }

    .faq-section {
        width: 100%; /* Ensure section takes full width */
        padding: 1em; /* Add some padding for spacing */
        background-color: rgba(255, 255, 255, 0.8); /* Slightly opaque background for better readability */
    }

    .faq-container {
        width: 100%; /* Make the container take up the full width */
        max-width: 100%; /* Ensure it doesn’t exceed the screen width */
        padding: 1em; /* Add some padding for spacing */
        box-sizing: border-box; /* Include padding in the width */
    }

    .faq-question,
    .faq-answer {
        font-size: 1em; /* Adjust font size for readability on smaller screens */
        text-align: left; /* Keep text left-aligned */
    }




    .shear-sets-page-banner {
        position: relative;
        width: 100%;
        height: 10vh;
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
    }





    .shear-sets-page-banner h1 {
        font-size: 1.5em; /* Reduce the heading size */
        text-align: center; /* Center the heading */
        padding: 0.5em 0; /* Add some padding */
    }

    /* Adjusting the shear-set-container for mobile */
    .shear-set-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .shear-set {
        margin: 0; /* Remove any default margin */
        padding: 0;
        width: 33.33%;
    }

    .shear-set img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Adjusting the three-text-section */
    .three-text-section {
        display: flex;
        flex-direction: column;
        padding: 1em;
        box-sizing: border-box;
    }

    .text-box {
        margin-bottom: 1em;
        margin: 1em;
        padding: 0.5em;
        background-color: rgba(26, 26, 26, 0.8);
    }

    .text-box h3 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }

    .text-box p {
        font-size: 0.9em;
        margin: 0;
    }

    .price {
        font-size: 1.1em;
        font-weight: bold;
    }

    .shear-model {
        color: #ffffff;
        font-family: 'quicksand';
        font-size: 1em;
        padding: 5px 10px;
    }

    .shear-set-info-box {
        margin-top: 1em;
        margin-bottom: 1em;
        padding: 1em;
        background-color: rgba(0, 0, 0, 0.7);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        text-align: left;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .shear-set-info-box h2 {
        font-size: 1.5em;
    }

    .shear-set-info-box p {
        font-size: .8em;
        line-height: 1.6;
    }

    .info-image {
        text-align: center;
        width: 40%;
        flex: 0;
        margin-top: 3em;
    }

    .info-text-image {
        flex-direction: column; /* Stack the image and text vertically */
        align-items: center; /* Center align items */
        max-width: 100%; /* Ensure the section takes full width */
        margin: 0 auto; /* Center the section */
        padding: 0; /* Remove padding */
        box-sizing: border-box; /* Include padding and borders in the element's width and height */
    }

    .info-text {
        flex: 1;
        margin-right: 60px;
        margin-left: 10px;
    }

    .image-container {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        box-sizing: border-box;
        padding-bottom: 0;
        position: relative;
    }



    .mobile-overlay-text {
        position: absolute;
        bottom: 42%; /* Position the text at the bottom of the image */
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 1.2em;
        font-family: 'quicksand';
        background-color: rgba(0, 0, 0, 0.5); /* Add a semi-transparent background */
        border-radius: 5px;
        text-align: center;
        width: 80%;
        display: block;
    }

    .shear-set-body {
        background-color: #000000; /* Dark background color */
        font-family: 'Lora', serif;
        margin: 0;
        padding: 0;
        color: #ececec;
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* Ensure body takes full viewport height */
        overflow-x: hidden;
    }

    .image-container img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
        padding: 0;
    }




    .product-page {
        display: flex;
        flex-direction: row; /* Keep the image and text side by side */
        justify-content: space-between;
        align-items: flex-start; /* Align items at the top */
        padding: 20px; /* Add padding around the content */
        margin-top: 1.5em;
    }

    .product-image {
        flex: 1; /* Let the image take up most of the left side */
        max-width: 30vw; /* Ensure the image container takes up 50% of the screen */
        text-align: center; /* Center align the image within its container */
        margin-right: 10px; /* Add some space between image and text */
        margin-top: 2em;
    }

    .product-image img {
        width: 100%; /* Ensure the image fills the container */
        height: auto;
        cursor: pointer; /* Maintain zoom-in cursor for clickability */
    }

    .product-info {
        flex: 1;
        max-width: 50%;
        padding: 0px;
        box-shadow: none;
        border-radius: 0;
        background-color: transparent;
        margin-left: 5px;
        padding-top: 25px;
    }


    /* Adjusting shear info icons layout for mobile */
    .icon-container {
        display: flex;
        justify-content: center; /* Space icons evenly */
        padding: 0; /* Adjust padding around the icons */
        flex-wrap: wrap; /* Allow icons to wrap if needed */
    }

    .bottom-icon {
        width: 50px;
        height: 50px;
        margin: 15px;
    }


    .product-info h1 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 1.5em;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
    }


    .product-info li {
        margin-bottom: 5px;
        margin-left: 5px;
        font-family: 'Montserrat', sans-serif;
        color: #333;
        line-height: 1.3;
        text-indent: -20px;
        font-size: .7em;
    }


    .return-button {
        position: absolute;
        top: 140px;
        left: 15px;
        padding: 15px 15px;
        padding-bottom: 8px;
        font-size: .7em;
        font-family: 'Montserrat', sans-serif;
        color: #000000;
        text-decoration: none;
        border-radius: 3px;
        transition: background-color 0.3s ease, transform 0.3s ease;
        z-index: 2;
    }

    .size-button {
        font-family: 'Montserrat', sans-serif;
        font-size: .7em;
        color: #333;
        background-color: #f0f0f0;
        border: 2px solid #ccc;
        padding: 3px 10px;
        margin: 0 1px;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }


    .badge {
        width: 70px;
        height: 70px;
        margin: 1.3em;
        margin-top: 1em;
        transition: transform 0.3s ease;
    }


    .badge-section {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 1em 0;
        padding-top: 0;
    }


    .splash-contact {
        font-size: 1em;
        color: white;
        font-family: 'Alata';
        margin: 5px;
        text-shadow: rgb(0, 0, 0, 1) 1px 0 22px;
    }

    .tensioner-header-text {
        position: absolute;
        top: 10px;
        font-family: 'Leckerli One';
        font-size: 3em;
        color: white;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Shadow for better contrast */
        z-index: 2;
        font-weight: 100;
        margin-top: 10px;
        text-align: center;
        margin-left: 30px;
        margin-right: 30px;
    }

    .tensioner-paragraph-box {
        position: absolute;
        max-width: 300px; /* Limit the width of the paragraph */
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.6); /* Dark background with transparency */
        color: white; /* White text for contrast */
        font-family: 'Montserrat', sans-serif;
        font-size: .6em;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Shadow for a 3D effect */
        z-index: 2;
        border-radius: 20px;
        bottom: 5%;
        top: auto;
    }
    
    .splash-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        scale: 1.1;
    }

    .tensioner-banner {
        position: relative;
        height: 47vh; /* Set the height of the banner */
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .tensioner-banner img {
        position: absolute;
        top: 50%; /* Moves the image down by 50% of its container's height */
        left: 50%;
        transform: translate(-50%, -50%) scale(1.1); /* Zooms in the image by 10% */
        height: auto; /* The image will fill the container's height */
        width: 100%; /* Allows the width to adjust dynamically */
        object-fit: cover; /* Ensures the image covers the container */
        z-index: -1;
        min-height: 47vh;
    }

    


    

}