/* 
Theme Name: DB-E
Theme URI: #
Version: v1
Author: 
Author URI: 
*/
@import "fonts.css"; 
:root {
	--primary-color: #fe1d20;
	--primary-color-alt: #ffe3e3ad;
	--secondary-color: #061237;
	--alt-color: #90a0b7;
	--alt-color2: #e3e3e3;
	--white: #fff;
	--black: #111;
    --box-shadow: 0px 8px 18px -4px rgba(10, 9, 11, 0.02), 0px 34px 54px -24px rgba(10, 9, 11, 0.04);
    --box-shadow-alt: 0px 8px 20px -4px rgba(9.999999999999998, 9, 11, 0.04);
    --color-text: #334155;
	--radius-sm: 12px;
	--radius-md: 16px;
	--border-color: #e3e8ef;
	--border-color-alt: #0156ff1f;
	--border-color-secondary: #d5dae1;
	--bg-color: #faf0f0;
}
body, html {
    margin: 0px 0;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
	font-family: Ravi,"Poppins", sans-serif;
    
    color: var(--color-text);
}
.uk-container-small {
    max-width: 980px;
}
.uk-link, a {
    color: var(--primary-color);
}
.uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover {
    color: var(--alt-color);
}
#breadcrumb {
    text-align: center;
}
.uk-button-primary {
    background-color: var(--primary-color);
}
.uk-container-small {
    max-width: 1080px;
}
.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
}


.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-3xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
}
.uk-button {
    transition: .2sease-in-out;
	border-radius: var(--radius-md);
}
.uk-button-default {
    background-color: #ffffff;
}
.uk-button:hover {
	background-color: var(--secondary-color);
	color: #fff;
}
.highlight {
    background-color: transparent;
    color: var(--primary-color);
    padding: 0px 0px 0px 0px;
    background-image: linear-gradient(180deg, #FFFFFF00 70%, var(--primary-color-alt) 0%);
    border-radius: 0px 0px 0px 0px;
	font-weight: bold;
}
.subtitle {
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 500;
	margin: 0px 0px 20px 0px;
	padding: 5px 15px 5px 15px;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: var(--primary-color);
	border-radius: 18px 18px 18px 18px;
    background: var(--white);
}
.top-hero {
	padding: 15vh 50px 0px 50px;
	border-radius: var(--radius-md);
	margin-top: -50px;
    background-color: #ffffff;
    background-image: url(assets/hero-red.svg);
    background-size: cover;
	text-align: center;
    overflow: hidden;
	
	h6 {
        font-size: 1rem;
		display: inline-block;
	}
	
	h2 {
        font-size: 3.5rem;
        margin-top: 0;
	}
	
	p {
        font-size: 1.5rem;		
	}

	.bottom {
		margin-top: 50px;
		img {

            margin-bottom: -30px;
            box-shadow: 0 0 5px #0000003b;
            border: 4px solid #ffffff;
            background: #0000001a;
            padding: 10px;
            border-radius: 10px;
		}
	}
}
.buttons {
	display:flex;
	justify-content: center;
	gap: 20px;
	margin: 20px 0;
	
	a {
		position: relative;
		overflow: hidden;
		span {
			display: inline-block;
			transition: opacity .2s, transform .2s;
			transition-timing-function: cubic-bezier(.455,.03,.515,.955);
		}
		&:before {
			content: attr(data-text);
			display: inline-block;
			position: absolute;
			top: 50%;
			opacity: 0;
			transform: translate(0, 100%);
			transition: opacity .2s, transform .2s;
			transition-timing-function: cubic-bezier(.455,.03,.515,.955);
			white-space: nowrap;
			text-align: center;
            left: 0;
            right: 0;
		}
		
		&:hover {
			span {
				transform: translateY(-150%);
				opacity: 0;
			}
			&:before {
				transform: translate(0%, -50%);
				opacity: 1;
			}
		}
	
	}
}	
.logo {
	font-family: "Bungee", sans-serif;
    color: var(--primary-color);
}
#top-nav {
	
    z-index: 99999;
	border-radius: var(--radius-md);
    border: 1px solid;
	border-color: var(--border-color);
	box-shadow: var(--box-shadow);
    background-color: var(--white);
    transition: 0.3s all;
    padding: 0 25px;
    box-sizing: border-box;

}
.uk-navbar-nav>li.uk-active>a, .uk-navbar-nav>li.current_page_item>a {
    color: #333;
}
.uk-sticky-fixed.uk-sticky-below {
    top: 20px !important;
}

