/* === NEW THEME COLORS === */
		:root {
    --bs-primary: #480001; /* Deep Maroon */
    --bs-secondary: #e21f27; /* Bright Red */
    --bs-body-color: #000000; /* Dark Gray for main text */
    --bs-light-bg: #fcfcfc; /* Very Light Background for sections */
		--nav-primary-color: #A10F22;
			}
        body {
            font-family: 'Poppins', sans-serif;
            color: var(--jd-text);
            background-color: #fff; /* Clean white background */
        }

        /* 1. Global & Utility Overrides */
        .btn-primary {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            font-weight: bold;
            transition: background-color 0.2s;
        }

        .btn-primary:hover {
            background-color: #e21f27; /* Slightly darker hover */
            border-color: #e21f27;
        }

        .btn-outline-primary {
            color: var(--bs-primary);
            border-color: var(--bs-primary);
            font-weight: bold;
        }
		
		.btn-outline-primary:hover {
            background-color: #e21f27; /* Slightly darker hover */
            border-color: #e21f27;
        }
        
        .section-title {
            text-align: center;
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--jd-primary); /* Highlight section titles with primary color */
            margin-bottom: 25px !important;

        }

        /* 2. Navigation Bar */
        .navbar-brand .navbar-logo img {
            height: 40px;
        }
        
        .navbar-nav .nav-link {
            color: var(--jd-text) !important;
            font-weight: 500;
        }

        .navbar-nav .nav-link.active {
            color: var(--bs-primary) !important;
            /*border-bottom: 2px solid var(--bs-primary);*/
        }
		
		.navbar-toggler {
    padding: 4px 8px;
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-primary);
    background-color: transparent;
        border-color: var(--bs-primary);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

	.navbar-toggler:focus{
			box-shadow: none;
		border-width: thin;
		}
		

        /* 3. Hero Section (Search Focus) */
        .hero-section {
            padding: 0px 0;
            background: #fcfcfc; 
            border-bottom: 1px solid #eee;
        }

        .hero-title {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--jd-text);
        }

        .job-search-form {
            padding: 20px;
            background: #fff;
           
        }

        .form-control-lg, .form-select-lg, .btn-lg {
            height: 58px; /* Tall fields for prominence */
            border-radius: 6px;
        }


        /* 4. Category Cards */
        .category-card {
            text-align: center;
            padding: 0px 10px;
            transition: all 0.2s ease-in-out;
            background: #fff;
            margin-bottom: 10px;
        }

        .category-card:hover {
            
            transform: translateY(-2px);
            
        }

        .icon-wrapper-flat {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 14px;
    		height: 74px;
    		width: 74px;
            margin-bottom: 10px;
            background-color: #f5f5f5; /* Primary color background for icons */
            border-radius: 14px;
            padding: 10px;
			border: .5px solid #ccc;
        }
        
        .icon-wrapper-flat img {
            
        }

        .category-card h5 {
            color: var(--jd-text);
            font-size: 14px;
            font-weight: 400;
        }

        /* 5. Job Post Cards (Listings) */
        .job-post-card {
            border: 1px solid #e9ecef;
            border-left: 5px solid var(--jd-primary); /* Striking left border */
            border-radius: 8px;
            transition: all 0.2s ease-in-out;
            cursor: pointer;
            background: #fff;
        }

        .job-post-card:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            border-color: var(--jd-accent); /* Change border color on hover */
        }
        
        .job-company-logo {
            width: 50px;
            height: 50px;
            border-radius: 4px;
            overflow: hidden;
            flex-shrink: 0;
            border: 1px solid #eee;
        }

        .card-title a {
            font-weight: 600;
            color: var(--jd-text);
        }

        /* Prominent Salary and Job Details */
        .job-post-card .text-primary.fw-bold {
            font-size: 1.3rem;
            color: var(--jd-primary) !important;
        }

        .job-post-card .badge.text-bg-primary {
            background-color: var(--jd-accent) !important;
        }

