body {
    font-family: 'Roboto', sans-serif; /* Apply Roboto font */
}
.card {
    margin: 5px 0px 0px 5px;
padding: 15px;
width:100%;
background: #f8f9fa;

text-align: center;

user-select: none;
border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
        margin-bottom: 20px;
}
.card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
.cover-photo {
    position: relative;

    background-size: cover;
    height: 300px;
    border-radius: 5px 5px 0 0;
}



.profile-name {
font-size: 30px;
margin: 25px 0 0 25px;
color: black;
}

.about {
margin-top: 0px;
margin-bottom: 0px;
line-height: 1.6;
color: black;
}

.btn {
margin-top: 0px;
margin-bottom: 0px;
    background: #910B05;
padding: 10px 25px;
border-radius: 3px;
    border: 1px solid #910B05;
font-weight: bold;

cursor: pointer;
color: #222;
transition: 0.2s;
width: 100%;
}

.btn:last-of-type {
background: transparent;
border-color: #910B05;
color: #910B05;
}

.btn1 {
margin-top: 0px;
margin-bottom: 0px;
background: #910B05;
padding: 10px 25px;
border-radius: 3px;
border: 1px solid #910B05;
font-weight: bold;

cursor: pointer;
color: white;
transition: 0.2s;
width: 50%;
}


.btn1:hover {
background: white;
color: #910B05;
}



/* Styles for the fixed bottom menu */
#tp-bottom-menu-sticky {
    position: fixed; /* Fixes the div to the bottom of the screen */
    bottom: 0; /* Positions it at the bottom */
    left: 0; /* Aligns it to the left */
    width: 100%; /* Makes it full width */
    background-color: white; /* Background color for visibility */
    z-index: 1000; /* Ensures it stays above other content */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
}
.tp-mobile-item-btn {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center; /* Center align items */
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit color from parent */
    padding: 10px 0; /* Padding for better touch targets */
    border: none; /* Remove default button border */
    background: none; /* Remove default button background */
    cursor: pointer; /* Change cursor to pointer for buttons */
}
.tp-mobile-item {
    padding: 10px; /* Padding for each item */
}

/* Animation for modal */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

@keyframes zoom {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-bounce {
    animation: bounce 0.5s, zoom 0.5s forwards;
}

.modal-content {
    background-color: #f8f9fa; /* Light background for a festive feel */
    border: 2px solid #28a745; /* Green border for a holiday touch */
    border-radius: 10px; /* Rounded corners */
}

/* Contact modal: transparent background with backdrop blur */
#contactModal .modal-content {
    background: rgba(255, 255, 255, 0.06); /* translucent */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 32px rgba(0,0,0,0.37);
    color: #ffffff;
}

#contactModal .modal-header {
    background: transparent; /* keep header transparent so blur shows through */
    border-bottom: none;
}

#contactModal .modal-body {
    background: transparent;
}

/* Ensure close button is visible on translucent background */
#contactModal .btn-close {
    background: transparent !important;
    color: #ffffff !important;
}

/* Slightly darken the backdrop for contrast */
.modal-backdrop.show {
    background-color: rgba(0,0,0,0.45);
}
.promotion-badge {
position: absolute; /* Position it absolutely */
top: 10px; /* Adjust as needed */
right: 10px; /* Adjust as needed */
background-color: red; /* Background color */
color: white; /* Text color */
padding: 1px 5px; /* Padding for better appearance */
border-radius: 4px; /* Rounded corners */
font-size: 11px;
/* Bold text */
width: 55px;
z-index: 10; /* Ensure it appears above other elements */
}
/* General Reset */
body {
    line-height: 1.6;
    padding-top: 60px; /* Prevent content from hiding under the top bar */
}

/* Top Bar (Fixed) */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000569; /* Dark blue replaced */
    color: #fff;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.top-bar .logo h1 {
    font-size: 22px;
    color: #fff;
}

.top-bar .highlight {
    color: white;
}

.top-bar .contact-info span {
    margin-right: 20px;
    font-size: 14px;
}

    .top-bar .quote-button button {
    background: #910B05;
    color: #fff;
    border: none;
    padding: 4px 12px;
    cursor: pointer;
    
    border-radius: 3px;
}
.quote-button button:hover {
    background-color: #fff ;
    color: #910B05;
}
/* Navbar */
.navbar {
    padding: 0px;
    padding-top: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none; /* Hidden by default on smaller screens */
    flex-direction: column;
    z-index: 999;
}

.navbar ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 0px;
    padding: 0px;
}

.navbar ul li {
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}

.navbar ul li a {
    color: #000569;
    text-decoration: none;
    font-size: 16px;
    
    transition: color 0.3s ease;
}

.navbar ul li a:hover {
    color: #910B05;
}

/* Navbar items for larger screens */
@media (min-width: 769px) {
    .navbar {
        display: flex; /* Show navbar by default on larger screens */
        flex-direction: row; /* Horizontal layout */
        justify-content: center;
    }

    .navbar ul {
        flex-direction: row; /* Horizontal layout */
    }

    .navbar ul li {
        border-bottom: none; /* Remove the border on larger screens */
        padding: 15px 20px;
    }
}

/* Menu Icon (Hamburger) */
.menu-icon {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-icon {
        display: block;
    }

    .navbar {
        display: none; /* Hidden by default on mobile */
    }

    .navbar.active {
        display: flex; /* Show navbar when active */
    }

    .top-bar .contact-info {
        display: none; /* Hide contact info on mobile */
    }
}




.container {
max-width: 1180px;
width: 100%;
}

.slider-wrapper {
position: relative;
}