.custom-slider {
	.uk-position-center-right-out svg, .uk-position-center-left-out svg {
        height: 24px;
        width: 15px;
        padding: 4px;
	}
	.uk-position-center-right-out svg polyline, .uk-position-center-left-out svg polyline {
		stroke: var(--color-text) !important;
	}
	.uk-panel {
		text-align: center;
		opacity: 0.8;
			img {
				height: 40px;
				object-fit: contain;
			}
	}
	.uk-position-center-right-out, .uk-position-center-left-out {
        opacity: 0;
		border: 1px solid var(--alt-color2);
		border-radius: var(--radius-sm);
		transition: 0.2s all;
		&:hover {
			background: var(--primary-color);
			border-color: var(--primary-color);

			svg polyline {
				stroke: var(--white) !important;
			}

		}
	}
	.uk-position-center-right-out {
        margin-left: 0;
	}
	.uk-position-center-left-out {
		margin-right: 0px;
	}
	&:hover {
		.uk-position-center-right-out, .uk-position-center-left-out {
			opacity: 1;
		}
		.uk-position-center-right-out {
			margin-left: 10px;
		}
		.uk-position-center-left-out {
			margin-right: 10px;
		}
	}
}
.section-title {
    text-align: center;

	h3 {
		font-size: 3rem;
	
		span {
			
		}
	}
	p {
		
	}
}

.card-style-1 {
	border-radius: var(--radius-md);
    border: 1px solid;
    border-color: var(--border-color);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    min-height: 255px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	
	.header {
		padding: 20px 40px;
	}
	
	.footer {
		padding: 0 40px;
		svg {
			height: 280px;
			display: block;
			margin: 0 auto;
		}
	}
	
	span.icon {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--bg-color);
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: var(--primary-color-alt);
        border-radius: 12px 12px 12px 12px;
        width: 64px;
        padding: 10px;
        aspect-ratio: 1 / 1;
        box-sizing: border-box;
		
		svg {
			fill: var(--primary-color);
            width: 32px;
		}
	}
	
}
.card-style-1.card1 {
	
	.footer {
		padding: 0 0px 0 20px;
        position: relative;
		
		&>p {
					
			position: absolute;
			right: 0;
			left: 230px;
			top: 0px;
			bottom: 0;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 4.5rem;
			opacity: 0.2;
			width: 52px;
			line-height: 1;
			font-family: fantasy;
			transform: rotateY(45deg);
			color: var(--primary-color);

		}
		
		img {
            margin: 0 auto 0 0;
            max-width: 294px;
            display: block;
		}
	}
}
.card-style-1.card3 {
	
	.footer {
		img {
			border-top: 1px solid;
			border-left: 1px solid;
			transform: translate(50px, 0px);
			width: 500px;
			max-width: 500px;
			box-shadow: 0px 12px 48px -4px rgba(20.999999999999996, 25.000000000000007, 29.999999999999996, 0.04);
			border-color: var(--border-color);
			border-top-left-radius: 10px;
			padding-left: 15px;
            height: 185px;
            object-fit: contain;
		}
	}
}