.rounded-pill{
	font-weight: normal;
}
        /* 6. Company Logos & Testimonials */
        .company-logo-card {
            padding: 10px;
            text-align: center;
            border: 1px solid #eee;
            border-radius: 4px;
            height: 70px; /* fixed height for alignment */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .company-logo-card img {
            max-width: 80%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .carousel-control-prev-icon, .carousel-control-next-icon {
            filter: invert(100%); /* Make controls more visible */
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        }

        .testimonial-img {
            width: 80px;
            height: 80px;
            border-radius: 14px;
            object-fit: cover;
            border: 4px solid var(--jd-primary);
        }

      /* 7. Action Tile Style (New Compact Style) */
        .action-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
			width: 120px;
            background-color: #fff !important; /* White background */
            border: 1px solid #ccc; /* Lighter border for subtlety */
            border-radius: 14px;
            text-decoration: none;
            color: var(--jd-text);
            transition: all 0.2s ease-in-out;
            min-height: 120px; /* Ensure vertical alignment */
            text-align: center;
			margin: 0 auto;
        }

        .action-tile:hover {
            border-color: var(--jd-primary); /* Primary color highlight on hover */
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transform: translateY(-2px);
			text-align: center;
        }

        .action-tile .action-icon {
            color: var(--jd-primary); /* Primary color for the icon */
            font-size: 2.5rem;
            margin-bottom: 8px;
        }
        
        .action-tile .action-name {
            font-weight: 700;
            font-size: 1rem;
            line-height: 1.2;
        }

        .action-tile .action-desc {
            font-size: 0.8rem;
            color: #666;
        }
		
		.section_border{
			
		}
		
		/* --- Common Styles for Smoothness and Flat Look --- */
/* --- 1. Solid Button: POST JOB --- */

.btn-brand-solid {
  /* Default State */
  background-color: #480001; /* Primary Brand Color */
  color: white;
  border: none;
  box-shadow: none;
  /* Standard Bootstrap rounded corners */
  /*border-radius: 0.25rem; */
  /* Smooth transition for hover effect */
  transition: background-color 0.2s ease-in-out;
}

.btn-brand-solid:hover,
.btn-brand-solid:focus {
  /* Hover State: Darker background color */
  background-color: #e21f27; /* Darker Brand Color */
  color: white;
  box-shadow: none;
  border: none;
}

/* --- 2. Outline Button: SIGN IN / SEARCH JOB --- */

.btn-brand-outline {
  /* Default State: Text and border match primary color */
  background-color: transparent;
  color: #480001; /* Primary Brand Color for text */
  border: 1px solid #480001; /* Border is necessary for 'outline' look */
  box-shadow: none;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}

.btn-brand-outline:hover,
.btn-brand-outline:focus {
  /* Hover State: Fills with solid color (common pattern) */
  background-color: #e21f27; 
  color: white; /* Text turns white for contrast */
  box-shadow: none;
  /* The border color should also match the background color when filled */
  border-color: #e21f27; 
}
		
		/* Style for the Previous/Next buttons on the header line */
/* Hide content that scrolls out of view */
        .job-card-wrapper {
            overflow: hidden; 
            padding-bottom: 1rem; /* Space for the bottom of cards */
        }

        
        #jobCardRow {
            flex-wrap: nowrap !important;
            /* Add smooth transition for the sliding effect */
            transition: transform 0.3s ease-in-out; 
            /* Remove Bootstrap's default margin-bottom from g-4, which is unnecessary here */
            margin-bottom: 0 !important; 
        }

        /* Ensure the column takes up 25% for 4-card layout on large screens */
        .job-card {
             /* col-lg-3 should handle this width for 4 visible items */
        }
        
        /* Job Card Styling (Added for visual completeness) */
        .job-card-v3 {
            border-radius: 18px;
        }

        .card-image-container img {
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }
.border-wrap{
			padding: 30px;
			border: 1px solid #ccc;
	flex-direction: column;
    -webkit-box-flex: 1;
	-moz-border-radius: 10px;
    border-radius: 14px;
		}
		
	.custom-control-ad {
    /* Remove default Bootstrap background icon */
    background: white !important; 
    opacity: 1; /* Ensure buttons are always visible */
    width: 30px; /* Define button size */
    height: 30px;
    
    /* Center the SVG icon */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Use white background for the button itself */
    background-color: white; 
    border: 0px solid #0d6efd; /* Use primary color border */
    /* Make it circular */
    
    /* Adjust position to be centered vertically and slightly inside the container */
    top: 50%;
    transform: translateY(-50%);
}