.slider-wrapper .slide-button {
position: absolute;
top: 50%;
outline: none;
border: none;
height: 50px;
width: 50px;
z-index: 5;
color: #fff;
display: flex;
cursor: pointer;
font-size: 2.2rem;
background: #000;
align-items: center;
justify-content: center;
border-radius: 50%;
transform: translateY(-50%);
}

.slider-wrapper .slide-button:hover {
background: #000569;
}

.slider-wrapper .slide-button#prev-slide {
left: -25px;
display: none;
}

.slider-wrapper .slide-button#next-slide {
right: -25px;
}

.slider-wrapper .image-list {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 18px;
font-size: 0;
list-style: none;
margin-bottom: 30px;
overflow-x: auto;
scrollbar-width: none;
}

.slider-wrapper .image-list::-webkit-scrollbar {
display: none;
}

.slider-wrapper .image-list .card1 {
width: 360px;
height: 410px;
object-fit: cover;
}

.container .slider-scrollbar {
height: 24px;
width: 100%;
display: flex;
align-items: center;
}

.slider-scrollbar .scrollbar-track {
background: #ccc;
width: 100%;
height: 2px;
display: flex;
align-items: center;
border-radius: 4px;
position: relative;
}

.slider-scrollbar:hover .scrollbar-track {
height: 4px;
}

.slider-scrollbar .scrollbar-thumb {
position: absolute;
background: #000;
top: 0;
bottom: 0;
width: 50%;
height: 100%;
cursor: grab;
border-radius: inherit;
}

.slider-scrollbar .scrollbar-thumb:active {
cursor: grabbing;
height: 8px;
top: -2px;
}

.slider-scrollbar .scrollbar-thumb::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -10px;
bottom: -10px;
}

/* Styles for mobile and tablets */
@media only screen and (max-width: 1023px) {
.slider-wrapper .slide-button {
display: none !important;
}

.slider-wrapper .image-list {
gap: 10px;
margin-bottom: 15px;
scroll-snap-type: x mandatory;
}

.slider-wrapper .image-list .card1 {
width: 300px;
height: 400px;
}

.slider-scrollbar .scrollbar-thumb {
width: 20%;
}
}
.btn-rech:hover{
background-color: #000569;
color: white;
border:1px solid #910B05;

}
.btn-rech {
border-radius: 50px;
background: #910B05;

border:1px solid #910B05;
padding-left: 6px;
padding-right: 6px;
}
.cat{
border-radius: 10px;
background: #910B05;
color: white;
margin-right: 10px;
border-left-width: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.cat:hover{
background-color: #000569;
color:white;
}


@media (min-width: 992px) { /* For large screens (lg) */
.col-lg-1-5 {
flex: 0 0 12.5%; /* 1.5 / 12 * 100 = 12.5% */
max-width: 12.5%;
}
}
.styled-input,
textarea{
color: white;
width: 100%; /* Full width of the parent container */
max-width: 600px; /* Optional max width for larger screens */
height: auto;
padding: 10px;
font-size: 16px;
background-color: rgba(1, 8, 19, 0.6);
    border: 1px solid #910B05;
border-radius: 5px;
resize: vertical; /* Allow resizing only vertically */
box-sizing: border-box; /* Include padding and border in width calculation */
}
.styled-input:focus,
textarea:focus {
color: white;
outline: none;
border-color: #007bff; /* Blue border on focus */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Focus glow */
background-color: rgba(1, 8, 19, 0.4);
}
.styled-input::placeholder,
textarea::placeholder {
color:rgba(229,9,20,0.52);
opacity: 1; /* Ensures full visibility */
font-style: italic; /* Optional: adds a stylish effect */
}

/* Add responsiveness for small screens */
@media (max-width: 768px) {
textarea {
    max-width: 100%; /* Remove the max width constraint */
}
}

footer {
background-color: #f8f8f8;
padding: 20px;
border-top: 1px solid #ddd;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.footer-section {
margin: 10px;
flex: 1;
min-width: 200px;
}
.footer-section h4 {
margin-bottom: 10px;
}
iframe {
width: 100%;
height: 200px;
border: none;
}
.copyright {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-size: 14px;

}

.search-container {
position: relative;
width: 100%;
}
.search-container input[type="text"] {
border-radius: 6px;
padding: 10px 40px 10px 10px;
width: 100%;
font-size: 16px;
}
.search-container i {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #888;
pointer-events: none;
opacity: 1;
transition: opacity 0.3s;
}
.search-container input[type="text"]:focus + i {
opacity: 0;
}
.search-container input[type="text"]:not(:focus):valid + i {
opacity: 1;
}
/* Modal container */

/* Tabs */
.tab-button {
width: 100%;
text-align: center;
}
.form-section {
display: none;
}
.form-section.active {
display: block;
}
.nav-link#whatsappTab {
color: green;
}
.nav-link#whatsappTab.active {
background-color: rgba(0, 255, 0, 0.2); /* Light green background */
color: green;
}

/* Style for Email tab */
.nav-link#emailTab {
color: red;
}
.nav-link#emailTab.active {
background-color: rgba(255, 0, 0, 0.2); /* Light blue background */
color: red;
}


/* Center the search input icon inside the input */
.search-input-wrapper {
position: relative;
}

.search-input-wrapper i {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: gray;
}

.search-input-wrapper input {
padding-left: 40px; /* Adjust padding for icon space */
}

/* Modal styling for focus effect */
#searchModal .modal-content {
background: #f8f9fa;
border-radius: 10px;
}

#searchModal .btn-primary {
background-color: #0d6efd;
border: none;
}

#searchModal .btn-primary:hover {
background-color: #084298;
}




.intro-text, .summary, .contact {
    text-align: center; /* Center text */
    padding: 20px;
}