/*
 * D-Renov Brand Color Palette
 * Based on business card design and logo specifications
 */

:root {
    /* D-Renov Brand Colors */
    --drenov-black: #000000;          /* Logo, headings, icons */
    --drenov-charcoal: #333333;       /* Dark backgrounds, header, footer */
    --drenov-medium-gray: #666666;    /* Secondary text, subheadings */
    --drenov-light-gray: #DDDDDD;     /* Alternating backgrounds, insets, dividers */
    --drenov-white: #FFFFFF;          /* Main background for readability */
    --drenov-accent-red: #A30000;     /* CTAs, links, buttons, graphic details */
    
    /* Logo Specific Colors */
    --drenov-logo-gray: #555555;      /* Used in "Reno" and roof elements */
    --drenov-logo-light: #AAAAAA;     /* Light gray gradient in logo */
}

/* Override Bootstrap warning/yellow colors with D-Renov red */
.bg-warning,
.btn-warning,
.alert-warning,
.badge-warning,
.text-warning {
    background-color: var(--drenov-accent-red) !important;
    border-color: var(--drenov-accent-red) !important;
    color: var(--drenov-white) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #8B0000 !important;
    border-color: #8B0000 !important;
}

/* Override Bootstrap warning/yellow colors with D-Renov red */
.bg-warning,
.btn-warning,
.alert-warning,
.badge-warning,
.text-warning {
    background-color: var(--drenov-accent-red) !important;
    border-color: var(--drenov-accent-red) !important;
    color: var(--drenov-white) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #8B0000 !important;
    border-color: #8B0000 !important;
}

/* Replace any gold/yellow/brown colors with D-Renov red */
.text-primary,
.text-gold,
.text-yellow,
.text-warning {
    color: var(--drenov-accent-red) !important;
}

.bg-primary,
.bg-gold,
.bg-yellow {
    background-color: var(--drenov-accent-red) !important;
}

/* Bootstrap button overrides */
.btn-primary,
.btn-outline-primary {
    background-color: var(--drenov-accent-red) !important;
    border-color: var(--drenov-accent-red) !important;
    color: var(--drenov-white) !important;
}

.btn-primary:hover,
.btn-outline-primary:hover {
    background-color: #8B0000 !important;
    border-color: #8B0000 !important;
}

/* Icons and elements with gold/brown colors */
.fa,
.fas,
.far,
.fab,
.flaticon-construction,
.flaticon-worker,
[class*="icon"]:not(.bi) {
    color: var(--drenov-accent-red) !important;
}

/* Hide obstructive service numbers overlaying images */
.service_area_five .single_service_box .service_number,
.single-inner-service-box .inner-service-number {
    display: none !important;
}

/* Hide placeholder icon images in service boxes */
.single_service_box .service_shap {
    display: none !important;
}

/* Remove number overlays from portfolio items */
.single_project_box .project_number,
.portfolio_item .project_number {
    display: none !important;
}

/* Remove any 150x150 placeholder overlays */
[class*="150"],
.placeholder-overlay,
.overlay-number {
    display: none !important;
}