.custom-control-ad svg {
    /* Ensure the icon is the primary color */
    fill: #480001 !important; 
    width: 16px; 
    height: 16px;
}

/* Optional: Add hover effect */
.custom-control-ad:hover {
    background-color: #0d6efd; /* Primary color background on hover */
}
.custom-control-ad:hover svg {
    fill: #480001 !important; /* White icon on hover */
}
		/* Custom styling for the Ad Carousel Controls */
.ad-control-rounded {
    /* Override Bootstrap defaults */
    background: none !important;
    opacity: 1; 
    width: 40px; 
    height: 40px;
    padding: 0;

    /* Styling the button shape and shadow */
    background-color: white; 
    border: none;
    border-radius: 8px; /* Rounded rectangle corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */

    /* Center the SVG icon */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Vertically center the button */
    top: 50%;
    transform: translateY(-50%);
}

/* Specific positioning for prev button */
.ad-control-rounded.carousel-control-prev {
    /* Push slightly inward from the edge */
    left: 15px; 
	
}

/* Specific positioning for next button */
.ad-control-rounded.carousel-control-next {
    /* Push slightly inward from the edge */
	right: 15px;}
	

/* Styling the Chevron Icon */
.ad-control-rounded svg {
    fill: #480001 !important; /* Dark color for the arrow */
    width: 18px; 
    height: 18px;
}

/* Hover effect */
.ad-control-rounded:hover {
    background-color: #f8f9fa; /* Slight change on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
	color: #480001;
}
		
		/* --- featured Section Scrolling Cards CSS --- */
		
 

 /*blog*/
	/* CRITICAL: Ensures the carousel row behaves like a single, wide strip */
.card-row {
    flex-wrap: nowrap !important; /* Prevents cards from dropping to the next line */
    transition: transform 0.3s ease-in-out; 
    margin-bottom: 0 !important; 
}

/* CRITICAL: Hides the off-screen cards */
.card-wrapper {
    overflow: hidden; 
    padding-bottom: 1rem; 
}

/* CRITICAL: Defines the card width for 4-column display on large screens */
/* For large devices: 4 cards visible (25%) */
@media (min-width: 992px) { 
    .col-lg-3-custom {
        flex: 0 0 auto;
        width: 25%; /* Each card takes 25% of the row width */
    }
}
/* For medium devices: 3 cards visible (33.33%) */
@media (min-width: 768px) and (max-width: 991px) {
    .col-md-4-custom {
        flex: 0 0 auto;
        width: 33.333333%; 
    }
}
/* For small devices: 2 cards visible (50%) */
@media (min-width: 576px) and (max-width: 767px) {
    .col-sm-6-custom {
        flex: 0 0 auto;
        width: 50%; 
    }
}
/* For extra-small devices: 1 card visible (100%) */
@media (max-width: 575px) {
    .col-xs-12-custom {
        flex: 0 0 auto;
        width: 100%; 
    }
}
		/*Video*/
		.testimonial-card-v3 {
        border-radius: 14px;
        text-align: center;
    }
    
    .testimonial-card-v3 .video-thumbnail {
        position: relative;
        overflow: hidden;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }

    .testimonial-card-v3 .video-thumbnail img {
        height: 200px; /* Fixed height for visual consistency */
        object-fit: cover;
        width: 100%;
        transition: transform 0.3s ease-in-out;
    }

    .testimonial-card-v3 .video-thumbnail:hover img {
        transform: scale(1.05);
    }
    
    .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        padding: 1rem;
        transition: background-color 0.3s;
        cursor: pointer;
    }
    
    .play-button:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .play-button svg {
        fill: white;
        width: 30px;
        height: 30px;
    }

		/*padding*/
		.pad_10{
			padding: 10px 10px 0 10px;
			
		}
		
		.pad_10 img{
			border-radius: 14px;
		}
		
		.blog-card-v3{
			border-radius: 18px;
		}
		
		.site-footer {
    /* Use a light border to separate the white footer from the white body background */
    border-top: 1px solid #e0e0e0; 
}

/* Style for quick links in the horizontal navigation */
.footer-nav a {
    transition: color 0.2s ease-in-out;
}

.footer-nav a:hover {
    color: #e21f27!important; /* Change this to your primary theme color */
}

