/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Background Color
  2.3 Section
    - Section Paddings
    - Section Margins
    - Section Title
  2.4 Buttons
    - Primary Buttons
    - Button Hover Effect

3. CONTENT ELEMENTS
  - Dropdown
  - Breadcrumb
  - Pagination
  - Accordion
  - Form
  - Swiper
  - Modal Video

4. SITE STRUCTURE
  4.1 Header
  4.2 Brand Section
  4.3 About Section
  4.4 Services Section
  4.5 Project Section
  4.6 CTA Section

5. PAGES STYLE
  5.1 Projects Page
  5.2 Pricing page 
  5.3 Reviews page
    

  
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
	--primary-color: #C62828;
	--secondary-color: #05213c;
	--black-color: #292929;
	--light-black-color: #343536;
	--dark-color: #313131;
	--body-color: #5a5a5a;
	--gray-color: #777f81;
	--light-color: #fdfdfd;

	/* Bootstrap Theme Color  */
	--bs-gray-100: #f6f6f6;
	--bs-gray-300: #dcdcdc;
	--bs-primary-text-emphasis: var(--primary-color);
	--bs-body-color-rgb: 90, 90, 90;
	--bs-light-rgb: rgba(255, 255, 255, 1);
	--bs-dark-rgb: 41, 41, 41;
	--bs-primary-rgb: 178, 142, 113;
}

/* Fonts */
:root {
	--heading-font: 'Poppins', sans-serif;
	--body-font: 'Poppins', sans-serif;
}

.eapps-widget-toolbar {
	display: none !important;
}
a[href*='elfsight.com'] {
	display: none !important;
}
.elfsight-app-container > a:last-child {
	display: none !important;
}

.elfsight-app-d7fecc5c-3db6-404c-9797-624937a64fde
	a[href*='elfsight.com/google-reviews-widget'] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	box-sizing: border-box;
}

body {
	background-color: var(--light-color);
	font-family: var(--body-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 164%;
	letter-spacing: 0.32px;
	color: var(--body-color);
	margin: 0;
}

p {
	color: var(--body-color);
}

a {
	color: inherit;
	text-decoration: none;
	transition: 0.3s ease-in-out;
}

a:hover {
	color: var(--primary-color);
}

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

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

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

/* 2.2 Background Color
/*----------------------------------------------*/
.bg-light {
	background-color: var(--light-color) !important;
}

.bg-primary {
	background-color: var(--primary-color) !important;
}

.bg-secondary {
	background-color: var(--secondary-color) !important;
}

.bg-gray {
	background-color: var(--bs-gray-100) !important;
}

/*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
	padding-top: 8em;
	padding-bottom: 8em;
}

.padding-medium {
	padding-top: 10em;
	padding-bottom: 10em;
}

.padding-large {
	padding-top: 12em;
	padding-bottom: 12em;
}

@media only screen and (max-width: 990px) {
	.padding-small {
		padding-top: 6em;
		padding-bottom: 6em;
	}
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
	margin-top: 8.125em;
	margin-bottom: 8.125em;
}

.margin-medium {
	margin-top: 10em;
	margin-bottom: 10em;
}

.margin-large {
	margin-top: 12em;
	margin-bottom: 12em;
}

/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--dark-color);
	font-family: var(--heading-font);
	text-transform: capitalize;
	font-weight: 600;
	letter-spacing: 0.84px;
	line-height: 115%;
}

h6 {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.3rem;
}

/* - Content width
--------------------------------------------------------------*/
.container-md {
	max-width: 1465px;
}

.container-lg {
	max-width: 1750px;
}

/* Animation */
@media (min-width: 200px) {
	.animate {
		animation-duration: 0.3s;
		-webkit-animation-duration: 0.3s;
		animation-fill-mode: both;
		-webkit-animation-fill-mode: both;
	}
}

/* Animate Slide */
@keyframes slide {
	0% {
		transform: translateY(1rem);
		opacity: 0;
	}

	100% {
		transform: translateY(0rem);
		opacity: 1;
	}

	0% {
		transform: translateY(1rem);
		opacity: 0;
	}
}

@-webkit-keyframes slide {
	0% {
		-webkit-transform: transform;
		-webkit-opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		-webkit-opacity: 1;
	}

	0% {
		-webkit-transform: translateY(1rem);
		-webkit-opacity: 0;
	}
}

.slide {
	-webkit-animation-name: slide;
	animation-name: slide;
}

/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/

.btn {
	--bs-btn-padding-x: 2rem;
	--bs-btn-padding-y: 1rem;
	--bs-btn-font-size: 1rem;
	--bs-btn-font-weight: 500;
	text-transform: uppercase;
	border-radius: 0px;
	transition: all 0.5s ease-in-out;
}

/* - Primary Buttons
--------------------------------------------------------------*/
.btn-primary {
	--bs-btn-color: var(--light-color);
	--bs-btn-bg: var(--primary-color);
	--bs-btn-border-color: var(--primary-color);
	--bs-btn-hover-color: var(--light-color);
	--bs-btn-hover-bg: var(--primary-color);
	--bs-btn-hover-border-color: var(--primary-color);
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: var(--light-color);
	--bs-btn-active-bg: var(--primary-color);
	--bs-btn-active-border-color: var(--primary-color);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--light-color);
	--bs-btn-disabled-bg: var(--primary-color);
	--bs-btn-disabled-border-color: var(--primary-color);
}

