:root {
    --primary-clr:#fb4913;
    --secondary-clr:#3133a2;
    --global-secondary-clr:#090A1D;
    --tertiary-clr:#f8c14a;
    --dark-clr:#000000;
    --light-clr:#ffffff;
    --global-text-color:#444552;
    --anchor-transistion:.1s linear;
    --saira-font:"Saira";
    --roboto-font:"Roboto";
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

a {
    text-decoration: none;
    cursor: pointer;
}

body{ 
    font-family: "Saira";
    padding:0;
    margin:0;
    line-height: 1.6;
    font-weight: 400;
}
p {
    font-family: var(--roboto-font);
    color:var(--global-text-color);
}

/* text color */
.text-tertiary {
    color:var(--tertiary-clr)
}
.text-dark {
    color:var(--dark-clr)
}
.text-white {
    color:var(--light-clr)
}
.text-primary-clr {
    color:var(--primary-clr)
}
.text-secondary-clr {
    color:var(--secondary-clr)
}

/* tertiary badge */
.tertiary-badge {
    background-color:var(--tertiary-clr);
    color:var(--dark-clr);
    font-size:14px;
    padding:8px 12px;
    font-weight:600;
    display: inline-block;
    margin-bottom: 25px;
}

/* secondary icon */
.secondary-icon {
    fill:var(--secondary-clr)
}
.primary-icon {
    fill:var(--primary-clr)
}
.tertiary-icon {
    fill:var(--tertiary-clr)
}

/* section title */
.section-title {
    font-weight:700;
    line-height:1.4;
    margin-bottom:15px;
}

/* header css */
header {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    z-index:1045;
}
.top-bar, .bottom-bar {
    height:50%;
    width:100%;
}
.bottom-bar{
    background-color:var(--light-clr);
}
.contact-no li a svg {
    fill:var(--primary-clr);
    transform: rotate(260deg);
    width:16px!important;
    height:26px!important;
    transition:.2s linear;
}
.contact-no li a {
    color:var(--light-clr);
    transition:.2s linear;
}
.contact-no:hover li a {
    color:var(--tertiary-clr);
}
.contact-no:hover li a svg {
    fill: var(--tertiary-clr)
}
.social-icon {
    fill:var(--light-clr);
    transition: .2s linear;
}
.social-icon:hover {
    fill:var(--tertiary-clr);
}
.navbar-brand {
    width: 112px;
    height: 100px;
    background-color:var(--light-clr);
    z-index:1;
    flex-shrink:0;
}
.menu-items {
    padding: 10px 20px;
    color:var(--dark-clr);
    transition: .2s linear;
    cursor:pointer;
    font-size:15px;
}
.menu-items:hover, .menu-items.active {
    color:var(--primary-clr);
}
.offcanvas.offcanvas-menu {
    width:60%;
    background-color:var(--global-secondary-clr);
    color:var(--light-clr)
}
.mobile-menu ul li {
    margin-bottom:10px;
}
.mobile-menu ul li a{
    color:var(--light-clr);
    opacity:.8;
    transition:var(--anchor-transistion);
}
.mobile-menu ul li a:hover{
    opacity: 1;
    color:var(--tertiary-clr)
}
/* dropdown css */
.menu-bar li a {
    display:flex;
    align-items: center;
    font-weight: 600;
}
.drop-down {
    position:relative;
}
.drop-down > a {
    position:relative;
}
.drop-down > a::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
.menu-dropdown {
    width: 12rem;
    margin: 0;
    padding: 20px 30px;
    position:absolute;
    background-color: var(--dark-clr);
    list-style-type: none;
    opacity:0;
    transition:var(--anchor-transistion);
    visibility: hidden;
}
.drop-down:hover .menu-dropdown {
    opacity:1;
    visibility: visible;
}
.menu-dropdown li a {
    margin-bottom: 10px;
    color:var(--light-clr);
    font-weight: 400;
    font-size:14px;
    transition: var(--anchor-transistion);
}
.menu-dropdown li a:hover {
    color:var(--tertiary-clr);
}

/* primary button */
.primary-btn {
    background-color:var(--primary-clr);
    border-radius:0;
    padding-left:20px;
    padding-right:20px;
    transition:.2s linear;
}
.primary-btn a, a.primary-btn {
    transition:.2s linear;
    color:var(--light-clr);
    font-weight: 600;
}
.primary-btn:hover{
    background-color: var(--tertiary-clr);
}
.primary-btn:hover a {
    color:var(--dark-clr);
}

/* hero css */
.hero-c-details{
    color:var(--light-clr);
    transition:var(--anchor-transistion);
}
.hero-c-details svg {
    fill:var(--primary-clr);
    transition:var(--anchor-transistion);
    transform: rotate(260deg);
}
.hero-c-details:hover{
    color:var(--tertiary-clr);
}
.hero-c-details:hover svg {
    fill:var(--tertiary-clr);
}
.hero-banner-heading span{
    font-weight: 600;
    font-size: 45px;
}

.hero-banner-sub-heading {
    font-weight: 300;
    max-width: 650px;
    line-height: 1.65;
}

.hero {
    height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    z-index:0;
    background-image: url('../images/hero-1.webp');
    background-size: cover;
}

.hero::after {
    content: "";
    width:100%;
    height:100%;
    background-color:#090A1D;
    opacity:.75;
    position: absolute;
    top:0;
    left:0;
    z-index:-1;
}
@media (max-width:460px){
    .hero {
        height: 90vh;
    }
    .hero-banner-heading span {
        font-size:30px
    }
}

/* about us */
/* .about-us-content-wrap {
    z-index:1;
    background-color: var(--light-clr);
}
.about-us-image-wrap {
    z-index:1;
    background-image: url("https://applicare.oxaart.com/wp-content/uploads/joyful-young-man-fixing-fridge-in-kitchen.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size:cover;
}
@media (max-width:769px){
    .about-us-image-wrap {
        height:300px!important;
    }
} */
.logo-img {
    width:50px;
    height:50px;
    background-color: var(--light-clr);
}
.secondary-light, .tertiary-light, .dark-light, .primary-light {
    z-index: 0;
}
.secondary-light::before {
    content:"";
    width:100%;
    height:100%;
    z-index:-1;
    background-color: var(--secondary-clr);
    opacity:.1;
    position: absolute;
    top:0;
    left:0;
}
.tertiary-light::before {
    content:"";
    width:100%;
    height:100%;
    z-index:-1;
    background-color: var(--tertiary-clr);
    opacity:.1;
    position: absolute;
    top:0;
    left:0;
}
.dark-light::before {
    content:"";
    width:100%;
    height:100%;
    z-index:-1;
    background-color: var(--dark-clr);
    opacity:.1;
    position: absolute;
    top:0;
    left:0;
}
.primary-light::before {
    content:"";
    width:100%;
    height:100%;
    z-index:-1;
    background-color: var(--primary-clr);
    opacity:.1;
    position: absolute;
    top:0;
    left:0;
}
.light-purple-wrap{
    background-color:#f4f4fe;
}

/* our services */
.our-services-c-details {
    color:var(--primary-clr);
    transition: var(--anchor-transistion);
}
.our-services-c-details svg{
    fill:var(--primary-clr);
    transition: var(--anchor-transistion);
}
.our-services-c-details:hover {
    color:var(--secondary-clr);
}
.our-services-c-details:hover svg{
    fill:var(--secondary-clr);
}
.service-category-box {
    background-color: var(--light-clr);
}

/* featured-project */
.featured-project {
    background-color: var(--secondary-clr);
}
.featured-project-wrap img {
    height:300px;
    object-fit: cover;
    transition: .5s linear;
}
.featured-project-wrap {
    position: relative;
    overflow:hidden;
}
.featured-project-wrap::before {
    content: "";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    background:linear-gradient(to top, var(--tertiary-clr), rgba(255, 199, 82, .5), transparent, transparent, transparent);
    opacity:0;
}
.featured-project-wrap:hover::before {
    opacity: 1;
}
.featured-project-wrap:hover img {
    transform: scale(1.2);
}
.featured-project-wrap span {
    position: absolute;
    bottom:20px;
    z-index:1;
    left:50%;
    transform: translateX(-50%) scale(0);
    font-weight:bold;
    font-size:20px;
    text-wrap: nowrap;
    transition:.5s linear;
}
.featured-project-wrap:hover span {
    transform: translateX(-50%) scale(1);
}

/* customer satifaction guranteed */
.content-wrapper .logo-img {
    width:60px;
    height:60px;
}

/* client review */
.cliennt-img {
    width: 60px;
    height: 60px;
}
.client-detail {
    background-color:var(--secondary-clr)
}
.client-detail .social-icon {
    top:20px;
    right:20px;
}
.review {
    background-color: var(--light-clr);
}
/* .client-review {
    background-image: url('https://applicare.oxaart.com/wp-content/uploads/home-appliances-household-kitchen-technics-in-appartments-.jpg');
    position: relative;
    z-index: 0;
} */
.client-review::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: .68;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.customer-img img{
    height:100%!important;
    object-fit: cover;
}

/* contact form */
.contact-form {
    background-image: url('../images/hero-3.jpg');
    position: relative;
    background-size: cover;
    z-index: 0;
}
.contact-form::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .68;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.expert-wrapper {
    background-color: var(--tertiary-clr);
}
.form-wrapper {
    background-color: var(--secondary-clr);
    padding:40px 40px;
}

/* footer */
footer {
    background-color: var(--global-secondary-clr);
    padding-top:100px;
    padding-bottom:100px;
}

.footer-img img {
    width: 94px;
    height: 94px;
    object-fit: cover;
}
@media (max-width:426px){
    footer{
        padding-top:50px;
        padding-bottom:50px;
    }
}
.info-wrap a img {
    transition:.3s linear;
}
.info-wrap a {
    overflow:hidden;
    display:inline-block
}
.info-wrap a:hover img{
    transform: scale(1.2);
}
footer h5 {
    margin-bottom:35px
}

/* terms and condition */
.terms-and-condition {
    background-color: var(--global-text-color);
}

.whatsApp-Call-To-Action {
    z-index: 99999;
    right: 1.5rem;
    bottom: 7rem;
}


.call-buton .cc-calto-action-ripple {
    overflow: hidden;
	z-index: 99999;
	position: fixed;
	right: 1.5rem;
	bottom: 2rem;
	background: #ec8b00;
	width: 3.5rem;
	height: 3.5rem;
	padding: 1rem;
	border-radius: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #ffffff;
	-webkit-animation: cc-calto-action-ripple 0.6s linear infinite;
	animation: cc-calto-action-ripple 0.6s linear infinite;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-items: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-decoration: none; }
	.call-buton .cc-calto-action-ripple i {
	  -webkit-transition: 0.3s ease;
	  transition: 0.3s ease;
	  font-size: 2.2rem; }
	.call-buton .cc-calto-action-ripple:hover i {
	  -webkit-transform: rotate(135deg);
	  transform: rotate(135deg); }
  
  @-webkit-keyframes cc-calto-action-ripple {
	0% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2); }
	100% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0); } }
  
  @keyframes cc-calto-action-ripple {
	0% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2); }
	100% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0); } }

	span.num{
		position: absolute;
    color: var(--tertiary-clr);
    left: -30%;
    bottom: -50%;
	}