/* Style for social media icons */
.social-icons a {
    transition: color 0.2s ease-in-out;
    /* Use a custom size if default SVG size is too small */
    display: inline-block;
}

.social-icons a:hover {
    color: #e21f27!important; /* Change this to your primary theme color */
}
		
		/* Make sure the text color is not white on white */
.social-icons a {
    color: #e21f27 !important; /* Forces a darker color (Bootstrap gray) */
    transition: color 0.2s ease-in-out;
    display: inline-block;
}

.social-icons a:hover {
    color: #e21f27 !important; /* Change this to your primary theme color */
}

/* Ensure the SVG itself respects the parent color */
.social-icons svg {
    fill: currentColor; 
    /* If the icon size is the problem, uncomment the lines below */
    width: 24px; */
    height: 24px; */
}
		
		/*responsive*/
		/* --- Custom Variables and General Styles --- */
        
        /* --- 1. Action Tiles (Left Sidebar Links) Style --- */
        .action-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border-radius: 14px; /* Slightly smaller radius */
            text-decoration: none;
            transition: all 0.2s;
            background-color: #fff; 
            border: 1px solid #e9ecef;
            padding: 0.5rem; /* Reduced padding */
        }
        
        .action-tile i {
            font-size: 1.5rem !important; /* Reduced icon size */
            margin-bottom: 0.2rem;
			color: #480001!important;
        }
        
        .action-tile span {
            font-size: 1rem; /* Smaller text */
            line-height: 1;
        }

		@media (max-width: 576px)  {
   		.action-tile span {
    	font-size: 13px;
    	line-height: 1;
    	}
		}

		
		
        .action-tile.highlighted {
            border-color: var(--bs-secondary) !important;
        }
        .action-tile.highlighted i, .action-tile.highlighted span {
             color: var(--bs-secondary) !important;
        }

        /* --- 2. Category Card (Right Grid Tiles) Style --- */
        .category-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0.5rem 0.25rem; /* Reduced padding */
            border-radius: 0.25rem; 
            height: 100%;
            transition: all 0.2s;
            background-color: #fff;
            
        }
        
        .category-card:hover {
            
        }
        
        .category-card h5 {
            font-size: 1rem; /* Smaller text */
            white-space: nowrap; 
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 0.2rem !important;
        }
		
		@media (max-width: 576px) {
   		.category-card h5 {
    	font-size: 13px;
    	}
		}
        
        .icon-wrapper-flat img {
            width: 60px; /* Reduced image size */
            height: 60px;
        }
        
        /* --- Mobile/Small Screen (SM) Optimization for Two-Column Layout --- */
        @media (max-width: 991.98px) {
            
            /* Make the main row (g-5) and its containers use tight spacing (g-3) on mobile */
            .job-categories-section .row {
                --bs-gutter-x: 1rem; /* Smaller gap between columns */
                --bs-gutter-y: 1.5rem;
            }

            /* 1. Left Column (Action Buttons) - Force Narrow Width */
            .col-mobile-narrow {
                flex: 0 0 auto; /* Do not grow, do not shrink automatically */
                width: 30%;     /* Force it to take up about 30% of the screen */
                padding: 0;
            }

            /* 2. Right Column (Categories) - Take Remaining Width */
            .col-mobile-wide {
                flex: 0 0 auto;
                width: 70%;     /* Force it to take up about 70% of the screen */
                padding-right: 0;
            }
            
            /* Categories Grid (inside the right column) */
            .category-grid-container .row {
                --bs-gutter-x: 0.5rem; /* Very small gap between categories */
                --bs-gutter-y: 0.5rem;
            }
            
            .category-grid-container .section-title {
                font-size: 1rem; /* Smaller title on mobile */
                margin-bottom: 0.75rem !important;
            }
            
            /* Categories: Show 3 columns on mobile (col-4) instead of 6 (col-2) to avoid excessive shrinking */
            .category-grid-container .col-mobile-cat {
                width: 33.3333%; /* 3 columns per row (3 * 33.33% = 100%) */
            }
        }
        
        /* Desktop (LG) Layout for reference */
        @media (min-width: 992px) {
            .col-mobile-narrow {
                width: 16.6666%; /* Equivalent to col-lg-2 */
            }
            .col-mobile-wide {
                width: 83.3333%; /* Equivalent to col-lg-10 */
            }
        }
		
		
		/* --- 1. Navigation Bar Button Styles (Kept for completeness) --- */
        .btn-nav-outline { 
            border: 1px solid var(--nav-primary-color) !important;
            color: var(--nav-primary-color) !important;
            background-color: transparent !important;
        }
        .btn-nav-solid {
            background-color: var(--nav-primary-color) !important;
            color: white !important;
            border: 1px solid var(--nav-primary-color) !important;
        }

        /* --- 2. Search Area Specific Styling --- */
        .search-section {
            padding: 1rem 0; /* Significantly reduced vertical padding */
            background-color: var(--search-bg);
            /* Optional: Add a subtle bottom border to separate it from categories */
            border-bottom: 1px solid #e9ecef;
        }

        .search-container {
            /* Centers the 50% width container horizontally on desktop */
            margin: 0 auto; 
            width: 100%; /* Default 100% width for mobile */
        }

        /* --- Desktop (LG and up) Specific Rules --- */
        @media (min-width: 992px) {
            .search-container {
                /* Sets the width to 50% on desktop screens */
                width: 50%;
            }
        }

        /* --- 3. Input and Button Sizing --- */
        .form-control, .btn, .dropdown-toggle {
            height: 40px; /* Consistent, slightly compact height for form elements */
        }

        /* Adjusting the search button color to match the Post Job button's red/maroon accent */
        .btn-search {
            background-color: var(--nav-primary-color);
            border-color: var(--nav-primary-color);
            color: white;
        }
        .btn-search:hover {
            background-color: #8c0d1e;
            border-color: #8c0d1e;
            color: white;
        }

        /* --- 4. Popular Categories Section Adjustments (Reduced Padding) --- */
        .job-categories-section {
            padding-top: 2rem !important;
            padding-bottom: 2rem !important;
            /* No change to internal category card spacing, using the compact style from previous requests */
        }
		
		<!--animation-->
		/* --- 1. Navigation Bar Button Styles --- */
        .navbar {
            transition: all 0.3s;
            z-index: 1040; /* Lower z-index than the search bar overlay */
            top: 0;
        }
        .btn-nav-outline { 
            border: 1px solid var(--nav-primary-color) !important;
            color: var(--nav-primary-color) !important;
            background-color: transparent !important;
        }
        .btn-nav-solid {
            background-color: var(--nav-primary-color) !important;
            color: white !important;
            border: 1px solid var(--nav-primary-color) !important;
        }

        /* --- 2. Search Area Specific Styling --- */
        .search-section {
            padding: 1rem 0;
            background-color: var(--search-bg);
            border-bottom: 1px solid #e9ecef;
            z-index: 1050; /* Higher z-index to overlay the main nav bar */
        }

        .search-container {
            margin: 0 auto; 
            width: 100%; 
        }

        /* --- 3. Stickiness and Overlay Effect (Desktop) --- */
        @media (min-width: 992px) {
            .search-container {
                width: 50%; /* 50% width on desktop */
            }

            /* Search bar starts in its normal position */
            #sticky-search {
                transition: transform 0.3s ease-out, background-color 0.3s, box-shadow 0.3s;
            }

            /* Class added by JS when user scrolls down (Desktop) */
            .search-overlay {
                position: fixed;
                top: 0; 
                width: 100%;
                background-color: transparent; 
                transform: translateY(0);
				border-bottom: 0;
            }
        }
        
        /* --- 4. Stickiness (Mobile: simple sticky required) --- */
        @media (max-width: 991.98px) {
            /* Simple sticky behavior for mobile version */
            #sticky-search {
                position: sticky;
                top: 60px;
                z-index: 1050;
                background-color: #ffffff; /* Keep original background */
            }
        }

        /* --- Input and Button Sizing --- */
        .form-control, .btn, .dropdown-toggle {
            height: 38px; 
        }
        .btn-search {
            background-color: var(--nav-primary-color);
            border-color: var(--nav-primary-color);
            color: white;
        }
		
		.dropdown-toggle{
    background-color: #ffffff!important;
			z-index: 10000!important;
			color: #6c757d!important;
}
		
		.all-round{
			border-radius: 14px;
		}
		
		/* --- Language Scrolling Bar --- */