/* - Button Hover Effect
--------------------------------------------------------------*/
.btn-slide.btn-bg {
	background-color: var(--light-color);
}

.btn-slide {
	position: relative;
	display: inline-block;
	border: none;
	cursor: pointer;
	background-color: var(--secondary-color);
}

.btn-slide.hover-slide-right::before {
	top: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 3%;
	position: absolute;
	content: '';
	background-color: var(--primary-color);
	transition: 0.3s ease-in-out;
}

.btn-slide span {
	position: relative;
	display: inline-block;
	top: 0;
	left: 0;
	width: 100%;
	transition: 0.3s;
	font-weight: 600;
}

.btn-slide.hover-slide-right:hover::before {
	width: 100%;
}

.btn-slide.hover-slide-right:hover span {
	color: var(--light-color);
}

/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
	text-transform: uppercase;
	font-weight: 500;
	color: var(--dark-color);
	font-family: var(--heading-font);
}

.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:active {
	color: var(--dark-color);
	background-color: var(--bs-gray-300);
}

.dropdown-toggle::after {
	border: none;
	margin-left: 0em;
	vertical-align: 0em;
}

/* Breadcrumb
------------------------------------------------------------- */
.breadcrumb-item + .breadcrumb-item::before {
	color: var(--bs-light);
	position: relative;
}

/* Pagination
------------------------------------------------------------- */
.pagination {
	--bs-pagination-color: var(--black-color);
	--bs-pagination-hover-color: #fff;
	--bs-pagination-hover-bg: var(--primary-color);
	--bs-pagination-hover-border-color: var(--primary-color);
	--bs-pagination-focus-color: #fff;
	--bs-pagination-focus-bg: var(--primary-color);
	--bs-pagination-focus-box-shadow: none;
	--bs-pagination-active-bg: var(--primary-color);
	--bs-pagination-active-border-color: var(--primary-color);
}

/* Accordion
------------------------------------------------------------- */
.accordion {
	--bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23C62828&width=30');
	--bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23C62828&width=30');
	--bs-accordion-border-radius: 0px;
	color: var(--primary-color);
}

.accordion-button:focus {
	box-shadow: none;
}

.accordion-button:not(.collapsed) {
	background-color: transparent;
	box-shadow: none;
}

/* Form
------------------------------------------------------------- */
.form-control:focus {
	border: 1px solid #acacac;
	box-shadow: none;
}

/* Swiper
------------------------------------------------------------- */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
	.swiper-pagination-bullet {
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
	width: var(
		--swiper-pagination-bullet-width,
		var(--swiper-pagination-bullet-size, 12px)
	);
	height: var(
		--swiper-pagination-bullet-height,
		var(--swiper-pagination-bullet-size, 12px)
	);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--dark-color);
}

/* Modal Video
------------------------------------------------------------- */
.modal-dialog {
	max-width: 800px;
	margin: auto;
	height: 100vh;
	display: flex;
	align-items: center;
}