.usage {
    padding: 20px 50px;
    border-radius: var(--radius-md);
    background-color: #ffffff;
    background-image: url(assets/hero-red.svg);
    background-size: cover;
    text-align: center;
	.brands {
		margin: 30px 0;
		gap: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 600px;
        place-self: center;
        justify-self: center;
		
		img {
            width: 72px;
            height: 72px;
            object-fit: contain;
            border: 1px solid;
            overflow: visible;
            border-radius: var(--radius-md);
            border-color: var(--border-color-secondary);
            box-shadow: var(--box-shadow);
            background: #fff;
            padding: 10px;
		}
	}
	
	
}



.countup {
    text-align: center;
	
	&> div {
	font-weight: bold;
	font-size: 3rem;
    direction: ltr;
	}
	
}

.feedback {
	.uk-panel {
        text-align: right;
        border: 1px solid var(--border-color-secondary);
        font-size: 1rem;
        border-radius: var(--radius-sm);
        padding: 30px;
		box-shadow: var(--box-shadow-alt);
		
		.feedback-text {
            
        }
		.meta {
			.name {
				color: #000;
			}
			p {
				font-size: 0.8rem;
				opacity: 0.7;
			}
		}
		
	}
	.uk-dotnav {
		margin-top: 20px;
		justify-content: center;
	}
	.uk-dotnav>*>* {
		border: 1px solid transparent;
		background-color: #ddd;
		
		
	}
	.uk-dotnav>.uk-active>* {
		background-color: var(--primary-color);
	}
}


.faq  {
	.section-title {
    text-align: right;
	}
	
	.buttons {
		justify-content: start;
	}
	.uk-sticky-fixed.uk-sticky-below {
		top: 150px !important
	}
}

.faq-accordion {
	.uk-accordion {
		
		li {
			text-align: right;
			border: 1px solid var(--border-color-secondary);
			font-size: 1rem;
			border-radius: var(--radius-sm);
			padding: 20px;
			box-shadow: var(--box-shadow-alt);
			
			
			.uk-accordion-title {
				font-size: 1rem;
			}
			.uk-accordion-content {
				font-size: 0.8rem;
				opacity: 0.7;
			}
		}
	}
}
.cta-style1 {
	padding: 20px;
    border-radius: var(--radius-md);
    background-color: #ffffff;
    background-image: url(assets/hero-red.svg);
    background-size: cover;
    text-align: center;
}
.cta-style1 > .uk-grid {
    align-items: center;
}

.contact-us-form {
	padding: 50px 100px;
    border-radius: var(--radius-md);
    background-color: #ffffff;
    background-image: url(assets/hero-red.svg);
    background-size: cover;

}

.contact-us {
	.uk-input {
		height: 50px;
	}
	.uk-textarea {
    min-height: 150px;
	}
	.uk-input, .uk-select, .uk-textarea {
		padding: 15px;
		border-radius: 5px;
		box-shadow: var(--box-shadow);
	}
	.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
		border-color: var(--primary-color);
	}
	
	label {
    display: flex;
    margin-bottom: 0;
    position: absolute;
    align-items: center;
    cursor: text;
    margin-bottom: 0;
    height: 50px;
    padding-left: 15px;
    padding-right: 15px;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    z-index: 10;
    pointer-events: none;
	font-size: 0.8rem;
	opacity: 0.6;
}
}
.contact-us p:focus-within label{
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-20px,0,0)
}
.icon-features-style1 {
	
	 span.icon {
		background: #fff;
		border-style: solid;
		border-width: 1px 1px 1px 1px;
		border-color: var(--primary-color-alt);
		border-radius: 12px 12px 12px 12px;
		display: inline-block;
		padding: 12px;
		
		svg {
			color: var(--primary-color);
		}
	}
	
	.uk-card-title {
		font-size: 0.9rem;
	}
	.uk-text-meta {
		font-size: 0.8rem;
		color: #777;
	}
}