/* --- Auto-Play Ticker Styles --- */
.ticker-wrap {
    width: 100%;
    overflow: hidden; /* Hide the overflow */
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
    padding: 12px 0;
    white-space: nowrap;
    position: relative;
}

.ticker-content {
    display: inline-flex;
    gap: 15px;
    /* Adjust '30s' to make it faster or slower */
    animation: marquee 30s linear infinite;
}

/* Pause animation when user moves mouse over it */
.ticker-wrap:hover .ticker-content {
    animation-play-state: paused;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Moves halfway through the doubled list */
}

.lang-item-ticker {
    flex: 0 0 auto;
    padding: 6px 22px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    color: #480001;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.lang-item-ticker:hover {
    background-color: #480001;
    color: #fff !important;
}
		
		/* --- Logo Ticker Section --- */
.logo-ticker-section {
    padding: 40px 0;
    background-color: #fff;
    border-top: 1px solid #eee;
    overflow: hidden;
}

/* Container that hides the logos that go off-screen */
.logo-ticker-wrap {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    position: relative;
    padding: 15px 0;
}

.logo-ticker-content {
    display: inline-flex;
    align-items: center;
}

.logo-item {
    padding: 0 50px; /* Space between logos */
    flex-shrink: 0;
}

.logo-item img {
    height: 45px;
    width: auto;
}

