/*
 Theme Name:   	Dixor Child
 Theme URI: https://wordpress.validthemes.net/dixor/
 Description:  	This is a child theme for Dixor - Creative Digital Agency WordPress Theme
 Author:       	Coderstation
 Author URI:   	https://themeforest.net/user/validthemes/portfolio
 Template:     	dixor
 Version:      	1.0
 Tags:         	two-columns, three-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, theme-options, editor-style, featured-images, microformats, post-formats,  sticky-post, threaded-comments, translation-ready
 Text Domain:  	dixor-child
*/

/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */
.navbar-brand>img {
    max-height: 50px;
}

.bg-dark .bg-gray .client-style-one-item:last-child::before{
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.bg-dark .bg-gray .client-style-one-item:last-child::after{
	    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.client-style-one-item img {
    max-height: 90px;
    max-width: 180px;
}
.clients-card{
	margin-left: 0px;
}
.clients-card a{
	color: var(--white);
	text-transform: uppercase;
    font-size: 20px;
    border-bottom: 2px solid var(--white);
}
.clients-card i{
	margin-left:15px;
}
.bg-dark .contact-style-one-items{
	background: none;
}

.contact-style-one-items{
	background: none;
	padding: 0px;
}

/* .title{
	font-size:48px !important;
} */

.bg-dark .footer-contact ul li a{
	color: var(--white);
}

ul.service-list li:first-child a{
	border: 1px solid rgba(255, 255, 255, 0.2);
    background: #0e0f11;
	color: var(--white);
}

ul.service-list li a:hover {
    background: var(--color-primary);
    color: var(--color-heading);
    border-color: transparent;
}

ul.service-list a {
    padding: 30px; 
}

.services-style-one-items .single-item {
    padding: 0 3px; 
}


.shape-style-one{
	width:18%;
	opacity:0.1;
}

/* ------------------------------------ */
/* 5-Column Layout Fix & Item Styling */
/* ------------------------------------ */

/* Force row to use Flexbox to allow custom 5-column layout */
.process-style-one-items .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center items when not full row */
}

/* The individual item box styling */
.process-style-one-item .item {
    padding: 30px 20px;
    transition: all 0.3s ease;
}

.process-style-one-item .item:hover {
    transform: translateY(-5px); /* Lift effect */
}

.process-style-one-item .item .icon img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
	opacity:0.5;
}

.bg-dark .award-item {
    border-radius: 25px;
}

.contact-panel-bg {
	width:48%;
}

/* ------------------------------------ */
/* MEDIA QUERY: FIX 5-COLUMN DESKTOP LAYOUT */
/* ------------------------------------ */
/* This targets the large screen size (1024px is a common 'lg' breakpoint) */
@media (min-width: 1024px) {
    /* Override the col-lg-3 behavior to fit 5 items */
    .process-style-one-item {
        /* Set basis to 18.5% to leave room for the 20px gap between items (5 * 18.5% < 100%) */
        flex-basis: 20%;
        max-width: 20%;
    }
    /* Since we are using flex and a gap on the row, the items will space out correctly */
}
@media (min-width: 992px) {
    .process-style-one-item {
        /* Set basis to 20% to leave room for the 20px gap between items (5 * 18.5% < 100%) */
        flex-basis: 20%;
        max-width: 20%;
    }
}
/* Ensure mobile stacking looks good */
@media (max-width: 767px) {
    .process-style-one-item {
        /* Stack vertically on mobile */
        flex-basis: 100%;
        max-width: 100%;
    }
}