@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&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
        @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8f9fa;
        }

        /* Navbar Base Styling */
        .navbar {
            background-color: ghostwhite;
            transition: all 0.3s ease;
        }

        .navbar.shadow {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .navbar-brand img {
            max-width: 150px;
            width: 100%;
            transition: all 0.3s ease;
        }

        /* Nav Links Styling */
        .nav-link {
            font-weight: 600;
            color: #ccc;
            position: relative;
            padding: 0.5rem 1rem;
            margin: 0 0.2rem;
            transition: all 0.3s ease;
        }

        .nav-link:hover {
            color: #007bff;
        }

        /* Animated Underline Effect for Nav Links */
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background-color: #007bff;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: width 0.3s ease-in-out;
        }

        .nav-link:hover::after {
            width: 70%;
        }

        .logohover:hover {
            color: slateblue !important;
            transition: color 0.3s ease-in-out;
            font-weight: 700;
        }

        /* Remove focus outline */
        .navbar-toggler:focus {
            box-shadow: none;
        }

        /* Custom Icon Styling */
        .lni-grid-alt {
            font-size: 1.5rem;
            color: #333;
            transition: color 0.3s ease;
        }

        .navbar-toggler:hover .lni-grid-alt {
            color: #007bff;
        }

        .lni-cross-circle {
            font-size: 2rem;
            color: #333;
        }

        /* Dropdown Menu Styling */
        .dropdown>.dropdown-menu {
            background-color: white;
            border: none;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 0.5rem 0;
            margin-top: 1rem;
            min-width: 12rem;
        }

        .dropdown-item {
            font-weight: 500;
            padding: 0.6rem 1.5rem;
            color: #333;
            transition: all 0.2s ease;
        }

        /* Welcome Section */
        #welcome {
            background-color: #eaeae9;
            color: #3e4455;
            padding: 5rem 0;
        }

        /* Fix for mobile offcanvas */
        .offcanvas {
            max-width: 75%;
            background-color: white;
            color: ghostwhite;
        }

        .offcanvas-header {
            border-bottom: 1px solid #f1f1f1;
        }

        .offcanvas-header .btn-close {
            margin-right: 0;
            font-size: 1.2rem;
        }

        .offcanvas-body .nav-link {
            padding: 0.8rem 1rem;
            border-bottom: 1px solid #f8f8f8;
        }



        /* Medium and large screens */
        @media (min-width: 992px) {

            /* Navbar fixes */
            .navbar {
                padding: 0.5rem 2rem;
            }

            .navbar-expand-lg .navbar-collapse {
                display: flex !important;
                flex-basis: auto;
                justify-content: flex-end;
            }

            .navbar-expand-lg .navbar-nav {
                flex-direction: row;
                align-items: center;
            }

            .navbar-expand-lg .navbar-toggler {
                display: none;
            }

            .navbar .nav-item {
                display: inline-block;
                position: relative;
            }

            .navbar .nav-link {
                padding: 1.5rem 1rem;
            }

            /* Dropdown hover effects */
            .dropdown>.dropdown-menu {
                visibility: hidden;
                opacity: 0;
                top: 100%;
                display: block;
                transition: all 0.2s ease-out;
                transform: translateY(10px);
            }

            .dropdown:hover>.dropdown-menu {
                padding: 0.5rem 0;
                display: block;
                visibility: visible;
                opacity: 1;
                transition: all 0.3s ease-in-out;
                transform: translateY(0);
            }

            .dropdown-item:hover {
                color: white;
                background-color: #007bff;
                padding-left: 1.8rem;
            }

            /* Hide offcanvas on large screens */
            .d-lg-none {
                display: none !important;
            }
        }

        /* Small screens */
        @media (max-width: 991.98px) {
            .navbar {
                padding: 1rem;
            }

            .navbar-collapse {
                display: none !important;
            }

            .navbar-toggler {
                display: block;
            }

            /* Customize mobile dropdown */
            .offcanvas-body .dropdown-menu {
                background-color: #f8f9fa;
                border: none;
                padding-left: 1.5rem;
            }

            .offcanvas-body .dropdown-item {
                padding: 0.5rem 1rem;
            }

            .offcanvas-body .dropdown-item:hover {
                background-color: #e9ecef;
                color: #007bff;
            }
        }

        /* Animation for navbar on scroll (can be activated with JavaScript) */
        .navbar-scrolled {
            padding: 0.5rem 2rem;
            background-color: white;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        /* Why Perennial Section */
        .why-perennial {
            background-color: #f2f7fa;
            /* Light Grayish Blue */
            padding: 50px 0;
        }

        .why-title {
            font-size: 2rem;
            font-weight: bold;
            color: #12343b;
            /* Dark Blue */
        }

        .info-box {
            text-align: left;
        }

        .info-box h5 {
            font-weight: bold;
            color: #12343b;
        }

        .info-box p {
            color: #12343b;
            font-size: 1.1rem;
        }

        .know-more {
            color: #28a745;
            font-weight: bold;
            text-decoration: none;
        }

        .know-more:hover {
            text-decoration: underline;
        }

        /* Footer Styling */
        footer {
            background-color: #111;
            color: #ccc;
        }

        footer h5 {
            font-weight: bold;
        }

        footer ul li {
            margin-bottom: 10px;
        }

        footer ul li a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        footer ul li a:hover {
            color: #28a745;
        }

        /* Social Icons */
        .social-icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            margin-right: 10px;
            background-color: #222;
            color: white;
            border-radius: 50%;
            font-size: 1.2rem;
            transition: 0.3s;
        }

        .social-icon:hover {
            background-color: #28a745;
            color: white;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .social-icon {
                width: 35px;
                height: 35px;
                font-size: 1rem;
            }

            .mobile-logo {
                height: 90px;
                width: 150px;
            }
        }

        /* contact Us CSS */

        .connect-section {
            background: linear-gradient(to right, #1abc9c, #0f4c5c);
            color: white;
        }

        .equal-height {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            padding: 2rem;
        }

        .apply-link {
            color: #4ef58d;
            text-decoration: none;
        }

        .apply-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 767px) {
            .connect-section {
                flex-direction: column !important;
            }
        }