/* The loop logic: moves 50% because we doubled the content in JS */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Stop on hover */
.logo-ticker-wrap:hover .logo-ticker-content {
    animation-play-state: paused !important;
}
	.read{
    height: 30px;
}

.read-2{
    height: 60px;
}

/* --- Job Listing Page Styles --- */
.jobs-container {
    padding: 40px 0;
    background-color: #fcfcfc;
}

/* Sidebar Filters */
.filter-sidebar {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 20px;
    position: sticky;
    top: 120px; /* Adjust based on your sticky header height */
}

.filter-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #480001;
    margin-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 10px;
}

.filter-group {
    margin-bottom: 20px;
}

.form-check-input:checked {
    background-color: #480001;
    border-color: #480001;
}

/* Job Card Styling */
.job-list-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    display: flex;
    gap: 20px;
}

.job-list-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: #480001;
    transform: translateY(-3px);
}

.company-logo-square {
    width: 65px;
    height: 65px;
    background: #f8f9fa;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.job-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #333;
}

.job-meta {
    font-size: 0.9rem;
    color: #666;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.job-meta i {
    color: #e21f27; /* Red accent for icons */
}

.job-tags .badge {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
}

.badge-fulltime { background: #e8f5e9; color: #2e7d32; }
.badge-remote { background: #e3f2fd; color: #1565c0; }
.badge-urgent { background: #fff3e0; color: #ef6c00; }

@media (max-width: 768px) {
    .job-list-card { flex-direction: column; }
    .company-logo-square { width: 50px; height: 50px; }
}


/* --- Vertical Job Grid Card --- */
/* --- Job Card V3 Customizations --- */
/* Ensure buttons are exactly the same height and aligned */
.btn-xs {
    padding: 6px 2px !important;
    font-size: 14px !important;
    
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
}

/* Fix title height so cards stay uniform even with different title lengths */
.job-title {
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Badge size adjustment for narrow cards */
.extra-small {
    font-size: 9px !important;
    padding: 4px 8px !important;
}

/* Force the 4-column layout logic */
@media (min-width: 1200px) {
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%; /* Exactly 4 cards */
    }
}
/* Custom Pagination Styling */
.custom-pagination .page-link {
    color: #480001; /* Your brand maroon */
    border-color: #dee2e6;
    padding: 8px 16px;
    
}

.custom-pagination .page-item.active .page-link {
    background-color: #480001 !important;
    border-color: #480001 !important;
    color: #fff !important;
}

.custom-pagination .page-link:hover {
    background-color: #f8f9fa;
    color: #480001;
}

.custom-pagination .page-item.disabled .page-link {
    color: #6c757d;
}

/*...........*/
/* Brand Maroon Color */
.text-maroon {
    color: #000000 !important;
}

/* Button text color */
.sort-dropdown-btn {
    color: #480001 !important;
}

/* Dropdown Item Styling */
.dropdown-item {
    color: #480001; /* Default text color */
    transition: all 0.2s ease;
}

/* HOVER STATE: White background changes to Maroon */
.dropdown-item:hover {
    background-color: #480001 !important;
    color: #ffffff !important;
}

/* ACTIVE/SELECTED STATE: Also Maroon */
.dropdown-item.active, 
.dropdown-item:active {
    background-color: #480001 !important;
    color: #ffffff !important;
}

/* Small adjustments to dropdown menu positioning */
.dropdown-menu {
    border-radius: 8px;
    padding: 8px 0;
}
/*...........*/

#salaryRange::-webkit-slider-thumb {
    background: #480001 !important;
    border-color: #480001 !important;
    box-shadow: 0 0 2px rgba(0,0,0,0.5); 
}

#salaryRange::-moz-range-thumb {
    background: #480001 !important;
    border-color: #480001 !important;
}

.form-range{
	border: none;
}
/* 3. The Slider Track (Focus State) */
#salaryRange:focus {
    box-shadow: 0 0 0 0.25rem rgba(72, 0, 1, 0.25) !important;
}

