/*PRIMARY BASE COLOR #fbdd5f*/

body {
            /*font-family: 'Inter', sans-serif;*/
            font-family: 'Montserrat', sans-serif;
            /* Removed overflow: hidden here to allow page scrolling */
            background-color: #0E1117; /* Background color */
            color: #FFFFFF; /* Primary Text */
/* cursor: none; /* Hide default cursor on desktop */
            margin: 0; /* Remove default body margin */
            padding: 0; /* Remove default body padding */
        }

        /* Added box-sizing for better layout control */
        header,
        header .logo-placeholder,
        header .main-nav,
        header .menu-icon {
            box-sizing: border-box;
        }

        /* Preloader Styles */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0E1117;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }

        .loader {
            border: 8px solid #2A2D34;
            border-top: 8px solid #fbdd5f;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Custom Cursor Styles */
        #custom-cursor {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none; /* Allow clicks to pass through */
            z-index: 9999;
            mix-blend-mode: difference; /* Make it visible on different backgrounds */
            transition: transform 0.2s ease-out; /* Smooth follow */
        }

        .cursor-dot {
            width: 12px;
            height: 12px;
            background-color: #fbdd5f; /* Headings color */
            border-radius: 50%;
            position: absolute;
            top: -4px; /* Center dot */
            left: -4px; /* Center dot */
            transition: transform 0.4s ease-out;
        }

        .cursor-circle {
            width: 50px;
            height: 50px;
            border: 2px solid #fbdd5f; /* Headings color */
            border-radius: 50%;
            position: absolute;
            top: -22px; /* Center circle */
            left: -22px; /* Center circle */
        }

        /* Hide custom cursor on small screens */
        @media (max-width: 768px) {
            body {
                cursor: auto; /* Show default cursor */
            }
            #custom-cursor {
                display: none;
            }
        }

        /* Header Styles */
        header {
            position: sticky; /* Sticky header */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100; /* Ensure it's above page content */
            padding: 1rem;
            padding-bottom: 0.5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
/* background-color: rgba(14, 17, 23, 0.9); /* Semi-transparent background */
            backdrop-filter: blur(5px); /* Blur effect */
        }

        .logo-placeholder {
            width: 224px;
            height: 82px;
/* background-color: #2A2D34; /* Placeholder color */
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FFFFFF;
            font-weight: bold;
            flex-shrink: 0; /* Prevent shrinking */
        }

        .menu-icon {
            font-size: 2rem;
            color: #fbdd5f; /* Headings color */
            cursor: pointer;
             flex-shrink: 0; /* Prevent shrinking */
        }

        /* Main Navigation Styles (Desktop Only) */
        .main-nav {
            display: flex; /* Use flexbox for horizontal layout */
            flex-wrap: nowrap; /* Prevent wrapping */
            list-style: none;
            padding: 0;
            margin: 0;
            background-color: rgba(42, 45, 52, 0.7); /* Semi-transparent background */
            backdrop-filter: blur(5px); /* Blur effect */
            border: 1px solid #fbdd5f; /* Thin line border */
            border-radius: 9999px; /* Round corners */
            padding: 0.5rem 1.5rem;
            margin: 0 auto; /* Center the nav */
        }

        .main-nav ul {
            display: flex; /* Ensure the ul itself is a flex container */
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .main-nav li {
            position: relative; /* Needed for dropdown positioning */
            /* Use inline-block to make list items sit next to each other */
            display: inline-block;
            margin: 0 0.75rem; /* Adjust margin as needed */
        }

        .main-nav a {
            color: #FFFFFF;
            text-decoration: none;
            text-transform: uppercase; /* Capitalized */
            font-size: 1rem; /* Adjust font size as needed */
            padding: 0.5rem 0;
            display: inline-block; /* Needed for text animation */
            overflow: hidden; /* Hide overflowing text during animation */
            position: relative; /* Needed for ::after positioning */
        }

        /* Active menu item styling */
        .main-nav a.active {
            color: #FFFFFF; /* Highlight color */
            font-weight: bold;
        }


        /* Text animation on hover for main nav items */
        .main-nav a span {
             display: inline-block;
             transition: transform 0.3s ease;
        }

        .main-nav a:hover span {
             transform: translateY(-125%); /* Move text up */
        }

         .main-nav a::after {
             content: attr(data-text); /* Use data-text attribute for the second line */
             display: inline-block;
             position: absolute;
             top: 110%; /* Position below the original text */
             left: 0;
             width: 100%;
             text-align: center; /* Center the second line */
             color: #FFFFFF; /* Highlight color on hover */
             transition: transform 0.3s ease;
         }

         .main-nav a:hover::after {
              transform: translateY(-100%); /* Move the second line up */
         }


        /* Dropdown Menu Styles (Desktop Only) */
        .main-nav .dropdown-menu {
            display: none; /* Hidden by default */
            position: absolute; /* Position absolutely */
            top: 100%; /* Position below the parent menu item */
            left: 50%; /* Center below parent */
            transform: translateX(-50%); /* Adjust for centering */
            background-color: rgba(14, 17, 23, 0.9); /* Semi-transparent dark background */
            border: 1px solid #fbdd5f;
            padding: 0.5rem 0;
            z-index: 1000;
            min-width: 200px; /* Minimum width for dropdown */
            text-align: left; /*left align dropdown items */
            border-radius: 0.5rem; /* Rounded corners for dropdown */
        }

        .main-nav li:hover > .dropdown-menu {
             display: block; /* Show on hover (Desktop) */
        }

        .main-nav .dropdown-menu li {
            margin: 0;
            padding: 0.25rem 0.5rem;
            border-bottom: none; /* No horizontal divider in dropdown */
            display: block; /* Ensure dropdown items are block for vertical list */
        }

        .main-nav .dropdown-menu a {
            font-size: 0.9rem; /* Smaller font size for sub-menu */
            line-height: normal;
            text-transform: none; /* No capitalization for sub-menu */
            color: #FFFFFF;
        }

         /* Text animation on hover for sub-menu items */
         .main-nav .dropdown-menu a span {
              display: inline-block;
              transition: transform 0.3s ease;
         }

         .main-nav .dropdown-menu a:hover span {
              transform: translateY(-135%); /* Move text up */
         }

          .main-nav .dropdown-menu a::after {
              content: attr(data-text); /* Use data-text attribute for the second line */
              display: inline-block;
              position: absolute;
              top: 95%; /* Position below the original text */
              left: 0;
              width: 100%;
              text-align: left; /* Center the second line */
              color: #FFFFFF; /* Highlight color on hover */
              transition: transform 0.3s ease;
         }

         .main-nav a:hover::after {
              transform: translateY(-100%); /* Move the second line up */
         }


        /* Hide main nav on mobile */
        @media (max-width: 1023px) { /* Adjust breakpoint as needed */
            .main-nav {
                display: none;
            }
        }


        /* Full-screen Menu Overlay Styles (Breadcrumb) */
        #menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(14, 17, 23, 0.95); /* Semi-transparent dark background */
            z-index: 999;
            display: flex;
            visibility: hidden; /* Initially hidden */
            opacity: 0;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        #menu-overlay.visible {
            visibility: visible;
            opacity: 1;
        }

        .menu-sections {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Three equal columns */
            width: 100%;
            height: 100%;
            /* Thin vertical dividers */
            border-left: 1px solid #fbdd5f;
            border-right: 1px solid #fbdd5f;
        }

        .menu-section {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            /* Left align content */
            align-items: flex-start;
            justify-content: flex-start; /* Align content to top */
            overflow-y: auto; /* Allow scrolling if content overflows on desktop */
        }

        /* Mobile specific menu layout (Matching landing page) */
        @media (max-width: 768px) {
            .menu-sections {
                grid-template-columns: 1fr; /* Single column on mobile */
                grid-template-rows: auto auto auto; /* Stack sections */
                border: none; /* No vertical dividers on mobile */
            }
             .menu-section {
                 /* Thin horizontal dividers on mobile */
                 border-bottom: 1px solid #fbdd5f;
                 padding: 1rem;
                 overflow-y: visible; /* Prevent scrolling within mobile sections */
                 /* Center align content on mobile sections */
                 align-items: center;
             }
             .menu-section:last-child {
                 border-bottom: none;
             }
        }


        .menu-section h2 {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fbdd5f;
            margin-bottom: 1rem;
        }

        .menu-section p {
            text-align: justify;
            margin-bottom: 1rem;
        }

        /* Social Icons - Styled as larger buttons (Matching landing page) */
        .social-icons {
            display: flex;
            justify-content: center; /* Center the icons within their container */
            width: 100%; /* Take full width to help with centering */
        }

        .social-icons a {
            margin: 0 0.5rem;
            font-size: 1.5rem; /* Icon size */
            color: #FFFFFF;
            background-color: #27548A; /* Button background color */
            width: 50px; /* Fixed width for button */
            height: 50px; /* Fixed height for button */
            border-radius: 50%; /* Make it round */
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .social-icons a:hover {
            background-color: #3C6FB3; /* Hover background color */
        }


        /* Breadcrumb Navigation Menu Styles (within overlay) */
        .breadcrumb-nav {
             list-style: none;
             padding: 0;
             margin: 0;
             width: 100%; /* Take full width of the section */
        }

        .breadcrumb-nav li {
            margin-bottom: 0.5rem;
            /* Left align menu items */
            text-align: left;
            /* Thin horizontal divider */
            border-bottom: 1px solid #fbdd5f;
            padding-bottom: 0.5rem;
            position: relative; /* Needed for hover animation */
        }

         .breadcrumb-nav li:last-child {
             border-bottom: none; /* No divider for the last item */
         }


        .breadcrumb-nav a {
            font-size: 1.75rem; /* Increased font size to 28px (Matching landing page) */
            line-height: 1.5; /* Adjusted line height for better spacing (Matching landing page) */
            color: #FFFFFF;
            text-decoration: none;
            text-transform: uppercase; /* Capitalized */
            display: inline-block; /* Needed for hover animation */
            overflow: hidden; /* Hide overflowing text during animation */
            position: relative; /* Needed for ::after positioning */
        }

        /* Text animation on hover for breadcrumb nav items (Matching landing page) */
        .breadcrumb-nav a span {
             display: inline-block;
             transition: transform 0.3s ease;
        }

        .breadcrumb-nav a:hover span {
             transform: translateY(-100%); /* Move text up */
        }

         .breadcrumb-nav a::after {
             content: attr(data-text); /* Use data-text attribute for the second line */
             display: inline-block;
             position: absolute;
             top: 100%; /* Position below the original text */
             /* Left align the second line */
             left: 0;
             width: 100%;
             /* Left align the text within the second line */
             text-align: left;
             color: #FFFFFF; /* Highlight color on hover */
             transition: transform 0.3s ease;
         }

         .breadcrumb-nav a:hover::after {
             transform: translateY(-100%); /* Move the second line up */
         }


        .contact-info p {
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            /* Left align contact info */
            justify-content: flex-start;
        }

        /* Center align contact info on mobile (Matching landing page) */
         @media (max-width: 768px) {
             .contact-info p {
                 justify-content: center;
             }
         }


        .contact-info i {
            margin-right: 0.5rem;
            color: #fbdd5f; /* Headings color */
        }

        .whatsapp-button {
            background-color: #27548A; /* Links/Buttons color */
            color: #FFFFFF;
            padding: 0.75rem 1.5rem;
            border-radius: 9999px; /* Large round corner */
            text-decoration: none;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            margin-top: 1rem;
            transition: background-color 0.3s ease;
        }

        .whatsapp-button:hover {
            background-color: #3C6FB3;
        }

        .close-menu {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 2rem;
            color: #FFFFFF;
            cursor: pointer;
            z-index: 1000; /* Ensure it's above other content */
        }

        /* Custom Scrollbar for Menu Overlay on Mobile (Matching landing page) */
        @media (max-width: 768px) {
            #menu-overlay {
                /* Allow scrolling on the entire overlay on mobile */
                overflow-y: auto;
            }

            /* Style the scrollbar track */
            #menu-overlay::-webkit-scrollbar-track {
                background: #0E1117; /* Background color */
            }

            /* Style the scrollbar thumb */
            #menu-overlay::-webkit-scrollbar-thumb {
                background-color: #fbdd5f; /* Headings color */
                border-radius: 10px; /* Rounded corners */
                border: 2px solid #0E1117; /* Space around thumb */
            }

            /* Style the scrollbar width */
            #menu-overlay::-webkit-scrollbar {
                width: 8px; /* Scrollbar width */
            }
        }

        /* CTA Section */
        .cta-section {
            padding: 4rem 2rem;
            text-align: center;
            background-color: #0E1117;
            border: 1px solid #fbdd5f; /* Added thin line border */
            border-radius: 1rem; /* Added round corners */
            margin: 2rem auto; /* Center the section and add margin */
            max-width: 1200px; /* Limit max width */
        }

        .cta-section .connect-button-shape {
            display: inline-block;
            border: 1px solid #fbdd5f; /* Thin line border */
            border-radius: 9999px; /* Round corner */
            padding: 0.5rem 1.5rem;
            font-weight: bold;
            color: #FFFFFF;
            margin-bottom: 1rem;
        }

        .cta-section h2 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #fbdd5f;
            margin-bottom: 1.5rem;
        }

        .cta-section .book-now-button {
            display: inline-block;
            background-color: #27548A;
            color: #FFFFFF;
            padding: 1rem 2rem;
            border-radius: 1rem; /* Round corners */
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .cta-section .book-now-button:hover {
            background-color: #3C6FB3;
        }

        /* Other Important Section */
        .other-section {
             padding: 4rem 2rem;
             display: flex;
             align-items: center;
             gap: 2rem;
             background-color: #1A1E24;
        }

        .other-section .image-column,
        .other-section .text-column {
            flex: 1; /* Each column takes equal width */
        }

        .other-section .image-column img {
            width: 100%;
            height: auto;
            border-radius: 1rem;
            border: 2px solid #fbdd5f;
        }

         .other-section .text-column h2 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #fbdd5f;
            margin-bottom: 1rem;
        }

        .other-section .text-column p {
            font-size: 1.1rem;
            line-height: 1.6;
        }

        /* Mobile layout for other section */
        @media (max-width: 768px) {
            .other-section {
                flex-direction: column; /* Stack columns on mobile */
                padding: 2rem 1rem;
            }
        }


        /* Footer Section 1 */
        .footer-one {
            padding: 4rem 2rem;
            --s: 60px; /* control the size*/
            --c1: #141310;
            --c2: #040a11;

            --_g: #0000 83%,var(--c1) 85% 99%,#0000 101%;
        background:
        radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
        radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
        radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
        radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
        var(--c2);
        background-size: calc(2*var(--s)) calc(2*var(--s));
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
            gap: 2rem;
            border-top: 1px solid #fbdd5f; /* Top border */

        }

         .footer-one-section {
             border-left: 1px solid #fbdd5f; /* Vertical divider */
             padding-left: 2rem; /* Add padding for content */

         }

         .footer-one-section:first-child {
             border-left: none; /* No left border for the first section */
             padding-left: 0;
         }


        .footer-one-section h3 {
            font-size: 1.5rem;
            font-weight: bold;
            color: #1b63a1;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        .footer-one-section p {
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 1rem;
            text-align: justify;
        }

        .footer-one-section .social-icons a {
             margin: 0 0.3rem; /* Adjust margin for footer social icons */
             width: 40px;
             height: 40px;
             font-size: 1.2rem;
        }

        .footer-one-section .quick-links,
        .footer-one-section .mortgages-types,
        .footer-one-section .business-banking-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-one-section .quick-links li,
        .footer-one-section .mortgages-types li,
        .footer-one-section .business-banking-links li {
            margin-bottom: 0.5rem;
        }

        .footer-one-section .quick-links a,
        .footer-one-section .mortgages-types a,
        .footer-one-section .business-banking-links a {
            color: #CCCCCC;
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-one-section .quick-links a:hover,
        .footer-one-section .mortgages-types a:hover,
        .footer-one-section .business-banking-links a:hover {
            color: #fbdd5f;
            text-decoration: underline;
        }

         .footer-one-section .contact-info p {
             margin-bottom: 0.5rem;
             display: flex;
             align-items: center;
             justify-content: flex-start; /* Left align contact info in footer */
             font-size: 0.9rem;
         }

         .footer-one-section .contact-info i {
             margin-right: 0.5rem;
             color: #fbdd5f;
         }

         .footer-one-section .whatsapp-button {
             padding: 0.5rem 1rem;
             font-size: 0.9rem;
         }


        /* Mobile layout for footer one */
        @media (max-width: 768px) {
            .footer-one {
                grid-template-columns: 1fr; /* Single column on mobile */
                gap: 1rem;
                padding: 2rem 1rem;
            }
            .footer-one-section {
                border-left: none; /* Remove vertical dividers on mobile */
                padding-left: 0;
                border-bottom: 1px solid #fbdd5f; /* Add horizontal dividers on mobile */
                padding-bottom: 1rem;
            }
             .footer-one-section:last-child {
                 border-bottom: none;
             }
             .footer-one-section .contact-info p {
                 justify-content: flex-start; /* Keep left aligned on mobile footer */
             }
        }


        /* Footer Section 2 */
        .footer-two {
            padding: 1.5rem 2rem;
            background-color: #0E1117;
            text-align: center;
            border-top: 1px solid #fbdd5f; /* Top border */
            display: flex; /* Use flexbox for layout */
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center items horizontally */
            justify-content: center; /* Center items vertically */
        }



        .footer-two a {
            color: #CCCCCC;
            text-decoration: none;
            margin: 0 1rem;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-two a:hover {
            color: #fbdd5f;
        }

        /* Equivalent custom CSS for Tailwind classes */
        .mb-4 { margin-bottom: 1rem; } /* Equivalent to mb-4 */
        .mt-auto { margin-top: auto; } /* Equivalent to mt-auto */
        .mt-4 { margin-top: 1rem; } /* Equivalent to mt-4 */

        
/*2.	Home */
/*3.	About*/
/*4.	Account Opening */
/*5.	Business Banking */
/*6.	Buy-Out*/
/*7.	Commercial Multi Unit and Building Finance*/
/*8.	Commercial Property Finance*/
/*9.	Contact*/
/*10.	 Credit Cards*/
/*11.	 Equity Release & Refinance*/
/*12.	 Loan Calculator*/
/*13.	 Mortgages*/
/*14.	 Non Resident Property Finance*/
/*15.	 Personal Loan*/
/*16.	 Residential Off Plan Property Finance*/
/*17.	 Self-Construction Finance*/
/*18.	 Source Business Finance*/
/*19.	 Trade Finance*/
/*20.	 Purhase*/


/*New Pattern*/