/* Update breadcrumb background with D-Renov project image */
.breadcumb-area {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/resource/breadcumb-drenov.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Update call-to-action background with D-Renov project image */
.call-do-action-area {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/resource/call-to-bg-drenov.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Ensure proper contrast for text visibility */
.call-do-action-area .section_title_five .main_title h1,
.call-do-action-area .section_title_five .main_title p {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.call-do-action-area .section_title_five .sub_title h4 {
    color: var(--drenov-accent-red) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Contact form styling */
.contact-form select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #333;
}

.contact-form select:focus {
    outline: none;
    border-color: var(--drenov-accent-red);
    box-shadow: 0 0 5px rgba(163, 0, 0, 0.3);
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form .form-button button {
    background-color: var(--drenov-accent-red) !important;
    border: none;
    padding: 12px 30px;
    color: white;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.contact-form .form-button button:hover {
    background-color: #8B0000 !important;
    transform: translateY(-2px);
}

/* Language switcher styling */
.language-switcher .lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    background-color: var(--drenov-accent-red);
    color: white !important;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
}

.language-switcher .lang-btn:hover {
    background-color: #8B0000;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Theme specific elements */
.theme-bg,
.skill_btn a,
.header_btn a,
.head-btn a {
    background-color: var(--drenov-accent-red) !important;
    border-color: var(--drenov-accent-red) !important;
    color: var(--drenov-white) !important;
}

.theme-bg:hover,
.skill_btn a:hover,
.header_btn a:hover,
.head-btn a:hover {
    background-color: var(--drenov-white) !important;
    color: var(--drenov-accent-red) !important;
    border-color: var(--drenov-accent-red) !important;
}

/* Become a Partner Banner Visibility Fixes */

/* Logo size controls - prevent overshadowing */
.logo img,
.logo_img img,
.main_sticky img {
    max-width: 150px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Header Logo Styling - Fix background issues */
.logo,
.logo a,
.logo_img,
.main_sticky {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.logo img {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Mobile navigation logo styling */
.nav-logo,
.nav-logo a {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.nav-logo img {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    max-height: 40px !important;
    width: auto !important;
}

/* Removed problematic header background override */

/* Become a Partner Banner Visibility Fixes */
.call_do_action_five h1,
.call_do_action_five .main_title h1 {
    color: var(--drenov-white) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
    font-weight: 600 !important;
}

.call_do_action_five p {
    color: var(--drenov-white) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
    font-size: 16px !important;
}

.call_do_action_five .skill_btn a,
.call_do_action_five a {
    background-color: var(--drenov-accent-red) !important;
    color: var(--drenov-white) !important;
    border: 2px solid var(--drenov-accent-red) !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.call_do_action_five .skill_btn a:hover,
.call_do_action_five a:hover {
    background-color: var(--drenov-white) !important;
    color: var(--drenov-accent-red) !important;
    border-color: var(--drenov-white) !important;
}

/* Image Structure and Alignment Fixes */

/* Service section image fixes */
.single_service_box img,
.service_img img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
}

/* Portfolio section image fixes */
.single_project_box img,
.single_project-tmb img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
}

/* Testimonial image fixes */
.testimonial_thumb img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Fix container alignment */
.single_service_box,
.single_project_box,
.single_testimonial_box {
    margin-bottom: 30px !important;
    height: auto !important;
    overflow: hidden !important;
}

/* Ensure proper image loading and no broken placeholders */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix any broken image icons */
img:not([src]), img[src=""] {
    display: none !important;
}

/* Fix hover effects and overlays */
.single_project_box:hover .single_project-tmb::after,
.single_project-tmb:hover::after {
    display: none !important;
}

/* Remove any empty placeholder popups */
.single_project_box .overlay,
.single_project-tmb .overlay {
    display: none !important;
}

/* Ensure portfolio project content is properly styled */
.single_project_content {
    padding: 20px !important;
    background: var(--drenov-white) !important;
}

.single_project_content h3 {
    color: var(--drenov-charcoal) !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.single_project_content p {
    color: var(--drenov-medium-gray) !important;
    line-height: 1.6 !important;
}

/* Footer logo sizing controls (already implemented) */
.elaction-logo img,
.logo_thumb img,
.widgets-company-info-box .elaction-logo img {
    max-width: 120px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Mobile logo adjustments */
@media (max-width: 768px) {
    .logo img,
    .logo_img img,
    .main_sticky img {
        max-width: 120px !important;
        max-height: 45px !important;
    }
    
    .elaction-logo img,
    .logo_thumb img {
        max-width: 100px !important;
        max-height: 40px !important;
    }
    
    .header-src-box {
        gap: 5px !important;
    }
    
    .header-src-box .language-switcher .lang-btn,
    .header-src-box .head-btn a {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
}

/* D-Renov specific elements */
.drenov-red {
    color: var(--drenov-accent-red) !important;
}

.drenov-bg-red {
    background-color: var(--drenov-accent-red) !important;
}

.drenov-border-red {
    border-color: var(--drenov-accent-red) !important;
}

/* Header and navigation styling */
.header-src-box {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.header-src-box .language-switcher,
.header-src-box .head-btn {
    margin: 0 !important;
}

.header-src-box .language-switcher .lang-btn {
    background-color: var(--drenov-accent-red);
    color: var(--drenov-white);
    padding: 6px 12px !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    font-size: 12px !important;
    transition: all 0.3s ease;
    display: inline-block;
    line-height: 1.2;
}

.header-src-box .language-switcher .lang-btn:hover {
    background-color: #8B0000;
    transform: translateY(-1px);
}

.header-src-box .head-btn a {
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.2;
    border-radius: 4px;
    display: inline-block;
}

/* Button styling */
.btn-drenov {
    background-color: var(--drenov-accent-red);
    border-color: var(--drenov-accent-red);
    color: var(--drenov-white);
    padding: 12px 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-drenov:hover,
.btn-drenov:focus,
.btn-drenov:active {
    background-color: #8B0000;
    border-color: #8B0000;
    color: var(--drenov-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(163, 0, 0, 0.3);
}

/* Link styling */
a {
    color: var(--drenov-accent-red);
    transition: color 0.3s ease;
}

a:hover {
    color: #8B0000;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--drenov-black);
    font-weight: 600;
}

.text-charcoal {
    color: var(--drenov-charcoal) !important;
}

.text-medium-gray {
    color: var(--drenov-medium-gray) !important;
}

.text-light-gray {
    color: var(--drenov-light-gray) !important;
}

/* Background utilities */
.bg-charcoal {
    background-color: var(--drenov-charcoal) !important;
}

.bg-medium-gray {
    background-color: var(--drenov-medium-gray) !important;
}

.bg-light-gray {
    background-color: var(--drenov-light-gray) !important;
}

/* Border utilities */
.border-drenov-red {
    border-color: var(--drenov-accent-red) !important;
}

.border-charcoal {
    border-color: var(--drenov-charcoal) !important;
}

/* Form styling */
.form-control:focus {
    border-color: var(--drenov-accent-red);
    box-shadow: 0 0 0 0.2rem rgba(163, 0, 0, 0.25);
}

/* Navigation active states */
.nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--drenov-accent-red) !important;
}

/* Footer styling */
footer {
    background-color: var(--drenov-charcoal);
    color: var(--drenov-white);
}

footer h4, footer h5, footer h6 {
    color: var(--drenov-white);
}

footer a {
    color: var(--drenov-light-gray);
}

footer a:hover {
    color: var(--drenov-accent-red);
}

/* Card and content styling */
.card-header {
    background-color: var(--drenov-light-gray);
    border-bottom: 2px solid var(--drenov-accent-red);
}

/* Service boxes and feature elements */
.single-feature-box:hover,
.single-inner-service-box:hover {
    border-top: 3px solid var(--drenov-accent-red);
}

/* Team bio functionality */
.team-bio-toggle {
    margin: 15px 0;
}

.btn-bio {
    background: var(--drenov-accent-red);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.btn-bio:hover {
    background: #8B0000;
}

.team-bio-details {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--drenov-accent-red);
}

.team-bio-details h4 {
    color: var(--drenov-accent-red);
    margin-bottom: 10px;
    font-size: 16px;
}

.team-bio-details p {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.team-bio-details p:last-child {
    margin-bottom: 0;
}
.single-team-box:hover,
.single-portfolio-box:hover {
    box-shadow: 0 8px 25px rgba(163, 0, 0, 0.15);
}

/* Contact and CTA buttons */
.contact-btn,
.cta-btn {
    background: linear-gradient(135deg, var(--drenov-accent-red) 0%, #8B0000 100%);
    color: var(--drenov-white);
    border: none;
    padding: 14px 28px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.contact-btn:hover,
.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(163, 0, 0, 0.3);
}

/* Icon styling */
.icon-drenov {
    color: var(--drenov-accent-red);
    background-color: rgba(163, 0, 0, 0.1);
    border-radius: 50%;
    padding: 12px;
}

/* Divider and separator styling */
.divider-drenov {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--drenov-accent-red) 50%, transparent 100%);
    border: none;
    margin: 2rem 0;
}

/* Animation and hover effects */
.hover-drenov {
    transition: all 0.3s ease;
}

.hover-drenov:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(163, 0, 0, 0.2);
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .header-src-box .language-switcher .lang-btn {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    .btn-drenov {
        padding: 10px 20px;
        font-size: 14px;
    }
}