/* 4. Active/Pressed State */
#salaryRange:active::-webkit-slider-thumb {
    background: #6a0002 !important; 
}

/*...........*/
/* Remove the border/outline when clicking pagination links */
.custom-pagination .page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none; 
    background-color: transparent;
}

.custom-pagination .page-item.active .page-link:focus {
    background-color: #480001 !important;
    color: #ffffff !important;
    box-shadow: none;
}

.custom-pagination .page-link:active {
    box-shadow: none !important;
}

/*............Companies.............*/
/* Background for the job count badge */
.bg-maroon-light {
    background-color: rgba(72, 0, 1, 0.1);
}

.text-maroon {
    color: #480001 !important;
}

/* Company Card Hover Effect */
.company-card {
    transition: transform 0.3s ease, border-color 0.3s ease;
    border-radius: 12px;
}

.company-card:hover {
    transform: translateY(-5px);
    border-color: #480001;
}

/* Reuse the pagination and sort dropdown styles from previous steps */
.sort-dropdown-btn:focus {
    box-shadow: none !important;
    outline: none !important;
}
/*.......candidates.......*/

.candidate-card {
    border-radius: 15px;
    transition: all 0.3s ease;
}

.candidate-card:hover {
    border-color: #480001;
    transform: translateY(-5px);
}

.x-small {
    font-size: 10px;
}

/* Available Status Dot */
.bg-success {
    background-color: #28a745 !important;
}

/* Align with your existing theme */
.btn-brand-solid {
    background-color: #480001 !important;
    border-color: #480001 !important;
    color: #fff !important;
}

.btn-brand-outline {
    color: #480001 !important;
    border-color: #480001 !important;
}

.btn-brand-outline:hover {
    background-color: #480001 !important;
    color: #fff !important;
}
/*.......blogs.........*/
/* Custom Branding */
.text-maroon {
    color: #480001 !important;
}

.btn-brand-solid {
    background-color: #480001 !important;
    border-color: #480001 !important;
    color: #fff !important;
}

.btn-brand-outline {
    color: #480001 !important;
    border-color: #480001 !important;
    background: transparent;
}

.btn-brand-outline:hover {
    background-color: #480001 !important;
    color: #fff !important;
}

/* Blog Card Specifics */
.pad_10 {
    padding: 10px;
}

.blog-card-v3 {
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card-v3:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    border-color: #480001 !important;
}

.blog-title {
    font-size: 1.15rem;
    color: #333;
}

/* Pagination fix from previous request */
.custom-pagination .page-link:focus {
    box-shadow: none !important;
    outline: 0;
}

/* .........contact........*/
/* Contact Page Specific Styles */
.contact-icon-circle {
    width: 60px;
    height: 60px;
    background-color: rgba(72, 0, 1, 0.1); /* Light maroon tint */
    color: #480001; /* Your brand maroon */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.card:hover .contact-icon-circle {
    background-color: #480001;
    color: #ffffff;
}

/* Form Styling */
.form-control:focus {
    background-color: #fff !important;
    border: 1px solid #480001 !important;
    box-shadow: none !important;
}

