@font-face {
		font-family: 'Titling Gothic FB';
		src: url('/fonts/TitlingGothicFBExt-Light.otf') format('opentype');
		font-style: normal;
	}
	@font-face {
		font-family: 'Sofia Pro';
		src: url('/fonts/Sofia-Pro.woff') format('woff'); /* Specify the font format */
		font-style: normal;
		font-weight: normal; /* Adjust based on the specific style of the Sofia Pro font being used */
	}

	@font-face {
		font-family: 'Titling Gothic FB Condensed';
		src: url('/fonts/TitlingGothicFBCond-Stand.otf') format('opentype');
		font-style: normal;
		font-weight: normal; /* Adjust if you have different weights for this font */
	}	
.sofia-pro {
    font-family: 'Sofia Pro', sans-serif; /* Fallback to sans-serif in case the custom font doesn't load */
    font-size: 15px;
    font-weight: 400; /* Normal weight */
    line-height: 22.5px; /* Specific line height for better readability */
    letter-spacing: 0.04em; /* Slight spacing between letters */
    text-align: center; /* Text alignment */
	color: #4D4D4D;
}
.sofia-pro-bold-text {
    font-family: 'Sofia Pro', sans-serif; /* Include a generic family as a fallback */
    font-size: 17px;
    font-weight: 700; /* Bold weight */
    line-height: 17.02px; /* Exact line height for specific styling needs */
    text-align: center; /* Align text to the left */
	color: #4D4D4D;	
}
	
.titling {
    font-family: 'Titling Gothic FB Condensed', sans-serif; /* Fallback to sans-serif in case the custom font doesn't load */
    font-size: 34px;
    font-weight: 450; /* This is a non-standard weight, ensure your font supports it or use a close standard weight like 400 or 500 */
    line-height: 51px; /* Specific line height for better readability */
    letter-spacing: 0.04em; /* Slight spacing between letters */
    text-align: left; /* Text alignment */
	color: #4D4D4D;	
}
	

    body {
        background-color: #222222;
		font-family: 'Sofia Pro', sans-serif;
		font-size: 15px;
        color: #ffffff;
        margin: 0; /* Removes default margin */
        padding: 0; /* Removes default padding */
        max-width: 100%; /* Set maximum body width */
        margin-left: auto; /* Center the body element horizontally */
        margin-right: auto; /* Center the body element horizontally */
    }
    .bg-dark-custom {
        background-color: #222222;
    }
    .bg-hero {
        background: url('/images/rev3-header.jpg') no-repeat center center;
        background-size: cover;
        height: 100vh; /* Sets the height of the hero section to be 100% of the viewport height */
    }
    .login-hero {
        background: url('/images/header-light.png') no-repeat center center;
        background-size: cover;
        height: 100vh; /* Sets the height of the hero section to be 100% of the viewport height */
    }
