/*
Template: Crediblia
Author: Modina Theme
Author URI: https://themeforest.net/user/modinatheme/
Description: IT Solution & Technology HTML  Template
Version: 1.2.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

Main Style file-> assets/css/style.css 

All the SCSS File in SCSS Folder of Assets Folder. You can read the doc file also for better understand.

// BASIC
@import 'basic';

// MIXIN
@import 'variables';

// TYPOGRAPHY
@import 'typography';

// MIX
@import 'mix';

// HELPER
@import 'helper';

// ICON FONTS
@import 'icon';

// ANIMATION
@import 'animation';

// Button 
@import 'btn';

// Colors 
@import 'colors';

// Preloader 
@import 'preloader';

/* ----------------------------------
    Template Section Styles
 ------------------------------------*/

 /* // Menu - Header Section 
 @import 'header';
 
 // Hero Slide - Section 
 @import 'hero';
 
 // Section Title - Heading 
 @import 'section';
 
 // About - Section 
 @import 'about';
 
 // Features - Section 
 @import 'features';
 
 // services - Section 
 @import 'services';
 
 // testimonial - Section 
 @import 'testimonial';
 
 // Portfolio - Cases - Section 
 @import 'project';
 
 // Price Table - Section 
 @import 'price';
 
 // Call To Action - Section 
 @import 'cta';
 
 // Content Block - Section 
 @import 'contentblock';
 
 // team - Section 
 @import 'team';
 
 // funfact - Section 
 @import 'funfact';
 
 // FAQ - Section 
 @import 'faq';
 
 // Blog - Section 
 @import 'blog';
 
 // Contact Us - Section 
 @import 'contact';
 
 // footer - Section 
 @import 'footer';n facts */

/* Remove purple overlay from the About Us banner */
.page-banner-wrap::before{
  background: transparent !important;
  opacity: 0 !important;
  display: none !important; /* ensures the overlay doesn't render at all */
}

/* (Optional) keep the text readable over your photo */
.page-banner-wrap .page-heading h1,
.page-banner-wrap .breadcrumb,
.page-banner-wrap .breadcrumb a {
  color: #fff !important;       /* set to #111 if your photo is very light */
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}


/* Kill ALL overlays on the About banner */
.page-banner-wrap::before,
.page-banner-wrap::after {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* Some themes also tint via the helper class on the same node */
.page-banner-wrap.bg-cover::before,
.page-banner-wrap.bg-cover::after {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* Make sure no blend/filter is tinting the image */
.page-banner-wrap {
  background-blend-mode: normal !important;
  filter: none !important;
}

/* Keep text readable on the photo */
.page-banner-wrap .page-heading h1,
.page-banner-wrap .breadcrumb,
.page-banner-wrap .breadcrumb a {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* ---- Catchy color tint ONLY on About page ---- */

/* Re-enable a (nice) overlay just for About */
.about-hero { position: relative; overflow: hidden; }

.about-hero::before {
  content: "";
  position: absolute; inset: 0;
  /* Pick ONE gradient (uncomment one) */

/* Ocean (techy blue→teal) */
  background: linear-gradient(135deg, rgba(0,108,255,.35), rgba(0,199,190,.35));

/* Sunset (modern magenta→violet) */
/* background: linear-gradient(135deg, rgba(255,0,153,.30), rgba(124,77,255,.30)); */

/* Lime-Teal (fresh green→teal) */
/* background: linear-gradient(135deg, rgba(0,190,120,.30), rgba(0,180,200,.30)); */

  pointer-events: none;
  z-index: 0;
}

/* Make sure our previous global “remove overlay” rules don’t kill this one */
body .about-hero::before { display: block !important; opacity: 1 !important; background-blend-mode: normal !important; }

/* Keep heading crisp above the tint */
.about-hero .page-heading { position: relative; z-index: 1; }
.about-hero .page-heading h1{
  color: #fff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.35);
}