/* Change text color for navigation menu items on hover */
.wp-block-navigation :hover {
    color: #232323; /* Change this to the desired color */
}
/* Remove underline for navigation menu items on hover */
.wp-block-navigation :hover {
    text-decoration: none; /* Remove underline */
  
/* Style for navigation menu items on hover */

    font-weight: normal; /* Make the text bold */
}

/* Default Styling for Navigation Links */
.menu-item a {
    color: black; /* Set the default text color for all menu items */
    font-weight: normal; /* Set the default font weight for all menu items */
    padding: 5px 10px; /* Adjust the padding around the text */
    border-radius: 5px; /* Add rounded corners to the highlight */
}

/* Highlight the Current Page Link for About Page */
.navigation-about.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}

/* Highlight the Current Page Link for Projects Page */
.navigation-projects.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}

/* Highlight the Current Page Link for Awards+Publications Page */
.unique-awards.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}

/* Highlight the Current Page Link for Research Page */
.unique-research.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}

/* Highlight the Current Page Link for Contact Page */
.unique-contact.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}


/* Style for the image container */
.hover-effect-orchid {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-orchid::before {
    content: "Orchid Petals Clubhouse, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-orchid:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-mps {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-mps::before {
    content: "Modern Public School, Bhiwadi"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-mps:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-aralias {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-aralias::before {
    content: "Residence- DLF Aralias, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-aralias:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-farmhouse {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-farmhouse::before {
    content: "Farmhouse, New Delhi"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-farmhouse:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-sgr {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-sgr::before {
    content: "Sir Ganga Ram Hospital, New Delhi"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-sgr:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-rayspower {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-rayspower::before {
    content: "Rayspower, Imperia Mindspace, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-rayspower:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-vasantvihar {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-vasantvihar::before {
    content: "Residence, New Delhi "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-vasantvihar:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-bml {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-bml::before {
    content: "BML Munjal Museum, Gurugram "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-bml:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Highlight the Current Page Link for All Page */
.navigation-all.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}

/* Highlight the Current Page Link for Residential Page */
.navigation-residential.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}

/* Highlight the Current Page Link for Commercial Page */
.navigation-commercial.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}

/* Highlight the Current Page Link for Institutional Page */
.navigation-institutional.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}

/* Highlight the Current Page Link for Hospitality Page */
.navigation-hospitality.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}

/* Highlight the Current Page Link for Healthcare Page */
.navigation-healthcare.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}
/* Highlight the Current Page Link for Infrastructure Page */
.navigation-infrastructure.current-menu-item > a {
    font-weight: normal; /* Set the font weight to bold for the current page link */
}


/* Style for the image container */
.hover-effect-venture {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-venture::before {
    content: "Venture X, IFFCO Chowk, Gurugram "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-venture:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-itc {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-itc::before {
    content: "Penthouse- ITC Laburnum, Gurugram "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-itc:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-ap {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-ap::before {
    content: "Airport, Pondicherry "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-ap:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-resort {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-resort::before {
    content: "Resort, Narendranagar "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-resort:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-surya {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-surya::before {
    content: "Farmhouse, Palwal, Haryana "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-surya:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-inno {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-inno::before {
    content: "Innova8 Coworking Space, Gurugram "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-inno:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-suraj52 {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-suraj52::before {
    content: "Suraj School, Gurugram "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-suraj52:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-fat {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-fat::before {
    content: "Fat Lulu's Cafe, Gurugram "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-fat:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-fortis {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-fortis::before {
    content: "Fortis Jessaram Hospital, New Delhi "; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-fortis:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-belmonte {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-belmonte::before {
    content: "Residence- Vipul Belmonte, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-belmonte:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-cyclotron {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-cyclotron::before {
    content: "Shreeji Cyclotron, Lucknow"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-cyclotron:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-shaberi {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-shaberi::before {
    content: "Modern Public School, Shaberi"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-shaberi:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-scr {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-scr::before {
    content: "Residence, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-scr:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-cbm {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-cbm::before {
    content: "Commercial Building, Mumbai"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-cbm:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-sws {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-sws::before {
    content: "Suncity World School, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-sws:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-sheows {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-sheows::before {
    content: "Sheows Care Centre, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-sheows:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-sikkim {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-sikkim::before {
    content: "Airport Terminal & Control Tower, Sikkim"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-sikkim:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-ilbs {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-ilbs::before {
    content: "ILBS Housing, New Delhi"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-ilbs:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-autob {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-autob::before {
    content: "Autodesk, Bangalore"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-autob:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-surajm {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-surajm::before {
    content: "Suraj School, Manesar"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-surajm:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-heliport {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-heliport::before {
    content: "Heliport, New Delhi"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-heliport:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-villa {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-villa::before {
    content: "Villa, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-villa:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-kolkata {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-kolkata::before {
    content: "New Kolkata Municipal Building, Kolkata"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-kolkata:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-autop {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-autop::before {
    content: "Autodesk, Pune"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-autop:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-venturex {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-venturex::before {
    content: "Venture X, Silverton, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-venturex:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-autop {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-autop::before {
    content: "Autodesk, Pune"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-autop:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-infotech {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-infotech::before {
    content: "Infotech Centre, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-infotech:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-autod {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-autod::before {
    content: "Autodesk, Delhi"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-autod:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Style for the image container */
.hover-effect-crocs {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the background covers the entire image */
}

/* Style for the image */
.hover-effect-crocs::before {
    content: "Crocs Office, Gurugram"; /* Specific text content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.7); /* Custom background color (semi-transparent dark) */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px; /* Increased font size for better visibility */
    color: #ffffff; /* Custom text color (white) */
    font-family: 'Albert Sans', sans-serif; /* Set the font style to Albert Sans */
    font-weight: normal; /* Set the font weight to bold */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Add padding to the background box */
}

/* Hover effect */
.hover-effect-crocs:hover::before {
    opacity: 1; /* Show the background with full opacity on hover */
    animation: delayRedirect 0.5s forwards; /* Delayed redirection animation */
}

@keyframes delayRedirect {
    100% {
        pointer-events: none; /* Disable pointer events after delay */
        cursor: default; /* Change cursor to default after delay */
    }
}


/* Change text color inside the button to mustard */
.is-style-outline .wp-block-button__link {
    color: #d29938; /* mustard text color */
    transition: color 0.5s; /* Smooth transition effect */
}

.is-style-outline .wp-block-button__link:hover {
    color: #d29938; /* Text color on hover (you can adjust this color if needed) */
}

/* Add animation effect on hover */
.is-style-outline .wp-block-button__link {
    transition: transform 0.3s;
}

.is-style-outline .wp-block-button__link:hover {
    transform: scale(1.1); /* Increase button size on hover */
}


/* Apply hover effect to the image with class 'image-hover' */
.image-hover {
    transition: transform 0.5s; /* Smooth transition effect */
}

.image-hover:hover {
    transform: scale(1.2); /* Increase the size of the image on hover */
}


.jetpack-slideshow img {
    transition: opacity 10s ease-in-out; /* Adjust the duration as needed */
    opacity: 0;
}

.jetpack-slideshow img.is-active {
    opacity: 1;
}