.html{
    scroll-behavior: smooth;
}



/* Custom Styling for Navigation */
.navbar-brand img {
width: 40px;
height: 40px; /* Set height equal to width for a perfect circle */
border-radius: 50%; /* This makes the image round */
object-fit: cover; /* Ensures the image covers the area without distortion */
}


.navbar {
    background-color: #5ee3ee;
}

.navbar-nav .nav-link {
    color: #1F2955 !important;
    position: relative;
    padding: 10px 15px;
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Roboto', sans-serif; /* Use the Google Font */
}

.navbar-nav .nav-link:hover {
    color: white !important;
    background-color: #f8ac1e !important; /* Background color on hover */
    color: white; /* Text color on hover */
    border-radius: 5px; /* Rounded corners */
}

.dropdown-menu {
    background-color: white;
    border: none;
}

.dropdown-item {
    color: #1F2955 !important;
}

.dropdown-item:hover {
    background-color: #f8ac1e !important;
}

.site-name h1 {
    color: white;
    font-size: 1.5rem;
}

.site-name span {
    color: #f8ac1e;
}

/* Custom Styles for Nested Dropdowns */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}


/* Your custom styles go here */
.hero {
position: relative;
background: url('https://res.cloudinary.com/dh19alfqp/image/upload/v1724412303/Interior%20Designs/rm2nhylrjxnovin4ouq5.jpg');
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
background-size: cover;
background-position: center;
width: 100%;
overflow: hidden; /* Ensure no overflow */
}
.hero-content {
max-width: 800px;
position: relative;
z-index: 2;
opacity: 0; /* Initially hidden */
transform: translateY(20px); /* Slightly move down */
animation: fadeInUp 1.5s ease-out forwards; /* Animation */
}


.hero-content h1 {
font-family: 'Montserrat', sans-serif; /* Replace 'YourChosenFont' with the desired font */
font-size: 2.5em; /* Adjust the size as needed */
/* color: #333; Change the color if needed */
}

.hero-content p {
font-family: 'Open Sans', sans-serif; /* Replace 'YourChosenFont' with the desired font */
font-size: 1.2em; /* Adjust the size as needed */
/* color: #666; Change the color if needed */
}



@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
z-index: 1;
}
.marquee {
position: absolute;
top: 10px; /* Adjust this value to position below the header */
left: 0;
width: 100%;
overflow: hidden;
white-space: nowrap;
padding: 20px 0;
z-index: 1; /* Ensure it appears above other content */
}
.marquee-text {
display: inline-block;
animation: marquee 8s linear infinite alternate;
font-size: 1.2em; /* Adjust font size as needed */
color: #ffffff;
margin: 0;
}
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}



.hero-buttons .btn {
padding: 10px 30px; /* Adjust the padding for size */
font-size: 1.2em; /* Increase font size */
border-radius: 5px; /* Optional: round the corners */
}


/* Button Colors */
.btn-primary {
background-color: #f8ac1e !important; /* Change to your desired primary color */
border: none !important;
}


.hero-buttons a {
margin-right: 20px; /* Add space between buttons */
margin-top: 20px;
}

.hero-buttons a:last-child {
margin-right: 0; /* No margin on the last button */
}


.btn-secondary {
background-color: #1F2955 !important; /* Change to your desired secondary color */
border: none !important;
}

/* Optional: Add hover effects */
.btn-primary:hover {
background-color: #0056b3; /* Darker shade for hover */
}

.btn-secondary:hover {
background-color: #5a6268; /* Darker shade for hover */
}


/* Why Choose us */
.round-img {
border-radius: 50%; /* Makes the image round */
width: 50px; /* Keep the width consistent */
height: 50px; /* Ensure height matches the width */
object-fit: cover; /* Keeps the image proportional and centered */
}


