/*Theme: UMID Infotech*/
  /*Author: UMID Infotech*/
  /*File: CSS */
  
/* Custom Properties (Variables) for easier theming */
:root {
    /* Light Theme Defaults */
    --bg-color: #e0e5ec;
    --text-color: #333333;
    --header-bg: rgba(255, 255, 255, 0.8);
    --card-bg: #FFFFFF;
    --section-odd-bg: #FFFFFF;
    --section-even-bg: #F8F9FA;
    --hero-bg-start: #e0f2f7;
    --hero-bg-end: #d4edf5;
    --card-title-color: #047857;
    --card-text-color: #555555;
    --brand-color: #2563eb;
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --scroll-indicator-color: #666;
    --tooltip-bg-color: rgba(0, 0, 0, 0.7);
    --tooltip-text-color: #fff;
    --initial-bg-gradient-start: #e0f2f7;
    --initial-bg-gradient-end: #d4edf5;
    --initial-circle-gradient-start: #a7d9f7;
    --initial-circle-gradient-end: #87ceeb;
    --initial-wave-color: rgba(135, 206, 235, 0.7);
    --closing-bg-color: #f0f2f5;
    --closing-circle-gradient-start: #87ceeb;
    --closing-circle-gradient-end: #a7d9f7;
    --hero-content-bg-light: rgba(255, 255, 255, 0.7);
    --hero-content-text-light: #333333;
    --section-start-gradient-start-light: #e6f0f7;
    --section-start-gradient-end-light: #f0f7fb;
    --about-image-shadow-color-light: rgba(0, 0, 0, 0.25);
    --service-card-shadow: var(--shadow-color);
    --service-card-hover-shadow: rgba(0, 0, 0, 0.2);
    --service-title-color: #000000;
    --service-text-color: #000000;
    --service-card-default-gradient-light: radial-gradient(circle, #FFD1EE 0%, #B0E0E6 100%);
    --service-card-hover-bg-light: #FFFFFF;
    --btn-default-text-light: #2563eb;
    --btn-hover-gradient-light: radial-gradient(circle, rgba(200, 100, 200, 1) 0%, rgba(100, 150, 200, 1) 100%);
    --portfolio-slider-card-bg: #FFFFFF;
    --portfolio-slider-card-border: rgba(0, 0, 0, 0.1);
    --portfolio-slider-shadow: rgba(0, 0, 0, 0.1);
    --portfolio-slider-focused-shadow: rgba(0, 0, 0, 0.2);
    --portfolio-slider-text-color-h5: #333;
    --portfolio-slider-text-color-p: #555;
    --portfolio-slider-nav-shadow: rgba(0, 0, 0, 0.3);
    --portfolio-slider-nav-hover-shadow: rgba(0, 0, 0, 0.4);
    --portfolio-image-bg-light: transparent;
    --recipe-primary-color: #007bff;
    --recipe-secondary-color: #6c757d;
    --recipe-text-color: #333;
    --recipe-bg-color: #f8f9fa;
    --recipe-circle-bg: #ffffff;
    --recipe-border-color: #dee2e6;
    --recipe-hover-color: #0056b3;
    --recipe-central-circle-size-desktop: 200px;
    --recipe-peripheral-circle-size-desktop: 140px;
    --recipe-central-circle-size-mobile: 120px;
    --recipe-peripheral-circle-size-mobile: 90px;
    --recipe-peripheral-circle-padding: 15px;
    --recipe-overlay-color-light: rgba(255, 255, 255, 0.0);
    --recipe-overlay-text-color-light: #333;
    --recipe-content-bg-light: rgba(255, 255, 255, 0.2);
    --recipe-content-text-light: #333333;
    --testimonial-bg: #f0f2f5;
    --testimonial-card-bg: #ffffff;
    --testimonial-shadow: rgba(0, 0, 0, 0.08);
    --testimonial-img-border: #eef2f7;
    --testimonial-img-shadow: rgba(0,0,0,0.1);
    --testimonial-quote-color: #555;
    --testimonial-quote-icon-color: #0d6efd;
    --testimonial-name-color: #333;
    --testimonial-title-color: #777;
    --testimonial-control-bg: #fff;
    --testimonial-control-shadow: rgba(0,0,0,0.1);
    --testimonial-control-icon-bg: #0d6efd;
    --testimonial-indicator-bg: #ccc;
    --testimonial-indicator-active-bg: #0d6efd;
    --contact-hero-content-bg-light: rgba(255, 255, 255, 0.2);
    --contact-hero-content-text-light: #333333;
    --footer-text-color-light: #333333;
    --footer-link-color-light: #2563eb;
    --footer-link-hover-color-light: #007bff;
    --footer-border-color-light: rgba(0, 0, 0, 0.15);
    --footer-shadow-color-light: rgba(0, 0, 0, 0.1);
    --footer-copyright-bg-light: #b0b8c5;
    --footer-copyright-text-light: #222222;
}

body.dark-theme {
    /* Dark Theme Overrides */
    --bg-color: #262f3e;
    --text-color: #e2e8f0;
    --header-bg: rgba(26, 32, 44, 0.8);
    --card-bg: #2d3748;
    --section-odd-bg: #2d3748;
    --section-even-bg: #1a202c;
    --hero-bg-start: #2d3748;
    --hero-bg-end: #1a202c;
    --card-title-color: #9ae6b4;
    --card-text-color: #cbd5e0;
    --brand-color: #63b3ed;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --scroll-indicator-color: #cbd5e0;
    --tooltip-bg-color: rgba(255, 255, 255, 0.7);
    --tooltip-text-color: #333;
    --initial-bg-gradient-start: #2d3748;
    --initial-bg-gradient-end: #1a202c;
    --initial-circle-gradient-start: #4a5568;
    --initial-circle-gradient-end: #2d3748;
    --initial-wave-color: rgba(74, 85, 104, 0.7);
    --closing-bg-color: #1a202c;
    --closing-circle-gradient-start: #2d3748;
    --closing-circle-gradient-end: #4a5568;
    --hero-content-bg-dark: rgba(0, 0, 0, 0.3);
    --hero-content-text-dark: #e2e8f0;
    --section-start-gradient-start-dark: #222b36;
    --section-start-gradient-end-dark: #151c24;
    --about-image-shadow-color-dark: rgba(0, 0, 0, 0.6);
    --service-card-shadow: var(--shadow-color);
    --service-card-hover-shadow: rgba(0, 0, 0, 0.2);
    --service-title-color: #FFFFFF;
    --service-text-color: #FFFFFF;
    --service-card-default-gradient-dark: radial-gradient(circle, #1A5276 0%, #002E63 100%);
    --service-card-hover-bg-dark: transparent;
    --btn-default-text-dark: #63b3ed;
    --btn-hover-gradient-dark: radial-gradient(circle, #001f4d 0%, #000033 100%);
    --portfolio-slider-card-bg: var(--card-bg);
    --portfolio-slider-card-border: rgba(255, 255, 255, 0.1);
    --portfolio-slider-shadow: rgba(0, 0, 0, 0.3);
    --portfolio-slider-focused-shadow: rgba(0, 0, 0, 0.4);
    --portfolio-slider-text-color-h5: #e2e8f0;
    --portfolio-slider-text-color-p: #cbd5e0;
    --portfolio-slider-nav-shadow: rgba(0, 0, 0, 0.5);
    --portfolio-slider-nav-hover-shadow: rgba(0, 0, 0, 0.6);
    --portfolio-image-bg-dark: #4a5568;
    --recipe-overlay-color-dark: rgba(26, 32, 44, 0.0);
    --recipe-overlay-text-color-dark: #e2e8f0;
    --recipe-content-bg-dark: rgba(0, 0, 0, 0.3);
    --recipe-content-text-dark: #e2e8f0;
    --testimonial-bg: #f0f2f5;
    --testimonial-card-bg: #fff0;
    --testimonial-shadow: rgba(0, 0, 0, 0.08);
    --testimonial-img-border: #eef2f7;
    --testimonial-img-shadow: rgba(0,0,0,0.1);
    --testimonial-quote-color: #555;
    --testimonial-quote-icon-color: #0d6efd;
    --testimonial-name-color: #333;
    --testimonial-title-color: #777;
    --testimonial-control-bg: #fff;
    --testimonial-control-shadow: rgba(0,0,0,0.1);
    --testimonial-control-icon-bg: #0d6efd;
    --testimonial-indicator-bg: #ccc;
    --testimonial-indicator-active-bg: #0d6efd;
    --contact-hero-content-bg-light: rgba(255, 255, 255, 0.2);
    --contact-hero-content-text-light: #333333;
    --placeholder-color-dark: #cccccc;
    --footer-text-color-light: #333333;
    --footer-link-color-light: #2563eb;
    --footer-link-hover-color-light: #007bff;
    --footer-border-color-light: rgba(0, 0, 0, 0.15);
    --footer-shadow-color-light: rgba(0, 0, 0, 0.1);
    --footer-copyright-bg-light: #b0b8c5;
    --footer-copyright-text-light: #222222;
    --footer-text-color-dark: #e2e8f0;
    --footer-link-color-dark: #63b3ed;
    --footer-link-hover-color-dark: #90cdf4;
    --footer-border-color-dark: rgba(255, 255, 255, 0.15);
    --footer-copyright-bg-dark: #1a202c;
    --footer-copyright-text-dark: #e2e8f0;
}

        /* General body styling for a soft, light background */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
            /*background: linear-gradient(135deg, var(--initial-bg-gradient-start) 0%, var(--initial-bg-gradient-end) 100%);*/
            color: var(--text-color);
            margin: 0;
            padding: 0;
            transition: background-color 0.3s ease, color 0.3s ease;
            scroll-behavior: smooth; /* Smooth scrolling */
        }

            body.dark-theme {
                background-color: var(--bg-color);
            }

        /* --- Scroll Progress Indicator --- */
        #scroll-progress-indicator {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px; /* Thickness of the bar */
            background-color: var(--brand-color); /* Use brand color for visibility */
            width: 0%; /* Initial width */
            z-index: 10000; /* Ensure it's on top */
            transition: background-color 0.3s ease; /* Smooth theme transition */
        }

        /* --- Sticky Header --- */
        #sticky-header {
            transform: translateY(-100%);
            opacity: 0;
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
            box-shadow: none;
            background-color: var(--header-bg);
            z-index: 9999;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

            #sticky-header.active {
                transform: translateY(0%);
                opacity: 1;
                box-shadow: 0 4px 15px var(--shadow-color);
            }

            #sticky-header nav a {
                transition: all 0.2s ease-in-out;
                color: var(--text-color);
            }

                #sticky-header nav a:hover {
                    transform: scale(1.05);
                    color: var(--brand-color);
                }

        /* Theme Toggle Switch Styling */
        .theme-switch-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            gap: 8px;
        }

            .theme-switch-wrapper .theme-label {
                font-size: 0.85rem;
                font-style: italic;
                color: var(--text-color);
                transition: opacity 0.3s ease, color 0.3s ease;
            }

        /* Default (Light Mode) state for labels */
        #light-label {
            opacity: 1;
        }

        #dark-label {
            opacity: 0.5;
        }

        /* Dark Mode state for labels */
        body.dark-theme #light-label {
            opacity: 0.5;
        }

        body.dark-theme #dark-label {
            opacity: 1;
        }

        .theme-switch {
            display: inline-block;
            height: 24px;
            position: relative;
            width: 48px;
        }

            .theme-switch input {
                display: none;
            }

        .slider {
            background-color: #ccc;
            bottom: 0;
            cursor: pointer;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: .4s;
            border-radius: 24px;
        }

            .slider:before {
                background-color: #fff;
                bottom: 2px;
                content: "";
                height: 20px;
                left: 2px;
                position: absolute;
                width: 20px;
                transition: .4s;
                border-radius: 50%;
            }

        input:checked + .slider {
            background-color: #2196F3;
        }

            input:checked + .slider:before {
                transform: translateX(24px);
            }

        /* --- Initial Circular Animation Section (now a standard scrollable section) --- */
        #fixed-animation-area-initial {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--initial-bg-gradient-start) 0%, var(--initial-bg-gradient-end) 100%);
            transition: background 0.3s ease;
            position: relative;
            overflow: hidden;
            opacity: 1;
            transform: translateY(0);
        }

        #welcome-circle-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100vw;
            height: 100vw;
            background: linear-gradient(135deg, var(--initial-circle-gradient-start) 0%, var(--initial-circle-gradient-end) 100%);
            box-shadow: 0 0 60px rgba(167, 217, 247, 0.7);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            clip-path: circle(50% at 50% 50%);
            opacity: 1;
            pointer-events: auto;
            transition: background 0.3s ease;
        }

        @media (min-width: 768px) {
            #welcome-circle-wrapper {
                width: 100vh;
                height: 100vh;
            }
        }

        #welcome-circle-wrapper::after {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border-radius: 50%;
            z-index: -1;
            background: conic-gradient(from 0deg at 50% 50%, transparent 0%, var(--initial-wave-color) 10%, transparent 20%, transparent 100% );
            animation: rotate-wave 8s linear infinite, pulse-glow 2s infinite alternate;
            transition: background 0.3s ease;
        }

        @keyframes rotate-wave {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pulse-glow {
            0% {
                box-shadow: 0 0 0px var(--initial-wave-color), 0 0 0px var(--initial-wave-color);
            }

            50% {
                box-shadow: 0 0 20px 5px var(--initial-wave-color), 0 0 40px 10px rgba(167, 217, 247, 0.3);
            }

            100% {
                box-shadow: 0 0 0px var(--initial-wave-color), 0 0 0px var(--initial-wave-color);
            }
        }


        #welcome-text-initial {
            font-size: clamp(1.5rem, 4vw, 3rem);
            font-style: italic;
            color: var(--text-color);
            font-weight: bold;
            padding: 1rem;
            line-height: 1.4;
            text-shadow: 1px 1px 2px var(--shadow-color);
            position: relative;
            z-index: 11;
            opacity: 1;
            transition: color 0.3s ease;
            max-width: 80%;
        }