.about-hero {
    background: url('/images/about-hero-new.jpg') no-repeat top center;
    background-size: cover;
    height: 70vh; /* Sets the height of the hero section to be 50% of the viewport height */
    display: flex;
    align-items: flex-start; /* Aligns the content to the top */
}
.packages-hero {
    background: url('/images/packagesheader.jpg') no-repeat center center;
    background-size: cover; /* Ensures the background image covers the entire container */
    height: 70vh; /* Sets the height of the hero section to be 70% of the viewport height */
    display: flex;
    align-items: flex-start; /* Aligns the content to the top */
    justify-content: center; /* Centers the content horizontally */
    width: 100%; /* Ensures the hero section spans the full width of the viewport */
    padding-top: 20px; /* Adjust padding to ensure image is not cut off */
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
    position: relative; /* For positioning child elements */
}
.treatments-hero {
    background: url('/images/treatments-header.jpg') no-repeat center center;
    background-size: cover; /* Ensures the background image covers the entire container */
    height: 50vh; /* Sets the height of the hero section to be 70% of the viewport height */
    display: flex;
    align-items: flex-start; /* Aligns the content to the top */
    justify-content: center; /* Centers the content horizontally */
    width: 100%; /* Ensures the hero section spans the full width of the viewport */
    padding-top: 20px; /* Adjust padding to ensure image is not cut off */
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
    position: relative; /* For positioning child elements */
}
.contact-hero {
    background: url('/images/contact-us-new.jpg') no-repeat center center;
    background-size: cover; /* Ensures the background image covers the entire container */
    height: 50vh; /* Sets the height of the hero section to be 70% of the viewport height */
    display: flex;
    align-items: flex-start; /* Aligns the content to the top */
    justify-content: center; /* Centers the content horizontally */
    width: 100%; /* Ensures the hero section spans the full width of the viewport */
    padding-top: 20px; /* Adjust padding to ensure image is not cut off */
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
    position: relative; /* For positioning child elements */
}
.faq-hero {
    background: url('/images/faq-header-new.jpg') no-repeat center center;
    background-size: cover; /* Ensures the background image covers the entire container */
    height: 50vh; /* Sets the height of the hero section to be 70% of the viewport height */
    display: flex;
    align-items: flex-start; /* Aligns the content to the top */
    justify-content: center; /* Centers the content horizontally */
    width: 100%; /* Ensures the hero section spans the full width of the viewport */
    padding-top: 20px; /* Adjust padding to ensure image is not cut off */
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
    position: relative; /* For positioning child elements */
}
.hero-section {
    position: relative; /* Needed for absolute positioning of the child elements */
    
}

.eco-icon {
    position: absolute;
    bottom: -50vh; /* Adjust as needed to fit your design */
    left: 25vw;   /* Adjust as needed to fit your design */
    max-width: 150px;  /* Set the size of your image */
    height: auto; /* Maintain aspect ratio */
    z-index: 10000000;
}

/* Media query for 7068x2160 */
@media (max-width: 7068px) {
    .eco-icon {
        bottom: -5vh; /* Adjust as needed for 7068x2160 screens */
        left: 10vw;   /* Adjust as needed for 7068x2160 screens */
    }
}

/* Media query for 4K (3840x2160) */
@media (max-width: 3840px) {
    .eco-icon {
        bottom: -3vh; /* Adjust as needed for 4K screens */
        left: 20vw;   /* Adjust as needed for 4K screens */
    }
}

/* Media query for 2560x1600 */
@media (max-width: 2560px) {
    .eco-icon {
        bottom: -3vh;  /* Adjust as needed for 2560x1600 screens */
        left: 20vw;   /* Adjust as needed for 2560x1600 screens */
    }
}

/* Media query for 1440p (2560x1440) */
@media (max-width: 2560px) and (max-height: 1440px) {
    .eco-icon {
        bottom: -5vh;  /* Adjust as needed for 1440p screens */
        left: 22vw;   /* Adjust as needed for 1440p screens */
    }
}

/* Existing media queries for smaller resolutions *//* Media query for 1080p (1920x1080) */
@media (max-width: 1920px) {
    .eco-icon {
        bottom: -5vh; /* Adjust as needed for 1080p screens */
        left: 20vw;   /* Adjust as needed for 1080p screens */
    }
}

/* Media query for screens smaller than 1280px (e.g., laptop screens) */
@media (max-width: 1280px) {
    .eco-icon {
        bottom: -5vh; /* Adjust as needed for smaller screens */
        left: 15vw;   /* Adjust as needed for smaller screens */
    }
}

.eco-icon-right {
    position: absolute;
    bottom: 33vh; /* Adjusted to fit your design on 4K screens */
    right: 15vw;  /* Adjust as needed to fit your design */
    width: auto;  /* Set the size of your image */
    height: auto; /* Maintain aspect ratio */
    z-index: 10000000;
}

/* Media query for screens smaller than 1920px (1080p) */
@media (max-width: 1920px) {
    .eco-icon-right {
        bottom: 30vh; /* Adjusted to fit your design on 1080p screens */
        right: 15vw;  /* Adjust as needed for 1080p screens */
    }
}