.modal-content {
	padding: 0;
	background-color: #f5f3ef;
	border: none;
	border-radius: 0;
}

/*----------------------------------------------*/
/* 4 SITE STRUCTURE */
/*----------------------------------------------*/

/* 4.1 Header
/*----------------------------------------------*/
a.nav-link {
	text-transform: capitalize;
	font-weight: 500;
	color: var(--dark-color);
	font-family: var(--heading-font);
	transition: all 0.3s ease-in-out;
}

a.nav-link::after {
	content: '';
	text-align: center;
	display: block;
	width: 0;
	height: 2px;
	background: var(--primary-color);
	transition: width 0.9s;
}

a.nav-link.active::after,
a.nav-link:focus::after,
a.nav-link:hover::after {
	width: 100%;
	transition: width 0.9s;
}

#primary-header .dropdown .search::after {
	content: none;
}

#primary-header .search-dropdown .dropdown-menu {
	width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
	min-width: 100%;
}

#primary-header .search-dropdown .dropdown-menu button {
	padding: 0 12px;
	min-height: -webkit-fill-available;
	border-radius: 0.25rem;
}

@media only screen and (max-width: 990px) {
	a.nav-link {
		font-size: 1.5rem;
	}

	a.nav-link.active::after,
	a.nav-link:focus::after,
	a.nav-link:hover::after {
		width: 0%;
	}

	a.nav-link.active,
	a.nav-link:focus,
	a.nav-link:hover {
		color: var(--primary-color) !important;
	}
}

/* 4.2 Brand Section
/*----------------------------------------------*/
img.brand-image {
	/* filter: contrast(0); */
	transition: all 0.3s ease-in;
}

img.brand-image:hover {
	filter: contrast(1);
}

/* 4.3 About Section 
/*----------------------------------------------*/
svg.play-icon {
	animation: play 1.5s alternate infinite ease-in;
}

@keyframes play {
	0% {
		transform: scale(0.8);
	}

	100% {
		transform: scale(1.1);
	}
}

/* 4.4 Services Section
/*----------------------------------------------*/
/* Jarallax */
.jarallax {
	min-height: 350px;
	transition: all 0.5s ease-in-out;
}

.service-block {
	transition: all 0.5s ease-in-out;
}

.service-block:hover .jarallax {
	opacity: 0;
}

.service-btn {
	transition: all 0.5s ease-in-out;
}

.service-block:hover .service-btn {
	color: var(--dark-color);
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

/* 4.5 Project Section
/*----------------------------------------------*/
.swiper-slide.swiper-width {
	width: auto !important;
}

.project-content .portfolio-img {
	transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-img {
	opacity: 0.3;
}

.portfolio-description {
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-description {
	opacity: 1;
}

/* 4.6 CTA Section
/*----------------------------------------------*/
.border-dotted {
	border: 2px dashed rgba(255, 255, 255, 0.5);
}

/*----------------------------------------------*/
/* 5 PAGES STYLE */
/*----------------------------------------------*/

/* 5.1 Projects Page
/*----------------------------------------------*/

button.filter-button {
	border: 0;
	background: transparent;
	text-transform: uppercase;
	transition: all 0.5s ease-in-out;
	border-radius: 20px;
}

button.filter-button.active,
button.filter-button:hover {
	color: var(--bs-light);
	background: var(--primary-color);
}

/*--------------------------------------------------------------
 5.2 Pricing page 
  --------------------------------------------------------------*/
.plan-post {
	border: 1px solid var(--secondary-color);
}

span.price-tick {
	color: var(--primary-color);
}

.price-option {
	height: 300px;
}

/*--------------------------------------------------------------
 5.3 Reviews page
--------------------------------------------------------------*/

.reviews-components {
	box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
}

iconify-icon.quote {
	font-size: 60px;
	color: var(--primary-color);
}

.rate {
	color: var(--primary-color);
}

.logo {
	max-width: 10%;
}

/* On small screens (phones) */
@media (max-width: 576px) {
	.logo {
		max-width: 25%;
	}
}

.project-content {
    width: 100%;
    height: 640px;
    overflow: hidden;
    border-radius: 12px; /* optional */
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}