/*Hero section welcome offer */
/* welcome offer hero section  */
.bubble-container {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.bubble {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(42,46,155,0.5) 50%, rgba(237,83,229,0.5) 100%);
  filter: blur(5px);
  animation-name: bubbleMove, bubblePulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes bubbleMove {
  0% { transform: translate(0,0);}
  100% { transform: translate(150px,-150px);}
}
@keyframes bubblePulse {
  0% { transform: scale(1);}
  50% { transform: scale(1.2);}
  100% { transform: scale(1);}
}
         .content-container {
            position: relative;
            z-index: 1; /* Ensure content is on top of the bubbles */
            background: rgba(255, 255, 255, 0.5); /* Light, semi-transparent background for content */
            backdrop-filter: blur(10px); /* Blur the background for a modern glass effect */
            -webkit-backdrop-filter: blur(10px);
            border-radius: 1.5rem; /* Rounded corners for the container */
        }
    body.dark-theme .content-container{
            background: rgba(0, 0, 0, 0.7); /* dark, semi-transparent background for content */
    }
.welcome_hr {
            width: 80px;
            height: 4px;
            background-color: #5a67d8; /* A nice blue color */
            border: none;
            margin-bottom: 1.5rem;
            border-radius: 9999px; /* For rounded corners */
        }
        body.dark-theme .welcome_hr {
                background-color: #FC92F7; /* A nice blue color */
        }
        .list-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            cursor: pointer;
            flex-wrap: nowrap; /* Prevents wrapping on smaller screens */
        }
        .list-item:hover {
            background-color: #f3f4f6; /* Light gray background on hover */
            transform: translateY(-2px); /* Slight lift on hover */
            width:fit-content;
        }
        body.dark-theme .list-item:hover{
            background-color: #0009; /* Light gray background on hover */
        }
        .list-item-icon {
            flex-shrink: 0;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e0e7ff; /* Lighter blue background for icon */
            border-radius: 0.5rem;
            color: #5a67d8; /* Darker blue icon color */
            font-size: 1.25rem;
            float: left;
        }
        .list-item-text {
            font-size: 1.125rem;
            line-height: 1.75rem;
            white-space: nowrap; /* Prevents the text from wrapping */
        }


        /* --- Standard Hero Sections (top, "Why Choose Us", and "Contact Us") --- */
        #standard-hero-section, #why-choose-us-hero-section {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            color: var(--text-color);
            display: flex; /* Kept flex for centering content */
            align-items: center; /* Kept for centering content */
            justify-content: center; /* Kept for centering content */
            text-align: center;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        /* Specific override for #contact-us-hero-section to allow stacking children */

        #contact-us-hero-section{
    
        }

        #standard-hero-section video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        /* Specific background for the "Why Choose Us" hero section */
        #why-choose-us-hero-section {
            background-image: url('../images/umidinfotech-whychoose-us.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* Parallax effect */
        }


        .standard-hero-content {
            padding: 3rem;
            border-radius: 0.75rem;
            box-shadow: 0 8px 30px var(--shadow-color);
            position: relative;
            z-index: 1;
            /* Re-added background-color and backdrop-filter */
            background-color: var(--hero-content-bg-light);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--hero-content-text-light);
            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
        }

        body.dark-theme .standard-hero-content {
            /* Re-added background-color for dark theme */
            background-color: var(--hero-content-bg-dark);
            color: var(--hero-content-text-dark);
        }
        
        body.dark-theme #umidAccordion , body.dark-theme #umidAccordion .accordion-item , body.dark-theme #umidAccordion .accordion-header , body.dark-theme #umidAccordion .accordion-button{
            background-color: var(--hero-content-bg-dark) !important;
            color: var(--hero-content-text-dark);
        }
        
