@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    margin: 0;
    font-family: 'Poppins' sans-serif;
    scroll-behavior: smooth;
    color: #333;
    font-size: 14px;
}

body.no-scroll {
    overflow: hidden;
}

/* Top bar styling */
.top-bar {
    background-color: #E5B11C;
    /* Yellow background */
    color: #374151;
    /* Dark gray text for contrast on yellow */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 60;
    /* Higher than navbar when not scrolled, lower when scrolled */
    padding: 0.5rem 20px;
    /* Padding inside the bar */
    display: flex;
    /* Flexbox for alignment */
    justify-content: space-between;
    /* Space out items */
    align-items: center;
}

/* Initial transparent navbar style */
.navbar {
    background-color: rgba(255, 255, 255, 0);
    /* Fully transparent white */
    color: #333;
    /* White text for transparent state */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    box-shadow: none;
    position: fixed;
    top: 40px;
    /* Position below the top-bar */
    left: 0;
    width: 100%;
    z-index: 50;
}

/* Scrolled navbar style */
.navbar.scrolled {
    background-color: #ffffff;
    /* White background */
    color: #374151;
    /* Dark gray text */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    top: 0;
    /* Move to top of viewport when scrolled */
    z-index: 70;
    /* Higher z-index to cover top-bar when scrolled */
}

.navbar.scrolled .top-bar-placeholder {
    display: none;
    /* Hide placeholder when scrolled */
}


.navbar-link {
    color: inherit;
    /* Inherit color from parent (.navbar or .navbar.scrolled) */
    transition: color 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.navbar-link:hover {
    color: #E5B11C;
}


/* Dropdown menu styling */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    top: calc(100% + 0px);
    /* Position below the parent link */
    left: 20%;
    transform: translateX(-50%);
    border-radius: 0.5rem;
    overflow: hidden;
    /* Ensures rounded corners apply */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none;
    /* Allows clicks to pass through when hidden */
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Enable clicks when visible */
}

.dropdown-item {
    padding: 12px 16px;
    display: block;
    text-decoration: none;
    color: #4a4a4a;
    /* Default dropdown item text color */
    transition: background-color 0.2s, color 0.2s;
}

.dropdown-item:hover {
    background-color: #f0f0f0;
    color: #E5B11C;
    /* Orange on hover */
}

/* Scrolled state for dropdown items */
.navbar.scrolled .dropdown-menu .dropdown-item {
    color: #374151;
    /* Dark gray in scrolled state */
}

.navbar.scrolled .dropdown-menu .dropdown-item:hover {
    background-color: #f0f0f0;
    color: #E5B11C;
    /* Orange on hover */
}