.btn-brand-solid {
    background-color: #480001 !important;
    border-color: #480001 !important;
    color: #fff !important;
}

.btn-brand-solid:hover {
    background-color: #6a0002 !important;
    border-color: #6a0002 !important;
}

/* Custom shadow for cards */
.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}
.contact-icon-circle-white {
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.text-maroon {
    color: #480001 !important;
}

.x-small {
    font-size: 11px;
}

/*Login*/
.login-container {
            
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-card {
            width: 100%;
            max-width: 400px;
            padding: 2rem;
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            background: #fff;
        }
        .brand-logo {
            font-weight: bold;
            color: var(--primary-color);
            font-size: 1.5rem;
            text-decoration: none;
            display: block;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            padding: 0.75rem;
            font-weight: 600;
        }
        .btn-primary:hover {
            background-color: #660000;
        }
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(139, 0, 0, 0.1);
        }
        .social-login .btn {
            border: 1px solid #ddd;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }
/*registration page*/
.register-card { max-width: 550px; margin: 50px auto; border: none; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
        /* Ensure Active Tab is clearly maroon */
.nav-pills .nav-link.active {
    background-color: #8B0000 !important;
    color: white !important;
}

/* Tab button styling when not active */
.nav-pills .nav-link {
    color: #333;
    border: 1px solid #dee2e6;
    margin: 0 4px;
}

/* Primary Form Button Styling */
.btn-primary {
    background-color: #8B0000 !important;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.btn-primary:hover {
    background-color: #660000 !important;
    transform: translateY(-1px);
}

/* Input focus color to match brand */
.form-control:focus {
    border-color: #8B0000;
    box-shadow: 0 0 0 0.2rem rgba(139, 0, 0, 0.25);
}

/* Only apply hover effect on screens larger than 992px (Desktop) */
@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Prevents a gap that would close the menu */
    }
}

/* Optional: Smooth transition */
.dropdown-menu {
    transition: all 0.3s ease;
}

/*client services*/
.page-header {
            background-color: var(--bg-light);
            padding: 20px 0;
            border-bottom: 1px solid #e9ecef;
        }

        /* Content Sections */
        .service-block { padding: 20px 0; }
        .bg-white-alt { background-color: #ffffff; }
        
        .section-heading {
            font-weight: 700;
            margin-bottom: 1.5rem;
            position: relative;
            display: inline-block;
        }

        /* Styling for the Service Lists */
        .feature-list {
            list-style: none;
            padding-left: 0;
        }
        .feature-list li {
            padding: 8px 0;
            display: flex;
            align-items: center;
        }
        .feature-list li::before {
            content: "✓";
            color: var(--brand-primary);
            font-weight: bold;
            margin-right: 15px;
        }

        /* About Box (Matches Featured Section Style) */
        .about-card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            padding: 40px;
            background: #fff;
        }

/*candidate services*/
.hero-title { background: #f8f9fa; padding: 60px 0; border-bottom: 1px solid #dee2e6; }
        .service-section { padding: 40px 0; border-bottom: 1px solid #eee; }
        .service-title { color: var(--brand-color); font-weight: 700; margin-bottom: 15px; }
        .about-box { background: #fff; border-left: 5px solid var(--brand-color); padding: 25px; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
        .training-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; list-style-type: none; padding: 0; }
        .training-grid li::before { content: "• "; color: var(--brand-color); font-weight: bold; }
        .highlight-box { background-color: #f0f7ff; border-radius: 8px; padding: 20px; height: 100%; }
   /*companies*/

        .page-header {
            background-color: var(--bg-light);
            padding: 60px 0;
            border-bottom: 1px solid #e9ecef;
        }

        .section-block { padding: 80px 0; }
        
        /* Logo Grid Styling */
.logo-container {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px; /* Fixed height for uniformity */
    transition: all 0.3s ease;
    /*filter: grayscale(100%);*/ /* Optional: Make logos grey until hover */
    opacity: 1;
}

    .logo-container:hover {
        filter: none; /* ensure no grayscale */
        opacity: 1; /* stays fully visible */
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        transform: translateY(-5px);
        border-color: var(--brand-primary);
    }


        .logo-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .section-heading {
            font-weight: 700;
            margin-bottom: 1.5rem;
        }