/* Book Appointment Pop up form */
.contact-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.contact-form-wrapper {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    max-width: 900px;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

/* Image Side */
.contact-image {
    width: 100%; /* Full width on mobile */
    height: 300px; /* Fixed height for the image */
    background-image: url('https://res.cloudinary.com/dh19alfqp/image/upload/v1729879979/Interior%20Designs/pop%20up/tfzmretuizbwzqbctt1l.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
}

/* Form Side */
.contact-form {
    padding: 30px;
    width: 100%;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #000 !important;
    cursor: pointer;
}

.close-btn:hover {
    color: #ff0000 !important;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label {
    transform: scale(.85) translateY(-20px);
}

.form-floating label {
    transition: all 0.3s ease;
}

.submit-btn {
    background-color: #867070 !important;
    color: white !important;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #65647C !important;
}

.form-check-label {
    margin-left: 5px;
}

/* Responsive Styles */
@media (min-width: 768px) {
    .contact-form-wrapper {
        flex-direction: row; /* Change to row layout on larger screens */
    }
    .contact-image {
        width: 45%; /* Image side width */
        height: auto; /* Auto height for larger screens */
    }
    .contact-form {
        width: 55%; /* Form side width */
    }
}

/* Ensure the modal dialog is centered vertically and horizontally */
    .modal-dialog {
        max-width: 900px;
        margin: auto; /* Center horizontally */
    }

    .modal-dialog-centered {
        display: flex;
        align-items: center; /* Center vertically */
        min-height: calc(100vh - 1rem); /* Adjust height */
    }



























.expertise-card {
height: 200px;
background-size: cover;
background-position: center;
display: block;
text-decoration: none;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}

.expertise-card:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.expertise-text {
font-size: 1.5em;
font-weight: 600;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}

h2 {
/* text-shadow: 1px 1px 4px rgba(0,0,0,0.2); */
padding-top: 50px;
padding-bottom: 10px;
font-size: 2.5em !important;
/* margin-bottom: 20px; */
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);  /* Subtle text shadow */
}

/* Custom Styles for Project Section */
#property-type {
background-color: #fff !important;
/* padding: 20px 20px; */
}

/* Card and Image Styling */
.card {
border: none;  /* Remove default card border */
}

.image-container {
overflow: hidden;  /* Ensures the image stays within the container when hovered */
border-radius: 10px;  /* Rounded corners for the image */
}

.project-image {
width: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 10px;  /* Apply border-radius directly to image */
}

.project-image:hover {
transform: scale(1.1);  /* Enlarge image on hover */
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2) !important;  /* Add shadow */
}

/* Heading and Button Styling */
#property-type h2 {
font-size: 2.5em;
margin-bottom: 20px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.1) !important;  /* Subtle text shadow */
}

/* Card Text Styling */
.card-title {
font-size: 1.5em;
font-weight: 700;
}

.card-text {
font-size: 1.1em;
color: #555 !important;
}


/* Custom Styles for Services Section */
#services {
background-color: #fff !important;
/* padding: 20px 20px; */
}

/* Card and Image Styling */
.card {
border: none;  /* Remove default card border */
}

.image-container {
overflow: hidden;  /* Ensures the image stays within the container when hovered */
border-radius: 10px;  /* Rounded corners for the image */
}

.project-image {
width: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 10px;  /* Apply border-radius directly to image */
}

.project-image:hover {
transform: scale(1.1);  /* Enlarge image on hover */
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2) !important;  /* Add shadow */
}

/* Heading Styling */
#services h2 {
font-size: 2.5em;
padding-bottom: 30px;
/* margin-bottom: 20px; */
text-shadow: 1px 1px 3px rgba(0,0,0,0.1) !important;  /* Subtle text shadow */
}

/* Card Text Styling */
.card-title {
font-size: 1.5em;
font-weight: 700;
}

.card-text {
font-size: 1.1em;
color: #555 !important;
}



/* Recent Projects Section */
#recent-projects {
background-color: white !important; /* Light background for the section */
/* padding: 40px 0; Remove side padding */
}
.text-center {
margin-bottom: 30px; /* Adjust the value as needed */
}


/* Card Styles */
.card {
transition: transform 0.3s; /* Smooth scaling on hover */
border: none; /* Remove default card border */
}

/* Image Container and Styles */
.image-container {
overflow: hidden; /* Ensures the image stays within the container */
border-radius: 10px; /* Rounded corners for the image */
}

.project-image {
transition: transform 0.3s; /* Smooth scaling on hover */
border-radius: 10px; /* Rounded corners for the image */
}

.project-image:hover {
transform: scale(1.05); /* Enlarge image on hover */
}

/* Text Centering */
.card-body {
padding: 10px; /* Reduce padding for compactness */
}

.card-title {
font-size: 1.2em; /* Smaller title */
}

.card-text {
font-size: 0.9em; /* Smaller text */
}

.card .btn {
margin-top: 15px; /* Adds space between text and button */
background-color: #f8ac1e !important; /* Primary color */
color: white !important; /* Text color */
transition: background-color 0.3s; /* Transition effect */
}