/* Hamburger icon for mobile */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: currentColor;
    /* Inherit color from navbar */
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 767px) {
    body {
        padding-top: 80px;
        /* More padding for mobile due to expanded menu */
    }

    .top-bar {
        padding: 0.25rem 0;
        /* Slightly less padding on mobile top bar */
    }

    .navbar {
        top: 36px;
        /* Adjust top position for mobile fixed top-bar */
    }

    .navbar.scrolled {
        top: 0;
        /* Navbar covers top-bar completely when scrolled */
    }

    .hamburger {
        display: flex;
    }

    .nav-links-container {
        display: none;
        flex-direction: column;
        /* align-items: start; */
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        /* Semi-transparent white for mobile menu */
        position: absolute;
        top: 100%;
        left: 0;
        padding: 1rem 0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .nav-links-container.open {
        display: flex;
    }

    .nav-links-container a,
    .nav-links-container .dropdown>a {
        padding: 0.75rem 1.5rem;
        text-align: center;
        width: 100%;
        color: #374151;
        /* Dark text for mobile menu items */
    }

    .dropdown-menu {
        position: static;
        /* Make dropdown full width for mobile */
        transform: none;
        box-shadow: none;
        border-radius: 0;
        margin-top: 0.5rem;
        background-color: #f5f5f5;
        /* Lighter background for mobile dropdown */
    }

    .dropdown-menu .dropdown-item {
        padding-left: 2.5rem;
        /* Indent mobile dropdown items */
    }

    .navbar.scrolled .nav-links-container {
        background-color: #ffffff;
        /* White background for mobile menu when scrolled */
    }

    .navbar.scrolled .dropdown-menu {
        background-color: #f0f0f0;
        /* Lighter background for dropdown when scrolled */
    }
}



section {
    display: flex;
    justify-content: center;
}

.section-animation {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-animation.active {
    opacity: 1;
    transform: translateY(0);
}

/* about us css start */
.about-container {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    gap: 20px;
}

.about-1 {
    width: 50%;
    overflow: hidden;
}

.about-img {
    width: 100%;
}

.gradient-text {
    background-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: left;
    background-image: linear-gradient(125deg, #FEE948 10%, #AC7617 23%);
    font-family: "Libre Franklin", Jost;
    font-size: 45px;
    font-weight: 800;
    line-height: 60px;
}

.read-more-btn {
    background-color: transparent;
    padding: 10px 20px;
    text-decoration: none;
    outline: none;
    border: none;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 12px;
    font-weight: 600;
    background-image: linear-gradient(125deg, #FEE948 10%, #AC7617 63%);
    color: #ffffff;
    cursor: pointer;
}

.read-more-btn:hover {
    background-color: #AC7617;

}

/* about us css end */

/* services css start */
.banner-background {
    background-image: url('./asset/Picture-Opt-5.png');
    /* Placeholder - Replace with your actual image URL */
    background-size: cover;
    background-position: end;
    /* Ensures a minimum height for the banner */
    min-height: 250px;
    /* Default for mobile */
    position: relative;
    /* Needed for overlay positioning */
    width: 100%;
}

@media (min-width: 768px) {

    /* Medium screens and up */
    .banner-background {
        min-height: 350px;
    }
}

@media (min-width: 1024px) {

    /* Large screens and up */
    .banner-background {
        min-height: 400px;
    }
}

.width-60 {
    width: 60%;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.4);
    /* Dark overlay for text readability */
}

.text-golden {
    color: #f7b731;
    font-size: 2.5rem;
    /* Custom golden color from previous context */
}

.bg-golden-button {
    background-color: #f7b731;
    /* Golden background for the button */
}

.text-dark-button {
    color: #333;
    /* Dark text for the button */
}

/* Specific styling for the button icon */
.btn-icon-spacing {
    margin-left: 8px;
    /* Space between text and icon */
}

/* services css end */

/* resident css start */
.residential-container {
    padding: 60px 0;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.residential-container p {
    text-align: center;
}

.card-base h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-base p {
    font-size: 12px;
    margin-bottom: 8px;
}

.card-base button {
    border: 1px solid #ffffff;
}

.card-base :hover {
    color: #ffffff;
}


/* resident css end */
/* commercial css start */
.Commercial-container {
    padding: 50px 0;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.Commercial-container p {
    text-align: center;
}

/* Base styles for the card container */
.card-container {
    position: relative;
    overflow: hidden;
    /* Crucial to hide content outside the card boundaries */
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    transition: all 0.3s ease-in-out;
    background-color: #fff;
    /* bg-white */
}

.card-container:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* hover:shadow-xl */
}

/* Styles for the image */
.card-image {
    width: 100%;
    height: 12rem;
    /* h-48 */
    object-fit: cover;
    border-top-left-radius: 0.75rem;
    /* rounded-t-xl */
    border-top-right-radius: 0.75rem;
    /* rounded-t-xl */
    transition: transform 0.3s ease-in-out;
}

/* Style for the hidden content that slides up */
.card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: linear-gradient(180deg, #05000033 60%, #070405 100%);
    /* opacity: 67%; */
    transform: translateY(100%);
    /* Initially hide by pushing it down */
    transition: transform 0.3s ease-out;
    /* Smooth slide transition */
    padding: 1rem;
    /* p-4 */
    box-sizing: border-box;
    display: flex;
    /* Flexbox for content alignment */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

/* On hover, slide the content overlay up */
.card-container:hover .card-content-overlay {
    transform: translateY(0);
    /* Slide up to show content */
}

/* For cards without specific overlay content, revert to simple text below image */
.card-simple-text {
    padding: 1rem;
    /* p-4 */
    text-align: center;
}


/* commercial css end */

/* commercial bottom card css start */
/* Keyframes for the slide-in animation from the left */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apply animation to the text overlay */
.text-overlay {
    opacity: 0;
    /* Start hidden */
    animation: slideInFromLeft 0.8s ease-out forwards;
    /* Apply the animation */
}

/* Stagger the animation for the second card */
.card:nth-child(2) .text-overlay {
    animation-delay: 0.2s;
}

/* Ensure the button also animates from the left, slightly delayed */
.card-button {
    opacity: 0;
    transform: translateX(-100%);
    /* Start off-screen to the left */
    animation: slideInFromLeft 0.8s ease-out forwards;
}

.card:nth-child(1) .card-button {
    animation-delay: 0.4s;
    /* Delay for first card's button */
}

.card:nth-child(2) .card-button {
    animation-delay: 0.6s;
    /* Delay for second card's button */
}

/* Style for the logo image */
.logo-img {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    /* Adds a slight shadow to the logo */
}

/* commercial bottom card css end */
/* blog css start */
.blog-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Custom styles for the card hover effect */
.blog-card {
    transition: all 0.3s ease-in-out;
    /* Smooth transition for all properties */
}

.blog-card:hover {
    background-image: linear-gradient(125deg, #FEE948 10%, #AC7617 63%);
    /* Orange-500 equivalent */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* hover:shadow-xl */
}

.blog-card:hover .blog-title,
.blog-card:hover .blog-meta-text,
.blog-card:hover .blog-read-more {
    color: #ffffff;
    /* White text on hover */
}

.blog-card:hover .blog-icon {
    color: #ffffff;
    /* White icon on hover */
}

.blog-card-meta-item {
    display: flex;
    align-items: center;
}

.blog-card-meta-item .blog-icon {
    margin-right: 0.25rem;
    /* space-x-1 */
    transition: color 0.3s ease-in-out;
}

.blog-read-more {
    transition: color 0.3s ease-in-out;
}

/* blog css end */
/* carousel css start */

/* Custom scrollbar hide for a cleaner look */
.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-track {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.partners-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* carousel css end */
/* footer css start */

/* Custom brown/golden background for the footer with an image */
.footer-bg {
    position: relative;
    /* Needed for positioning the ::before pseudo-element */
    background-color: #8B4513;
    /* Fallback color */
    /* Using a placeholder image with some texture for demonstration */
    background-image: url('./asset/conscient-elevate-1-768x319.jpg');
    /* Replace with your actual background image URL */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Pseudo-element for the semi-transparent color overlay */
.footer-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #AC7617;
    opacity: 0.85;
    /* Brown color with 70% opacity */
    z-index: 1;
    /* Place it above the background image but below the content */
}

/* Ensure footer content is above the overlay */
.footer-bg>.container,
.footer-bg>.bottom-section {
    position: relative;
    z-index: 2;
    /* Place content above the ::before overlay */
}

.footer-link,
.footer-contact-link,
.social-icon,
.sitemap-link {
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.footer-link:hover,
.footer-contact-link:hover,
.sitemap-link:hover {
    color: #FFD700;
    /* Gold color on hover */
    transform: translateX(5px);
    /* Slight shift for links */
}

.social-icon:hover {
    color: #FFD700;
    /* Gold color on hover */
    transform: scale(1.1);
    /* Slightly larger on hover */
}

/* Scroll to top button styling */
#scrollToTopBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed position */
    bottom: 20px;
    /* Place at the bottom */
    right: 30px;
    /* Place at the right */
    z-index: 99;
    /* High z-index to be on top */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    background-color: #FFD700;
    /* Gold background */
    color: white;
    /* White text/icon */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 8px 15px;
    /* Some padding */
    border-radius: 50%;
    /* Circular shape */
    font-size: 24px;
    /* Icon size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.2s;
}

#scrollToTopBtn:hover {
    background-color: #DAA520;
    /* Darker gold on hover */
    transform: translateY(-5px);
    /* Lift effect */
}

/* footer css end */

/* team css start */
/* Define the slide-in animation from the left */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateY(-100px);
        /* Start 100px to the left */
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        /* End at original position */
    }
}

/* Initial state for elements to be animated */
.animate-on-scroll {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Smooth transition */
}

/* Class to apply when element is in view */
.animate-on-scroll.in-view {
    animation: slideInFromLeft 0.8s ease-out forwards;
}

/* Stagger animation for paragraphs */
.animate-on-scroll:nth-child(2) {
    animation-delay: 0.2s;
    /* Delay for the first paragraph */
}

.animate-on-scroll:nth-child(3) {
    animation-delay: 0.4s;
    /* Delay for the second paragraph */
}

/* Define the slide-in animation from the left */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
        /* Start 100px to the left */
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        /* End at original position */
    }
}

/* Define the slide-in animation from the right */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
        /* Start 100px to the right */
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        /* End at original position */
    }
}

/* Initial state for elements to be animated from left */
.animate-from-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Smooth transition */
}