/* Media query for screens smaller than 1280px (e.g., laptop screens) */
@media (max-width: 1280px) {
    .eco-icon-right {
        bottom: 20vh; /* Adjust as needed for smaller screens */
        right: 15vw;  /* Adjust as needed for smaller screens */
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.bg-image-custom {
    background: url('/images/rubbing.png') no-repeat center center;
    background-size: cover; /* Ensures the background covers the entire area of the div */
    height: auto; /* Adjust this value as needed to fit content */
    display: flex;
    flex-direction: row; /* Adjusted to align children horizontally */
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    flex-wrap: nowrap; /* Prevent wrapping of items */
}

.bg-image-headlights {
    background: url('/images/finish-auto-van.png') no-repeat center center;
    background-size: cover; /* Ensures the background covers the entire area of the div */
    height: 301px; /* Adjust this value as needed to fit content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.btn.custom-btn {
    background-color: #98509E; /* Purple background color */
    color: #ffffff; /* White text color */
    border: none; /* No border for a cleaner look */
    border-radius: 8px; /* Rounded edges */
    padding: 10px 20px; /* Padding for button size */
    margin: 10px; /* Space between buttons */
    font-size: 12px; /* Button text size */
    white-space: nowrap; /* Prevent text from wrapping inside the button */
    flex-shrink: 0; /* Prevent the button from shrinking */
}

@media (min-width: 576px) {
    .bg-image-custom {
        height: 300px; /* Fixed height on larger screens */
    }
}

.bg-block-right {
    background-color: #98509E;
    color: #ffffff; /* Ensures text is white */
}

.bg-image-steamer {
	background: url('/images/steamer.png') no-repeat center center;
	background-size: contain; /* Changed from 'cover' to 'contain' to show the entire image */
	height: 100%; /* Ensure the div stretches vertically to show the whole image */
}

.container, .row, .col-md-6 {
	padding: 0; /* Removes padding inside the container, rows, and columns */
	margin: 0; /* Ensures there are no gaps between blocks */
}
.btn-transparent {
background-color: transparent;
border-color: #ffffff;
color: #ffffff;
}

.btn-outline-light {
width: auto;  /* Ensures the button only takes up as much width as needed for its content */
float: left;  /* Keeps the button floated to the left */
white-space: nowrap;  /* Prevents text from wrapping inside the button */
}
.bg-block-right {
background-color: #98509E;
color: #ffffff;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

/* Ensuring the title does not interfere with text centering */
.bg-block-right h2 {
width: 100%;
clear: both; /* Clears the floating effect for elements below */
}

.bg-block-right p {
margin-top: 20px; /* Adds space between the title and the paragraph */
clear: both; /* Ensures text is not wrapped around the floated title */
}

/* Clearing floats after the button */
.bg-block-right button {
clear: both; /* Prevents text wrapping around the floated button */
}
.img-fluid {
width: 75px;  /* Sets image width */
height: 75px; /* Sets image height */
margin-bottom: 10px; /* Ensures the image covers the area without distorting aspect ratio */
}

.small-text {
font-size: 8px; /* Adjust this value as needed */
}

.text-white {
color: #ffffff;
}



.container {
padding: 0;
margin: 0 auto;
}

.partner-logos {
padding: 50px 0; /* Vertical padding */
}
.partner-logos .line-container {
width: 70%;
margin: 0 auto; /* Centers the line horizontally */
border-top: 1px solid #5f5f5f; /* Adds the line */
padding-bottom: 25px;
}
.logo-icon {
border: 1px solid white; /* Thinner white border */
border-radius: 10px; /* Slightly rounded corners */
padding: 20px; /* Padding inside the border */
margin: 10px; /* Spacing between icons */
color: white; /* Icon color, can change if needed */
display: inline-block; /* Ensures icons align nicely in a row */
background: transparent; /* Background color can be adjusted or set as transparent */
}
.small-text {
font-size: 8px; /* Adjust this value as needed */
}

.custom-button {
width: fit-content; /* Ensures the button is only as wide as its content */
padding: 0.375rem 0.75rem; /* Standard Bootstrap padding for buttons */
}
.social-icons a {
color: #ffffff;  /* Sets icon color */
margin: 0 10px;  /* Spacing between icons */
font-size: 20px; /* Icon size */
}
.social-icons {
padding: 10px 0; /* Padding around the social media icon block for better spacing */
}
.titling-subtitle {
    font-family: 'Titling Gothic FB Condensed', sans-serif; /* Always include a generic family as a fallback */
    font-size: 16px;
    font-weight: 450; /* This is a non-standard weight, ensure your font supports it or use a close standard weight like 400 or 500 */
    line-height: 30px; /* Specific line height for better readability */
    letter-spacing: 0.04em; /* Slight spacing between letters */
    text-align: left; /* Text alignment */
}

.titling-medium {
    font-family: 'Titling Gothic FB Condensed', sans-serif; /* Include a generic family as a fallback */
    font-size: 34px;
    font-weight: 450; /* This is a non-standard weight, ensure your font supports it or use a close standard weight like 400 or 500 */
    line-height: 40.8px; /* Specific line height for better readability */
    letter-spacing: 0.01em; /* Slight spacing between letters */
    text-align: left; /* Text alignment */
}
.titling-small {
    font-family: 'Titling Gothic FB Condensed', sans-serif; /* Include a generic family as a fallback */
    font-size: 14px;
    font-weight: 450; /* This is a non-standard weight, ensure your font supports it or use a close standard weight like 400 or 500 */
    line-height: 14.8px; /* Specific line height for better readability */
    letter-spacing: 0.01em; /* Slight spacing between letters */
    text-align: center; /* Text alignment */
}
.titling-reg {
    font-family: 'Titling Gothic FB Condensed', sans-serif; /* Include a generic family as a fallback */
    font-size: 12px;
    line-height: 1w.8px; /* Specific line height for better readability */
    letter-spacing: 0.01em; /* Slight spacing between letters */
    text-align: center; /* Text alignment */
}		
.pink-section {
    position: absolute; /* Positions the section absolutely to its nearest positioned ancestor */
    width: 1441px; /* Set the width of the section */
    height: 55px; /* Set the height of the section */
    top: 795px; /* Distance from the top of the nearest positioned ancestor */
    left: 2103px; /* Distance from the left of the nearest positioned ancestor */
    background-color: #98509E; /* Background color set to a specific purple */
}
.link-underline {
    position: relative; 
    display: inline; 
    text-decoration: none; 
    color: black; 
    font-family: 'Sofia Pro', sans-serif;
    font-weight: bold; 
}

.link-underline::after {
    content: ''; 
    position: absolute;
    bottom: -10px; 
    left: 0; 
    height: 4px;
    background-color: #98509E; 
    width: 100%; 
}

	
       .icon {
            width: 110px;
            height: 110px;
        }
        .icon-container {
            text-align: center;
						color: #000;

        }
        .section-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
	    .half-width {
            margin: 0 auto; /* Centers the column */
        }
        .box {
            width: 240px;
            height: 391px;
            margin: 10px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
        .box-top {
            background-color: #98509E;
            height: 107px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box-top img {
            max-width: 70%;
            max-height: 100%;
        }
        .box-bottom {
            background-color: #292929;
            height: 284px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }
        .box-bottom p {
            margin: 0;
            padding: 10px 0;
        } 
    .custom-box {
    width: 433px;
    height: 763px;
    margin: 20px auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.custom-box {
    width: 433px;
    height: 763px;
    margin: 20px auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.custom-box-top {
    background: linear-gradient(#6e6e6e, #1e1e1e);
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.custom-box-top img {
    max-width: 100%;
    max-height: 100%;
}

.custom-divider {
    height: 6.3px;
    background-color: #98509E;
}

.custom-box-bottom {
    background-color: #fff;
    padding: 20px;
    color: black;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.custom-box-bottom img {
    display: block;
    margin: 0 auto 20px auto;
    width: 390px;
    height: auto;
}

.custom-box-bottom p {
    font-size: 12px;
    margin-bottom: 20px;
    text-align: left;
}
.custom-toggler {
    border: none;
    box-shadow: none;
}

.custom-toggler:focus,
.custom-toggler:active,
.custom-toggler:focus-visible {
    border: none;
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' linecap='round' linejoin='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}