.card .btn:hover {
background-color: #e1970bd7 !important; /* Darker color on hover */
}


/* You can add your additional footer styles here */
footer {
background-color: #1c2331 !important;
color: white !important;
}

footer .social-icons a {
margin-right: 1rem;
color: white !important;
}

footer hr {
background-color: #7c4dff !important;
height: 2px;
}

footer p {
margin-bottom: 0.5rem;
}

.social-icons a {
/* color: #1F2955 !important; Change to your desired color */
font-size: 24px;
}

/* .social-icons a:hover { */
/* color: red !important; Change to a hover color */
/* } */


/* Social Media Colors */
.icon-facebook {
    color: #3b5998 !important; /* Facebook blue */
}

.icon-twitter {
    color: #1da1f2 !important; /* Twitter blue */
}

.icon-whatsapp {
    color: #25D366 !important; /* WhatsApp green */
}

.icon-instagram {
    color: #C13584 !important; /* Instagram pink */
}

.icon-linkedin {
    color: #0077b5 !important; /* LinkedIn blue */
}

.icon-youtube {
    color: #FF0000 !important; /* YouTube red */
}









.phone-icon, .whatsapp-icon {
    position: fixed;
    bottom: 30px; /* Adjusted for better spacing */
    width: 40px; /* Fixed width for consistency */
    height: 40px; /* Fixed height for consistency */
    display: flex; /* Center the icon */
    justify-content: center; /* Center the icon */
    align-items: center; /* Center the icon */
    border-radius: 50%; /* Makes the background circular */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    z-index: 1000; /* Ensures it stays on top of other elements */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth transitions */
}

.phone-icon {
    right: 30px; /* Adjust this value to move the icon left or right */
    background-color: #c89435 !important; /* Phone icon background */
}

.whatsapp-icon {
    left: 30px; /* Adjust this value to move the icon left or right */
    background-color: #25D366 !important; /* WhatsApp green color */
}

.phone-icon a, .whatsapp-icon a {
    color: white !important; /* Color of the icons */
    text-decoration: none; /* Remove underline from the link */
    font-size: 25px; /* Adjust size of the icons */
}

/* .phone-icon a:hover, .whatsapp-icon a:hover { */
    /* transform: scale(1.1); Slightly enlarge the icon on hover */
    /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); Shadow effect on hover */
/* } */

@media (max-width: 600px) {
    .phone-icon, .whatsapp-icon {
        width: 50px; /* Smaller width on mobile */
        height: 50px; /* Smaller height on mobile */
    }

    .phone-icon a, .whatsapp-icon a {
        font-size: 24px; /* Smaller icon size on mobile */
    }
}












































































/* Initial state for animations */
.slide-in-left, .slide-in-right {
    opacity: 0;
    transform: translateX(-100px); /* For text from the left */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.slide-in-right {
    transform: translateX(00px); /* For image from the right */
}

/* Active state for animations */
.active {
    opacity: 1;
    transform: translateX(0);
}






/* why choose us */

/* Initial state for each card in "Why Choose Us" section */
.why-choose-card {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Keyframe for fade and scale animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Active animation state */
.why-choose-card.animate {
    animation: fadeInUp 0.8s ease forwards;
}




/* Expertise Section animation */

/* Initial state for each expertise card */
.expertise-card {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Keyframe for fade and scale animation */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Active animation state */
.expertise-card.animate {
    animation: fadeInScale 0.8s ease forwards;
}








/* Your property type */
/* Initial state for animation */
.property-card {
    opacity: 0;
    transform: translateY(20px); /* Start slightly lower */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Active state for the animation */
.property-card.active {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Slide to its original position */
}






/* Creafting Beautiful interiors

/* Initial state for each service card */
.service-card {
    opacity: 0;
    transform: translateY(20px); /* Start slightly lower */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Active state for the animation */
.service-card.active {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Slide to its original position */
}




/* recent projects */

/* recent projects */
.animated-card {
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly lower */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transition effect */
}

.fade-in-on-scroll {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move to original position */
    animation: bounce 0.5s ease forwards; /* Apply bounce animation */
}

@keyframes bounce {
    0% {
        transform: translateY(20px);
    }
    60% {
        transform: translateY(-10px); /* Slight upward bounce */
    }
    100% {
        transform: translateY(0); /* Final position */
    }
}



/* Global reset for body and html and removing footer space */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Ensure the full height is utilized */
  }