/* Initial state for elements to be animated from right */
.animate-from-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Smooth transition */
}

/* Class to apply when element is in view (triggers left animation) */
.animate-from-left.in-view {
    animation: slideInFromLeft 0.8s ease-out forwards;
}

/* Class to apply when element is in view (triggers right animation) */
.animate-from-right.in-view {
    animation: slideInFromRight 0.8s ease-out forwards;
}

/* Stagger animation for text elements within the left section */
.left-content .text-animated:nth-child(1).animate-from-left {
    animation-delay: 0s;
}

/* Heading */
.left-content .text-animated:nth-child(2).animate-from-left {
    animation-delay: 0.2s;
}

/* Paragraph */

/* No specific staggering for image, as it's a single element */
/* team css end */

.section-title {
    color: #d4a72d;
    /* Adjust to match the golden color in the image */
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 3rem;
    text-align: center;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* Single column for mobile */
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
}

@media (min-width: 768px) {
    .cards-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Two columns for tablet */
    }
}

@media (min-width: 1024px) {
    .cards-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Three columns for desktop */
    }
}

.card {
    background-color: white;
    border-radius: 1.5rem;
    /* More rounded corners */
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Add background-color and color to the transition for smooth change */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    /* Ensure border gradient doesn't overflow */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Removed initial transparent border, as the ::before pseudo-element will now handle the visible border */
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/* Border gradient effect - now always visible */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1.5rem;
    padding: 1px;
    /* Thickness of the border */
    background: linear-gradient(45deg, #ffd700, #daa520);
    /* Gold gradient */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 1;
    /* Always visible */
    transition: opacity 0.3s ease-in-out;
    /* Still allow transition if other opacity changes were desired */
}

/* No longer need .card:hover::before as it's always visible, but we can use it to enhance the hover effect */
.card:hover::before {
    background: linear-gradient(45deg, #FFD966, #CC9900);
    /* Slightly different gradient on hover for subtle effect */
}


.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    background-color: #d4a72d;
    /* New background color on hover (golden) */
}

/* Change text color on card hover */
.card:hover .card-title,
.card:hover .card-description,
.card:hover .card-icon {
    /* Also change icon color */
    color: white;
    /* New text color on hover */
}

.card:hover .card-icon {
    background-color: #a87e22;
    /* Slightly darker gold for icon background on hover */
}


.card-icon {
    background-color: #d4a72d;
    /* Golden background for icon */
    color: white;
    padding: 1.2rem;
    border-radius: 50%;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    /* Add transition for icon */
}

.card-title {
    color: #d4a72d;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.3;
    transition: color 0.3s ease-in-out;
    /* Add transition for title */
}

.card-description {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    transition: color 0.3s ease-in-out;
    /* Add transition for description */
}

/* Animations */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.card:nth-child(1),
.card:nth-child(2),
.card:nth-child(3) {
    animation-name: slideInFromLeft;
}

.card:nth-child(4),
.card:nth-child(5),
.card:nth-child(6) {
    animation-name: slideInFromRight;
}

/* Delay for sequential animation */
.card:nth-child(1) {
    animation-delay: 0.1s;
}

.card:nth-child(2) {
    animation-delay: 0.2s;
}

.card:nth-child(3) {
    animation-delay: 0.3s;
}

.card:nth-child(4) {
    animation-delay: 0.4s;
}

.card:nth-child(5) {
    animation-delay: 0.5s;
}

.card:nth-child(6) {
    animation-delay: 0.6s;
}

/* our team css start */
/* Base styles for the team card's name section */
.team-name-section {
    background-color: #ffffff;
    /* Default white background */
    color: #374151;
    /* Default dark gray text */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    padding: 1rem;
    /* p-4 */
    text-align: center;
}

/* Base styles for the highlight bar */
.highlight-bar {
    width: 0;
    /* Hidden by default */
    height: 3px;
    background-color: #FFD700;
    /* Yellow/Gold color */
    margin: 0.5rem auto 0;
    /* Spacing and centering */
    transition: width 0.3s ease-in-out;
}

/* Hover effect for the entire team card */
.team-card:hover .team-name-section {
    background-color: #E5B11C;
    /* Amber-600 on hover */
    color: #ffffff;
    /* White text on hover */
}

.team-card:hover .highlight-bar {
    width: 24px;
    /* Visible on hover */
}

/* Active/Default highlighted state for Saif Sheikh's card */
.team-card.active .team-name-section {
    background-color: #d97706;
    /* Amber-600 for active state */
    color: #ffffff;
    /* White text for active state */
}

.team-card.active .highlight-bar {
    width: 24px;
    /* Permanent highlight for active state */
}

/* our team css end */
.partners-container {
    width: 100%;
}

.relative-container {
    width: 70%;
}

.team-nav {
    top: 40px;
}

.blog-nav {
    top: 40px;
}

.blog-page {
    height: 80px;
}

.contact-page {
    height: 300px;
}

.home-page {
    height: 100vh;
}


@media (max-width: 767px) {
    .team-nav {
        top: 0px;
    }

    .home-page {
        height: 25vh;
    }

    .blog-nav {
        top: 0px;
    }

    .blog-page {
        height: 0;
    }

    .contact-page {
        height: 100px;
    }

    .Commercial-container {
        width: 90%;
    }

    .residential-container {
        width: 90%;
    }

    .relative-container {
        width: 90%;
    }

    .about-container {
        width: 90%;
        flex-direction: column;
    }

    .about-1 {
        width: 100%;
    }

}
@media (min-width: 1024px) {

    /* .home-page {
        height: 60vh;
    } */
}