/* body.dark-theme .accordion-item {*/
/*    background-color: var(--hero-content-bg-dark) !important;*/
/*    color: var(--hero-content-text-dark) !important;*/
/*}*/

/*body.dark-theme .accordion-button {*/
/*    background-color: var(--hero-content-bg-dark) !important;*/
/*    color: var(--hero-content-text-dark) !important;*/
/*}*/

/*body.dark-theme .accordion-body {*/
/*    background-color: var(--hero-content-bg-dark) !important;*/
/*    color: var(--hero-content-text-dark) !important;*/
/*}*/

/*body.dark-theme .accordion-button:not(.collapsed) {*/
/*    background-color: var(--hero-content-bg-dark) !important;*/
/*    color: var(--hero-content-text-dark) !important;*/
    box-shadow: none !important; /* To remove the default Bootstrap box shadow */
/*}*/
        
        #contact-us-hero-section .standard-hero-content {
            width: 100%; /* Make it full width */
            max-width: 900px; /* Revert to max-width for content inside the blur container */
            border-radius: 0.75rem; /* Revert border-radius */
            box-shadow: 0 8px 30px var(--shadow-color); /* Revert shadow */
            padding: 3rem; /* Revert padding */
            text-align: left; /* Keep text-align left */
        }

        /* New style for the blur overlay in Contact Us section */
        .contact-us-blur-overlay {
            background-color: var(--contact-hero-content-bg-light);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--contact-hero-content-text-light);
            transition: background-color 0.3s ease, color 0.3s ease, backdrop-filter 0.3s ease;
            width: 100vw; /* Make it 100vw */
            display: flex; /* Use flex to center the content inside */
            align-items: center;
            justify-content: center;
            padding: 5rem 1rem; /* Adjust padding for the blur overlay */
            box-sizing: border-box; /* Include padding in width */
        }

        body.dark-theme .contact-us-blur-overlay {
            background-color: var(--contact-hero-content-bg-dark);
            color: var(--contact-hero-content-text-dark);
        }


        /* Form input styling within the hero content */
        #contact-us-hero-section .form-control,
        #contact-us-hero-section .form-select {
            background-color: transparent; /* Make background transparent */
            border: none; /* Remove individual borders */
            color: var(--text-color); /* Use general text color */
            transition: background-color 0.3s ease, color 0.3s ease;
            box-shadow: none; /* Remove default bootstrap shadow */
        }

            #contact-us-hero-section .form-control:focus,
            #contact-us-hero-section .form-select:focus {
                background-color: transparent; /* Keep transparent on focus */
                border-color: transparent; /* Keep transparent on focus */
                box-shadow: none; /* Remove default bootstrap focus shadow */
                outline: none; /* Remove outline */
            }

            #contact-us-hero-section .form-control::placeholder {
                color: var(--text-color); /* Placeholder color */
                opacity: 0.7;
            }

        /* Styling for the combined input group */
        .contact-input-group {
            border: 1px solid var(--border-color); /* Apply border to the group */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Apply subtle shadow to the group */
            transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
            border-radius: 0.375rem; /* Match rounded-md from Tailwind */
            overflow: hidden; /* Ensures inner elements don't show their own borders */
        }

            .contact-input-group:focus-within {
                border-color: var(--brand-color); /* Highlight border on focus */
                box-shadow: 0 0 0 0.25rem rgba(38, 143, 255, 0.25); /* Add focus ring effect */
            }


        /* Universal Button Styling */
        .btn-primary {
            padding: 0.75rem 1.5rem;
            border-radius: 9999px; /* Fully rounded */
            font-weight: 600;
            color: var(--btn-default-text-light); /* Default text color for light theme */
            background-color: transparent; /* Default transparent background */
            background-image: none; /* No default background image */
            transition: all 0.3s ease; /* Standardized transition for all properties */
            border: 1px solid var(--btn-default-text-light); /* Add a subtle border matching text color */
            box-shadow: none; /* No shadow by default */
        }

        body.dark-theme .btn-primary {
            color: #FFFFFF; /* White text for dark theme */
            border: 1px solid #FFFFFF; /* White border for dark theme */
        }

        .btn-primary:hover {
            background-image: var(--btn-hover-gradient-light); /* Darker gradient for light theme */
            background-size: 200% 100%; /* Make background twice as wide for wave effect */
            background-position: 100% 0%; /* Move background to the right for wave effect */
            color: #fff; /* White text on hover */
            border-color: transparent; /* Remove border on hover */
            transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight enlargement */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* More pronounced shadow on hover */
        }

        body.dark-theme .btn-primary:hover {
            background-image: var(--btn-hover-gradient-dark); /* Darker gradient for dark theme */
        }


        /* --- Main Website Content --- */
        #main-website-content {
            position: relative;
            z-index: 1;
        }

        .main-section {
            padding: 5rem 1rem;
            text-align: center;
            min-height: 80vh; /* Default min-height */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-color);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Set specific sections to 100vh */
        #section-two, #portfolio-slider-section {
            min-height: 100vh;
        }

        /* Apply gradient to section-start */
        #section-start {
            background: linear-gradient(135deg, var(--section-start-gradient-start-light) 0%, var(--section-start-gradient-end-light) 100%);
            transition: background 0.3s ease;
        }

        body.dark-theme #section-start {
            background: linear-gradient(135deg, var(--section-start-gradient-start-dark) 0%, var(--section-start-gradient-end-dark) 100%);
        }


        .main-section:nth-child(even) {
            background-color: var(--section-even-bg);
        }

        .main-section:nth-child(odd) {
            background-color: var(--section-odd-bg);
        }

        .main-section h2 {
            color: var(--text-color);
            transition: color 0.3s ease;
        }

        .main-section p {
            color: var(--text-color);
            transition: color 0.3s ease;
        }

        /* Styles for the About Us section's paragraphs */
        #section-start .text-justify {
            text-align: justify;
        }

        /* Styling for the About Us image container to enable relative positioning for shadow */
        #section-start .md\:w-1\/2 {
            background-color: transparent;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 20px;
        }

        /* About Us Image Float Animation */
        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-5px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        /* Styling for the About Us image */
        .about-image-styling {
            transform: translate(var(--mouse-x, 0px), var(--mouse-y, 0px)) translateY(var(--scroll-y, 0px));
            transition: transform 0.2s ease-out;
            position: relative;
            z-index: 2;
        }

        /* Styling for the new shadow element */
        .about-image-shadow {
            transform: translate(var(--mouse-x, 0px), var(--mouse-y, 0px)) translateY(var(--scroll-y, 0px));
            transition: transform 0.2s ease-out;
            position: absolute;
            bottom: 0px;
            width: 70%;
            height: 20px;
            background-color: var(--about-image-shadow-color-light);
            border-radius: 50%;
            filter: blur(15px);
            z-index: 1;
        }

        body.dark-theme .about-image-shadow {
            background-color: var(--about-image-shadow-color-dark);
        }

        /* Service Card Styling */
        .service-card {
            /* Default radial gradient background */
            background-image: var(--service-card-default-gradient-light);
            background-color: transparent; /* Ensure solid color doesn't interfere */
            border-radius: 0.75rem;
            padding: 2rem; /* Initial padding */
            box-shadow: 0 4px 15px var(--service-card-shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-image 0.5s ease, background-color 0.5s ease, padding 0.3s ease; /* Add padding to transition */
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: center;
        }

        body.dark-theme .service-card {
            background-image: var(--service-card-default-gradient-dark);
        }

        .service-card:hover {
            transform: translateY(-5px) scale(1.1); /* Lift and enlarge by 10% */
            box-shadow: 0 8px 25px var(--service-card-hover-shadow);
            padding: 2.2rem 2rem; /* Increase padding by 10px (5px top, 5px bottom) */
            /* Change background to white/transparent on hover */
            background-image: none; /* Remove gradient */
            background-color: var(--service-card-hover-bg-light); /* Set solid color for light theme */
        }

        body.dark-theme .service-card:hover {
            background-image: none; /* Remove gradient */
            background-color: var(--service-card-hover-bg-dark); /* Set transparent for dark theme */
        }

        .service-card h3 {
            font-size: 1.75rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: var(--service-title-color); /* Adjusted for contrast */
            transition: color 0.3s ease;
        }

        .service-card p {
            font-size: 1.125rem;
            color: var(--service-text-color); /* Adjusted for contrast */
            margin-bottom: 1.5rem;
            flex-grow: 1;
            transition: color 0.3s ease;
        }

        /* Animation for general sections */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(80px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }

            .animate-on-scroll.is-visible {
                opacity: 1;
                transform: translateY(0);
            }

        /* Service Card Animation on Scroll (explicitly defined) */
        .service-card-animate {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }

            .service-card-animate.is-visible {
                opacity: 1;
                transform: translateY(0);
            }

        /* Override for closing-animation-area to prevent its direct animation */
        #closing-animation-area {
            min-height: 100vh;
            background-color: var(--closing-bg-color);
            transition: background-color 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            opacity: 1;
            transform: translateY(0);
        }

        #closing-circle-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100vw;
            height: 100vw;
            background: linear-gradient(135deg, var(--closing-circle-gradient-start) 0%, var(--closing-circle-gradient-end) 100%);
            box-shadow: 0 0 60px rgba(167, 217, 247, 0.7);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            clip-path: circle(0% at 50% 50%);
            opacity: 1;
            transition: background 0.3s ease;
        }

        @media (min-width: 768px) {
            #closing-circle-wrapper {
                width: 100vh;
                height: 100vh;
            }
        }

        #closing-text {
            font-size: clamp(2rem, 5vw, 4rem);
            font-style: italic;
            color: var(--text-color);
            font-weight: bold;
            padding: 1rem;
            line-height: 1.2;
            text-shadow: 1px 1px 2px var(--shadow-color);
            position: relative;
            z-index: 11;
            opacity: 1;
            transition: color 0.3s ease;
            margin: 0;
        }

        /* New Portfolio Slider Styles */
        #portfolio-slider-section {
            background-color: var(--section-even-bg); /* Use existing section background */
        }

        .slider-container {
            width: 100%;
            max-width: 1200px; /* Max width for the slider */
            overflow: hidden; /* Hide parts of cards outside the view */
            position: relative;
            padding: 20px 0; /* Add some vertical padding for shadow */
        }

        .cards-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out; /* Smooth transition for sliding */
            will-change: transform; /* Optimize for animation */
            justify-content: center; /* Center cards initially */
            align-items: center;
        }

        .portfolio-card {
            flex-shrink: 0; /* Prevent cards from shrinking */
            width: 20%; /* Each card takes 1/5th of the wrapper width for 5 cards */
            padding: 10px; /* Padding inside the wrapper for spacing */
            box-sizing: border-box;
            text-align: center;
            background-color: var(--portfolio-slider-card-bg); /* Themed solid background */
            border: 1px solid var(--portfolio-slider-card-border); /* Themed subtle border */
            border-radius: 15px; /* Rounded corners */
            transition: all 0.5s ease-in-out; /* Smooth transition for focus effects */
            box-shadow: 0 4px 8px var(--portfolio-slider-shadow); /* Themed subtle shadow */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0.5; /* Default opacity for non-focused cards */
            transform: scale(0.8); /* Default scale for non-focused cards */
            filter: blur(0); /* Removed blur effect */
            z-index: 1; /* Default z-index */
            margin: 0 -15px; /* Overlap cards slightly for the "behind" effect */
        }

            .portfolio-card.focused {
                opacity: 1;
                transform: scale(1.1); /* Larger for focused card */
                filter: blur(0); /* No blur for focused card */
                z-index: 10; /* Bring to front */
                box-shadow: 0 8px 16px var(--portfolio-slider-focused-shadow); /* More prominent shadow */
            }

            .portfolio-card.adjacent {
                opacity: 0.7;
                transform: scale(0.95); /* Slightly smaller than focused */
                filter: blur(0); /* Removed blur effect */
                z-index: 5; /* Behind focused */
            }

            .portfolio-card.end-visible {
                opacity: 0.3; /* More transparent for end cards */
                transform: scale(0.85); /* Slightly larger than hidden, but smaller than adjacent */
                filter: blur(0); /* Removed blur effect */
                z-index: 2; /* Further back */
            }

        /* New: Wrapper for portfolio image to apply background */
        .portfolio-image-wrapper {
            width: 100%;
            max-width: 150px; /* Max width for images */
            height: auto; /* Maintain aspect ratio */
            padding: 10px; /* Padding around the image */
            border-radius: 10px; /* Rounded corners for the wrapper */
            margin-bottom: 10px;
            display: flex; /* Use flex to center image inside wrapper */
            justify-content: center;
            align-items: center;
            background-color: var(--portfolio-image-bg-light); /* Transparent in light mode */
            transition: background-color 0.3s ease; /* Smooth transition for theme change */
        }

        body.dark-theme .portfolio-image-wrapper {
            background-color: var(--portfolio-image-bg-dark); /* Light gray in dark mode */
        }

        .portfolio-card img {
            width: 100%; /* Image fills its wrapper */
            height: auto;
            border-radius: 5px; /* Slightly less rounded than wrapper */
        }

        .portfolio-card h5 {
            color: var(--portfolio-slider-text-color-h5); /* Themed text color */
            margin-bottom: 5px;
        }

        .portfolio-card p {
            color: var(--portfolio-slider-text-color-p); /* Themed text color */
            font-size: 0.9em;
            line-height: 1.4;
        }

        .slider-navigation {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            z-index: 20; /* Ensure buttons are above cards */
            pointer-events: none; /* Allow clicks to pass through to buttons */
        }

            .slider-navigation button {
                /* Enhanced button styles */
                background: linear-gradient(145deg, #6a11cb, #2575fc); /* Gradient background (kept as is for distinct look) */
                color: white;
                border: none;
                /* Changed padding to be symmetrical for perfect circle */
                padding: 15px; /* Equal padding top/right/bottom/left */
                border-radius: 50%; /* Circular shape */
                cursor: pointer;
                font-size: 1.8em; /* Larger arrow icon */
                transition: all 0.3s ease; /* Smooth transition for hover effects */
                pointer-events: all; /* Re-enable clicks for buttons */
                margin: 0 15px; /* More spacing from the edges */
                box-shadow: 0 5px 15px var(--portfolio-slider-nav-shadow); /* Themed shadow */
                outline: none; /* Remove outline on focus */
                display: flex; /* Use flex to center the icon */
                justify-content: center;
                align-items: center;
                width: 50px; /* Explicit width and height for perfect circle */
                height: 50px;
            }

                .slider-navigation button:hover {
                    background: linear-gradient(145deg, #2575fc, #6a11cb); /* Inverted gradient on hover */
                    transform: translateY(-50%) scale(1.1); /* Slight lift effect, keep centered */
                    box-shadow: 0 8px 20px var(--portfolio-slider-nav-hover-shadow); /* Stronger themed shadow on hover */
                }

                .slider-navigation button:active {
                    transform: translateY(-50%) scale(0.9); /* Press effect, keep centered */
                    box-shadow: 0 2px 5px var(--portfolio-slider-shadow); /* Reduced themed shadow on click */
                }


        /* Responsive adjustments for the new slider */
        @media (max-width: 992px) {
            .portfolio-card {
                width: 33.33%; /* Show 3 cards on medium screens */
                margin: 0 -10px; /* Adjust overlap */
            }

                .portfolio-card.focused {
                    transform: scale(1.05);
                }

                .portfolio-card.adjacent {
                    opacity: 0.7;
                    transform: scale(0.9);
                    filter: blur(0); /* Removed blur effect */
                }

                .portfolio-card.end-visible {
                    opacity: 0.3; /* Less visible on smaller screens */
                    transform: scale(0.7);
                    filter: blur(0); /* Removed blur effect */
                }

            .slider-navigation button {
                padding: 10px; /* Adjusted padding */
                font-size: 1.5em; /* Adjusted font size */
                margin: 0 10px;
                width: 40px; /* Adjusted size for smaller screens */
                height: 40px;
            }
        }

        @media (max-width: 768px) {
            .portfolio-card {
                width: 50%; /* Show 2 cards on small screens */
                margin: 0 -5px; /* Adjust overlap */
            }

                .portfolio-card.focused {
                    transform: scale(1.0);
                }

                .portfolio-card.adjacent {
                    opacity: 0.7; /* Keep adjacent visible */
                    transform: scale(0.85);
                    filter: blur(0); /* Removed blur effect */
                }

                .portfolio-card.end-visible {
                    display: none; /* Hide end cards completely on very small screens */
                }

            .slider-navigation button {
                padding: 8px;
                font-size: 1.3em;
                margin: 0 8px;
                width: 35px;
                height: 35px;
            }
        }

        @media (max-width: 576px) {
            .portfolio-card {
                width: 80%; /* Show 1 card on extra small screens */
                margin: 0; /* No overlap */
            }

                .portfolio-card.focused {
                    transform: scale(1.0);
                }

                .portfolio-card.adjacent,
                .portfolio-card.end-visible {
                    display: none; /* Hide all other cards */
                }

            .slider-navigation button {
                padding: 6px;
                font-size: 1em;
                margin: 0 5px;
                width: 30px;
                height: 30px;
            }
        }

        /* Styles for the Recipe Section */
        .recipe-section {
            position: relative; /* Needed for pseudo-element positioning */
            overflow: hidden; /* Ensures background doesn't overflow */
            background-image: url('../images/360degree.png'); /* The background image */
            background-size: cover; /* Cover the entire section */
            background-position: center; /* Center the image */
            background-attachment: fixed; /* Parallax effect */
            text-align: center;
            box-sizing: border-box;
            color: var(--text-color); /* Use general text color for section */
            transition: color 0.3s ease; /* Smooth transition for text color */
        }

            /* Remove the ::before overlay pseudo-element */
            .recipe-section::before {
                content: none; /* This completely removes the overlay */
            }

        /* New container for heading and description */
        .recipe-content-container {
            padding: 3rem;
            border-radius: 0.75rem;
            box-shadow: 0 8px 30px var(--shadow-color);
            max-width: 900px; /* Match hero content max-width */
            margin: 0 auto 2rem auto; /* Center and add margin below */
            position: relative;
            z-index: 2; /* Ensure it's above the background */
            background-color: var(--recipe-content-bg-light);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--recipe-content-text-light);
            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
        }

        body.dark-theme .recipe-content-container {
            background-color: var(--recipe-content-bg-dark);
            color: var(--recipe-content-text-dark);
        }


        /* Ensure content is above the overlay */
        .recipe-section h2,
        .recipe-section .section-intro,
        .recipe-section .recipe-container {
            position: relative;
            z-index: 2;
        }

        .recipe-section .section-intro {
            font-size: 1.1em;
            margin-left: auto;
            margin-right: auto;
        }

        .recipe-container {
            position: relative;
            width: calc(100% - 40px);
            max-width: 700px;
            height: 500px; /* Set a fixed height for better control */
            margin: 20px auto; /* Slightly more margin than 0 to separate from text, but less than before */
            box-sizing: border-box;
        }

        @media (max-width: 768px) {
            .recipe-container {
                height: 400px; /* Adjust for smaller screens */
            }
        }

        @media (max-width: 480px) {
            .recipe-container {
                height: 300px; /* Further adjust for very small screens */
            }
        }

        /* New: Central Circle default animation */
        @keyframes pulse-zoom {
            0% {
                transform: translate(-50%, -50%) scale(1);
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
            }

            50% {
                transform: translate(-50%, -50%) scale(1.2); /* Pumping effect: zoom in to 1.2 times */
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* Stronger shadow at peak */
            }

            100% {
                transform: translate(-50%, -50%) scale(1);
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
            }
        }

        .central-circle {
            width: var(--recipe-central-circle-size-desktop);
            height: var(--recipe-central-circle-size-desktop);
            background-color: var(--recipe-primary-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 1.3em;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.3s ease, opacity 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Added transform and box-shadow to transition */
            z-index: 10;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1); /* Initial state for animation */
            opacity: 0;
            box-sizing: border-box;
        }

            /* Apply animation when not revealed */
            .central-circle:not(.revealed) {
                animation: pulse-zoom 2s ease-in-out infinite; /* Apply new pumping animation */
            }

            /* Hover effect: stop animation and apply subtle lift */
            .central-circle:hover {
                animation: none; /* Stop the default animation on hover */
                transform: translate(-50%, -50%) scale(1.03); /* Subtle lift on hover */
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); /* Enhanced shadow on hover */
            }

            .central-circle.revealed {
                transform: translate(-50%, -50%) scale(1); /* Stays at original size when revealed */
                animation: none; /* Ensure animation is off when revealed */
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Maintain consistent shadow */
            }

                /* Hover effect when already revealed - maintain revealed state, but no animation */
                .central-circle.revealed:hover {
                    transform: translate(-50%, -50%) scale(1.03); /* Lift and maintain scale */
                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); /* Enhanced shadow on hover */
                }


        .central-text {
            padding: 15px;
            transition: opacity 0.5s ease;
        }

            .central-text.revealed-text {
                opacity: 0;
                position: absolute;
            }

        .central-circle.revealed .central-text.initial-text {
            opacity: 0;
        }

        .central-circle.revealed .central-text.revealed-text {
            opacity: 1;
        }

        .peripheral-circles-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

            .peripheral-circles-wrapper.active {
                opacity: 1;
                pointer-events: auto;
            }

        .peripheral-circle {
            position: absolute;
            width: var(--recipe-peripheral-circle-size-desktop);
            height: var(--recipe-peripheral-circle-size-desktop);
            background-color: var(--recipe-circle-bg);
            border-radius: 50%;
            border: 2px solid var(--recipe-border-color);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: var(--recipe-peripheral-circle-padding);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.6s ease, border-color 0.3s ease, box-shadow 0.3s ease, left 0.6s ease, top 0.6s ease, opacity 0.6s ease;
            cursor: pointer;
            overflow: hidden;
            box-sizing: border-box;
            transform: translate(-50%, -50%) scale(0) rotate(0deg);
            opacity: 0;
        }

        .peripheral-circles-wrapper.active .peripheral-circle {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(720deg);
        }

        .peripheral-circle .point-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }

        .peripheral-circle h3 {
            color: var(--recipe-primary-color);
            font-size: 1em;
            margin: 0;
            word-wrap: break-word;
            overflow: hidden;
            display: block;
            width: 100%;
            padding: 0 5px;
            transition: color 0.3s ease;
            line-height: 1.2;
        }

        .peripheral-circle p.full-description {
            display: none;
        }

        /* Removed peripheral-circle:hover styles */
        /* peripheral-circle:hover h3 also removed as it was part of hover */

        @media (max-width: 768px) {
            .central-circle {
                width: var(--recipe-central-circle-size-mobile);
                height: var(--recipe-central-circle-size-mobile);
                font-size: 1em;
            }

            .peripheral-circle {
                width: var(--recipe-peripheral-circle-size-mobile);
                height: var(--recipe-peripheral-circle-size-mobile);
                font-size: 0.9em;
                padding: 10px;
            }

                .peripheral-circle h3 {
                    font-size: 0.9em;
                }
        }

        @media (max-width: 480px) {
            .central-circle {
                width: 100px;
                height: 100px;
                font-size: 0.9em;
            }

            .peripheral-circle {
                width: 70px;
                height: 70px;
                font-size: 0.7em;
                padding: 5px;
            }

                .peripheral-circle h3 {
                    font-size: 0.75em;
                }
        }

        /* --- Testimonial Slider Styles (from demo1.html) --- */
        .testimonial-slider-section {
            padding: 50px 0;
            width: 100%;
            background-color: var(--testimonial-bg); /* Themed background */
            transition: background-color 0.3s ease;
            min-height: 100vh; /* Set to 100vh as requested */
            display: flex; /* Ensure content is centered vertically */
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #testimonialSlider {
            padding-bottom: 60px; /* Space for indicators */
        }

        .testimonial-card {
            background: var(--testimonial-card-bg); /* Themed card background */
            border-radius: 20px;
            box-shadow: 0 10px 30px var(--testimonial-shadow); /* Themed shadow */
            padding: 40px;
            margin: 0 15px;
            text-align: center;
            transition: all 0.3s ease-in-out;
            border: none;
        }
        body.dark-theme .testimonial-card
        {
          background: var(--testimonial-card-bg); /* Themed card background */
        }
        .carousel-inner {
            padding: 20px 0;
        }

        .testimonial-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 20px auto;
            border: 5px solid var(--testimonial-img-border); /* Themed border */
            box-shadow: 0 5px 15px var(--testimonial-img-shadow); /* Themed shadow */
        }

        .testimonial-quote {
            font-size: 1.1rem;
            font-weight: 400;
            color: var(--testimonial-quote-color); /* Themed text color */
            margin-bottom: 25px;
            font-style: italic;
            position: relative;
            padding: 0 20px;
        }

            .testimonial-quote::before,
            .testimonial-quote::after {
                font-family: "Font Awesome 6 Free"; /* Ensure Font Awesome is loaded */
                font-weight: 900;
                font-size: 2rem;
                color: var(--testimonial-quote-icon-color); /* Themed icon color */
                position: absolute;
                opacity: 0.2;
            }

            .testimonial-quote::before {
                content: "\f10d"; /* Font Awesome quote-left */
                top: -10px;
                left: -5px;
            }

            .testimonial-quote::after {
                content: "\f10e"; /* Font Awesome quote-right */
                bottom: -10px;
                right: -5px;
            }

        .testimonial-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--testimonial-name-color); /* Themed text color */
        }
        body.dark-theme .testimonial-name{
            color: var(--text-color);
        }
        .testimonial-title {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--testimonial-title-color); /* Themed text color */
        }

        /* --- Carousel Controls & Indicators --- */
        .carousel-control-prev,
        .carousel-control-next {
            width: 50px;
            height: 50px;
            background-color: var(--testimonial-control-bg); /* Themed background */
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            box-shadow: 0 4px 10px var(--testimonial-control-shadow); /* Themed shadow */
            opacity: 1;
            transition: all 0.3s ease;
        }

        .carousel-control-prev {
            left: -25px;
        }

        .carousel-control-next {
            right: -25px;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: var(--testimonial-control-icon-bg); /* Themed icon background */
            border-radius: 50%;
            width: 30px;
            height: 30px;
            background-size: 50%;
        }

        .carousel-control-prev:hover,
        .carousel-control-next:hover {
            background-color: var(--testimonial-control-icon-bg); /* Themed hover background */
        }

            .carousel-control-prev:hover .carousel-control-prev-icon,
            .carousel-control-next:hover .carousel-control-next-icon {
                filter: brightness(0) invert(1);
            }

        .carousel-indicators [data-bs-target] {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--testimonial-indicator-bg); /* Themed indicator background */
            border: none;
            margin: 0 8px;
            transition: background-color 0.3s ease;
        }

        .carousel-indicators .active {
            background-color: var(--testimonial-indicator-active-bg); /* Themed active indicator background */
        }

        /* --- Animation --- */
        .carousel-item {
            transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
        }

            .carousel-item .testimonial-card {
                transform: translateY(20px) scale(0.95);
                opacity: 0;
                animation: fadeInUp 0.7s forwards;
            }

        @keyframes fadeInUp {
            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .testimonial-card {
                padding: 30px;
            }

            .carousel-control-prev {
                left: 5px;
            }

            .carousel-control-next {
                right: 5px;
            }
        }
        

             /*Welcome offer page*/
        
    /* Custom styles for the flip effect - UPDATED HEIGHT AND ADDED RESPONSIVENESS FOR INNER CONTENT */
    
            /* Form input styling within the hero content */
        .welcome-offer-us-hero-section .form-control,
        .welcome-offer-us-hero-section .form-select {
            background-color: transparent; /* Make background transparent */
            border: none; /* Remove individual borders */
            color: var(--text-color); /* Use general text color */
            transition: background-color 0.3s ease, color 0.3s ease;
            box-shadow: none; /* Remove default bootstrap shadow */
        }

        body.dark-theme .welcome-offer-us-hero-section .form-select:focus{
                color: var(--text-color); 
        }
            .welcome-offer-us-hero-section .form-control:focus,
            .welcome-offer-us-hero-section .form-select:focus {
                background-color: transparent; /* Keep transparent on focus */
                border-color: transparent; /* Keep transparent on focus */
                box-shadow: none; /* Remove default bootstrap focus shadow */
                outline: none; /* Remove outline */
            }
        body.dark-theme .welcome-offer-us-hero-section .form-control,
        body.dark-theme .welcome-offer-us-hero-section .form-select {
            color: var(--text-color); /* Ensure typed text is light in dark theme */
        }
            .welcome-offer-us-hero-section .form-control::placeholder {
                color: var(--text-color); /* Placeholder color */
                opacity: 0.7;
            }
            body.dark-theme .welcome-offer-us-hero-section .form-control::placeholder {
                color: var(--placeholder-color-dark); /* Use your new dark theme placeholder variable */
                opacity: 0.8;
            }
    
    
        .flip-card-container {
            perspective: 1000px; /* Gives the 3D effect */
            height: 20vh; /* Adjusted to 33% of viewport height for responsiveness */
            margin-bottom: 0.5rem; /* Add some margin between cards */
        }

        .flip-card {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s; /* Smooth transition for flipping */
            transform-style: preserve-3d; /* Ensures children are positioned in 3D space */
        }

        .flip-card.rotated {
            transform: rotateY(180deg); /* Rotates the card on its Y-axis */
        }

        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden; /* Hides the back of the element when facing away */
            backface-visibility: hidden; /* Hides the back of the element when facing away */
            border-radius: 0.75rem; /* rounded-xl */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1.5rem; /* p-6 */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            font-family: 'Inter', sans-serif; /* Apply Inter font */
        }

        .flip-card-front {
            background-color: var(--card-bg); /* bg-white */
            color: #1a202c; /* text-gray-900 */
        }
        
        .flip-card-front:hover{
            background: #FFFFFF;
            background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(42, 46, 155, 1) 50%, rgba(237, 83, 229, 1) 100%);
        }
        body.dark-theme .flip-card-front {
            background-color: var(--card-bg); /* bg-white */
            color: var(--text-color); /* text-gray-900 */
        }
        body.dark-theme .flip-card-front:hover {
            color: black; /* text-gray-900 */
        }
        .flip-card-back {
            background-color: #4a90e2; /* bg-blue-500 */
            color: #ffffff; /* text-white */
            transform: rotateY(180deg); /* Initially rotated to be hidden */
        }

        /* Ensure images are responsive within the card */
        .flip-card-front img {
            max-width: 100%;
            height: auto;
        }

        /* Responsive adjustments for flip card inner content */
        @media (max-width: 768px) {
            .flip-card-front, .flip-card-back {
                padding: 1rem; /* Reduce padding on medium screens */
            }

            .flip-card-front h2, .flip-card-back h2 {
                font-size: 1.4rem; /* Slightly reduce heading size */
            }

            .flip-card-front p, .flip-card-back p {
                font-size: 0.9rem; /* Reduce paragraph size */
            }

            .flip-card-front img {
                max-width: 80px; /* Smaller image on medium screens */
            }
        }

        @media (max-width: 576px) {
            .flip-card-container {
                height: 40vh; /* Increase height slightly for single column layout on small screens */
            }

            .flip-card-front, .flip-card-back {
                padding: 0.75rem; /* Further reduce padding on small screens */
            }

            .flip-card-front h2, .flip-card-back h2 {
                font-size: 1.1rem; /* Further reduce heading size */
                margin-bottom: 0.5rem; /* Reduce margin below heading */
            }

            .flip-card-front p, .flip-card-back p {
                font-size: 0.75rem; /* Further reduce paragraph size */
                line-height: 1.2; /* Tighten line height */
                margin-bottom: 0.75rem; /* Reduce margin below paragraph */
            }

            .flip-card-front img {
                max-width: 50px; /* Even smaller image on small screens */
                margin-top: 0.5rem; /* Adjust margin above image */
            }

            .flip-card-back button {
                padding: 0.4rem 0.8rem; /* Adjust button padding */
                font-size: 0.7rem; /* Adjust button font size */
            }
        }

        /* Very small screens (e.g., iPhone 5/SE) */
        @media (max-width: 375px) {
            .flip-card-container {
                height: 20vh; /* Potentially increase height a bit more for very small screens if content is still cramped */
            }

            .flip-card-front, .flip-card-back {
                padding: 0.5rem; /* Even smaller padding */
            }

            .flip-card-front h2, .flip-card-back h2 {
                font-size: 1rem; /* Smallest heading size */
            }

            .flip-card-front p, .flip-card-back p {
                font-size: 0.65rem; /* Smallest paragraph size */
            }

            .flip-card-front img {
                max-width: 40px; /* Smallest image size */
            }

            .flip-card-back button {
                padding: 0.3rem 0.6rem; /* Smallest button padding */
                font-size: 0.6rem; /* Smallest button font size */
            }
        }








        /* --- Footer Styles --- */
        .footer-main {
            background-image: var(--service-card-default-gradient-light); /* Use service card gradient */
            color: var(--footer-text-color-light);
            padding: 4rem 1rem;
            transition: background-image 0.3s ease, color 0.3s ease;
        }

        body.dark-theme .footer-main {
            background-image: var(--service-card-default-gradient-dark); /* Use service card gradient for dark theme */
            color: var(--footer-text-color-dark);
        }

        .footer-main .container {
            max-width: 1200px;
        }

        .footer-column-2 {
            /* Removed borders and shadows */
            padding: 0 1.5rem; /* Add padding to prevent content from touching borders */
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        body.dark-theme .footer-column-2 {
            /* Removed borders and shadows */
        }

        .footer-main h4 {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
            color: inherit; /* Inherit from parent */
        }

        .footer-main ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .footer-main ul li {
                margin-bottom: 0.75rem;
            }

                .footer-main ul li a {
                    color: var(--footer-link-color-light);
                    text-decoration: none;
                    transition: color 0.2s ease;
                }

        body.dark-theme .footer-main ul li a {
            color: var(--footer-link-color-dark);
        }

        .footer-main ul li a:hover {
            color: var(--footer-link-hover-color-light);
            text-decoration: underline;
        }

        body.dark-theme .footer-main ul li a:hover {
            color: var(--footer-link-hover-color-dark);
        }

        .social-icons a {
            color: var(--footer-text-color-light);
            font-size: 1.8rem;
            margin: 0 0.8rem;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        body.dark-theme .social-icons a {
            color: var(--footer-text-color-dark);
        }

        .social-icons a:hover {
            color: var(--brand-color); /* Use brand color for hover */
            transform: scale(1.2);
        }

        .newsletter-form .form-control {
            background-color: transparent;
            border: 1px solid var(--footer-border-color-light);
            color: var(--footer-text-color-light);
            border-radius: 0.375rem;
            padding: 0.75rem 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        body.dark-theme .newsletter-form .form-control {
            border-color: var(--footer-border-color-dark);
            color: var(--footer-text-color-dark); /* Ensure text color is white in dark mode */
        }

            body.dark-theme .newsletter-form .form-control::placeholder {
                color: #FFFFFF; /* Explicitly set placeholder to white for dark theme */
                opacity: 0.8; /* Maintain some opacity for distinction */
            }


        .newsletter-form .btn-primary {
            width: 100%;
            margin-top: 1rem;
        }

        .footer-copyright {
            background-color: var(--footer-copyright-bg-light);
            color: var(--footer-copyright-text-light);
            padding: 1.5rem 1rem;
            text-align: center;
            font-size: 0.9rem;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        body.dark-theme .footer-copyright {
            background-color: var(--footer-copyright-bg-dark);
            color: var(--footer-copyright-text-dark);
        }

        @media (max-width: 768px) {
            .footer-column-2 {
                border-left: none;
                border-right: none;
                box-shadow: none;
                padding: 1.5rem 0;
                margin-top: 2rem;
                margin-bottom: 2rem;
                border-top: none; /* Removed top border for mobile */
                border-bottom: none; /* Removed bottom border for mobile */
            }

            body.dark-theme .footer-column-2 {
                border-color: var(--footer-border-color-dark);
            }
        }scroll-progress-indicator