.blog-card {
	border-radius: 5px;
	overflow: hidden;
	position: relative;
	text-shadow: 1px 1px 1px #00000050;
	
    a {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 4;
    }
	.title {
        margin: 5px;
        padding: 10px 20px;
        position: absolute;
        bottom: 0px;
        right: 0;
        left: 0;
		z-index: 3;
		transition: 0.3s all ease-in-out;
		span {
            color: #fff;
            font-size: 0.7rem;
            opacity: 0.5;
		}
		h3 {
			font-size: 1rem;
			font-weight: bolder;
			color: #fff;	
			margin: 0;		
		}
	}
    .meta {
        margin: 5px;
        padding: 10px 20px;
        position: absolute;
        top: 0px;
        right: 0;
        left: 0;
        font-size: 0.8rem;
        color: #fff;
        z-index: 3;
        display: flex;
        justify-content: space-between;
		
		span {
			display: flex;
			gap: 20px;
			i {
                font-style: normal;
			}
		}
		span.date {
            flex-direction: row-reverse;
			gap: 5px;
		}
    }
	.title.glass {
        margin: 5px;
        padding: 10px 20px;
        position: absolute;
        bottom: 0px;
        right: 0;
        left: 0;
        font-size: 1rem;
        font-weight: bolder;
        background: rgb(255 255 255 / 80%);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        color: #000000;
        border-radius: 5px;
		z-index: 3;
	}
	.overlay {
		position: absolute;
		display: block;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		background: rgb(36, 0, 0);
		background: linear-gradient(0deg, rgba(36, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 100%);
		z-index: 2;
	}
	img {
		transition: 0.5s all;
	}
	&:hover {
			img {
				transform: scale(1.5) rotate(-5deg);
			}
			.title {
				padding-bottom: 20px;
			}
	}
	
}
/***COMMENTS******************/

.comment-form label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}
.comments-area {
    margin-top: 40px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.comment-author {
    font-weight: bold;
    margin-bottom: 10px;
}

.comment-meta {
    font-size: 0.875em;
    color: #666;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

#commentform {
    margin-top: 25px;
	gap: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
#commentform p {
    margin: 0;
}
.form-submit {
    margin-top: 25px;
}
.comment-notes {
    display: none;
}

.comment-form textarea {
    height: 100%;
}

.comment-textarea-container {
    height: 100%;
}

.comment-form-comment {
    height: 100%;
}

.comment-form-cookies {
    display: flex;
    align-items: center;
    gap: 5px;
}

.comment-form-cookies input {
    width: auto;
    margin: 0px;
}

.comment-form-cookies label {
    margin: 0;
}
/***BLOG Single******************/
figure.wp-block-image.size-full img {
    border-radius: 5px;
    width: 100%;
}
figure.wp-block-image img {
    border-radius: 5px;
    width: 100%;
}
.single-post {
	.thumbnail {
		
        text-align: left;
		
		img {
			max-height: 600px;
			width: auto;
		}
		
	}
	
.uk-grid-divider>:not(.uk-first-column)::before {
    border: 3px solid;
    border-color: #88888822;
}
	
}
.single-post-header {
    background-color: #AEBECC66;
    background-color: #ccaeae30;
    padding: 20px;
    min-height: 240px;
    border-radius: 5px;
	.post-title {
		
	}
	.sub-title {
		margin: 0;
	}
	
	.post-meta {
		display: flex;
		flex-direction: column;
		justify-content: end;
		
		* {
			margin-top: 0;
			margin-bottom: 0;
		}
	}
	.post-taxonomies {
		a {
			background: #1f2023;
			border: 1px solid #1f2023e6;
			color: #ffffff;
			border-radius: 4px;
			font-size: 0.7rem;
			padding: 3px 8px;
		}
	}
}


.social-shares {
    display: flex;
    list-style: none;
	padding: 0;
	.desc {
		font-size: 0.8rem;
	}
    a {
        color: #444;
		&:hover {
			text-decoration:none;
		}
	}
	li {
        margin-left: 5px;
        cursor: pointer;
	}
    .native-share-trigger {
        font-size: 2.4rem;
        line-height: 1rem;
        letter-spacing: -5px;
        margin-right: 5px;
    }
}