/*
Theme Name: ABS
Theme URI: https://www.graceitservices.com/
Author: Justice Kwesi Akuffo
Author URI: https://www.graceitservices.com/
GitHub Theme URI: https://www.graceitservices.com/
Description: The renowned WordPress theme for Grace IT Services Client.
Version: 0.0.1
Requires at least: 5.0
Tested up to: 6.1
Requires PHP: 5.2
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: understrap
Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, translation-ready, block-styles, wide-blocks, editor-style, threaded-comments, accessibility-ready

Understrap WordPress Theme, (C) 2021 Howard Development & Consulting, LLC
Understrap is distributed under the terms of the GNU GPL.

Resource Licenses:
Understrap is based on Underscores https://underscores.me/, (C) Automattic, Inc.
Font Awesome: https://fontawesome.com/v4.7/license/ (Font: SIL OFL 1.1, (S)CSS: MIT)
Bootstrap: https://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (MIT)
WP Bootstrap Navwalker by Edward McIntyre & William Patton: https://github.com/twittem/wp-bootstrap-navwalker (GNU GPLv3)
*/

/*-------------------------------------------------------------
	#Import All Link CSS - 0.0.1
--------------------------------------------------------------*/
@import url('assets/css/animate.min.css');
@import url('assets/css/owl.carousel.min.css');
@import url('assets/css/bootstrap.min.css');
@import url('assets/css/custom.css');

/*-------------------------------------------------------------
	# Import Fonts - 0.0.2 
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Poppins&display=swap');
  
/*-------------------------------------------------------------
	#Root CSS - 0.0.2 
--------------------------------------------------------------*/
:root {
	--primary-color			: 	#3456a8;
	--primary-close-color	: 	#5a1e22;
	--second-color			: 	#d6202d;
	--white-color			:	white;
	--white-color2			:	#ffffff;
	--black-color			:	#000000;
	--light-white-color		:	#FAFAFA;
	--gray-color1			:	#f3f3f3;
	--gray-color2			:	#e6e6e6;
	--gray-color3			:	#eeeeee;
	--gray-color4			:	#B2B2B2;
	--gray-color5			:	#7E7E7E;
	--gray-color6			:	#F4F4F2;
	--gray-color7			:	#dee2e6;	
	--dsblue-color			:	#003348;
	--light-black-color1	:	#222222;
	--light-black-color2	:	#555555;
	--light-black-color3	:	#191919;
	--light-black-color4	:	#888888;
	--light-black-color4	:	#888888;
	--google-map-color		:	#dddddd;
	--youtube-color			:	#b31217;
	--facebook-color		:	#3b5998;
	--twitter-color			:	#55acee;
	--whatsapp-color		:	#075e54;
	--googleplus-color		:	#dd4b39;
	--linkedin-color		:	#0077B5;
	--instagram-color		:	#6651C3;
	--soundcloud-color		:	#6651C3;
	--reverbnation-color	:	#6651C3;
	--audiomack-color		:	#6651C3;
	--author-color			:	#7f8070;
	--transparent-color		:	transparent;
}

/*--------------------------------------------------------------
#1 General
--------------------------------------------------------------*/
body {
	font-family: 'Open Sans', sans-serif !important;
}
.sfont {
	font-family: 'Sofia', cursive;
} 
.mfont{
	font-family: 'Poppins', sans-serif !important;
}
a {
  color: var(--primary-color);
}

a:hover {
  color: var(--second-color);
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
  font-family: 'Playfair Display', sans-serif;
}
/*-------------------------------------------------------------
	#Typo - Texts CSS - 0.0.7 
--------------------------------------------------------------*/
.text-primary {
	color: var(--primary-color) !important;
} 
.text-secondary {
	color: var(--second-color) !important;
}
.text-white {
	color: var(--white-color);
}
.text-white2 {
	color: var(--white-color2);
}
.text-light-white {
	color: var(--light-white-color);
}
.text-gray-color1 {
	color: var(--gray-color1);
}
.text-gray-color2 {
	color: var(--gray-color2);
}
.text-gray-color3 {
	color: var(--gray-color3);
}
.text-gray-color4 {
	color: var(--gray-color4);
}
.text-gray-color5 {
	color: var(--gray-color5);
}
.text-gmap-color {
	color: var(--google-map-color);
}
.text-black {
	color: var(--black-color);
}
.text-light-black1 {
	color: var(--light-black-color1);
}
.text-light-black2 {
	color: var(--light-black-color2);
}
.text-light-black3 {
	color: var(--light-black-color3);
}
.text-light-black4 {
	color: var(--light-black-color4);
}
/*-------------------------------------------------------------
	#Backgrounds, Margins & Paddings CSS - 0.0.7 
--------------------------------------------------------------*/
.btn-primary {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--second-color);
  border-color: var(--second-color);
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #fff;
  background-color: var(--second-color);
  border-color: var(--second-color);
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.list-check li::before {
  color: var(--primary-color);
}

.bg-primary {
	background-color: var(--primary-color) !important;
}
.primary_bg {
	background-color: var(--primary-color);
}
.second_bg {
	background-color: var(--second-color);
}
.white_bg {
	background-color: var(--white-color);
}
.light-white_bg {
	background-color: var(--light-white-color);
}
.gray1_bg {
	background-color: var(--gray-color1);
}
.gray2_bg{
	background-color:  var(--gray-color1);
}
.gray3_bg{
	background-color:  var(--gray-color2);
}
.light-black1_bg{
	background:  var(--light-black-color1);
}
.light-black2_bg{
	background-color:  var(--light-black-color2);
}
.light-black3_bg{
	background-color:  var(--light-black-color3);
}
.black1_bg{
	background-color:  var(--black-color);
}
.author-color_bg{
	background-color:  var(--author-color);
}

/*** Courses ***/
.courses {
    min-height: 30vh;
    background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url(assets/img/defaultBanner1920.jpg) center center no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.page-header {
    background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url(assets/img/defaultBanner1920.jpg) center center no-repeat;
    background-size: cover;
}
.page-header2 {
    background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(assets/img/defaultBanner1920.jpg) center center no-repeat;
    background-size: cover;
}
.page-header3 {
    background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), url(assets/img/programmes.jpg) center center no-repeat;
    background-size: cover;
}
.page-header4 {
    background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url(assets/img/admissions.jpg) center center no-repeat;
    background-size: cover;
}
.page-header5 {
    background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url(assets/img/contact.jpg) center center no-repeat;
    background-size: cover;
}
.bcrumb {
    background: linear-gradient(rgba(0, 0, 0, .20), rgba(0, 0, 0, .20)), url(assets/img/breadcrumb.jpg) center center no-repeat;
    background-size: cover;
}
.py-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.pt-6 {
    padding-top: 6rem;
}
.facts2 {
	position: relative;
	margin-top: 50px;
	z-index: 1;
}
/*** Facts ***/
@media (max-width: 991.98px) {
    .facts2 {
        position: relative;
        margin-top: -110px;
        z-index: 1;
    }
}
.nav-tabs .nav-link {
	background-color: var(--gray-color1);
	color: var(--primary-color);
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.nav-tabs .nav-link.active {
	background-color: var(--white-color);
	color: var(--primary-color);
}

.courses-item .courses-overlay {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}
/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, .15);
    z-index: 1;
}
.courses-item:hover .courses-overlay {
    height: 100%;
    opacity: 1;
}
.btn-link{
	color: var(--primary-color);
}
.btn-link:hover{
	color: var(--primary-close-color);
}
.btn-light{
	border-color: var(--white-color);
}
.btn-light:hover{
	color: var(--white-color);
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}
.whyabsfooter a {
    color: var(--light);
	transition: .3s;
}
.whyabsfooter a:hover {
    color: var(--primary-color);
	    letter-spacing: 1px;
}
.link a {
    color: var(--white-color);
}
.link a:hover {
    color: var(--primary-color);
}
.breadcrumb-item.active{
	color: var(--primary-color) !important;
}
.pover a {
	transition: .3s;
}
.pover a:hover {
	letter-spacing: 1px;
}
.bgTextWhite a {
	color: var(--white-color);
	transition: .3s;
}
.bgTextWhite a:hover {
	color: var(--gray-color4);
	letter-spacing: 1px;
}
.wpcf7-form-control-wrap{
	display:block;
	width:100%;
	padding:.375rem .75rem;
	font-size:1rem;
	font-weight:400;
	line-height:1.5;
	color:#757575;
	background-color:#fff;
	background-clip:padding-box;
	border:1px solid #F3F6F8;
	appearance:none;
	border-radius:0px;
	transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
	background-color:#F3F6F8 !important;
}
.dropdown-item {
	width: 200px;
  overflow: hidden; /* or overflow: auto; to add a scrollbar when needed */
  white-space: normal;
}
.dropdown-item.active,.dropdown-item:active{
	color:#fff;
	text-decoration:none;
	background-color: var(--primary-color) !important;
}
.navbar-nav .active a {
    color: var(--primary-color) !important;
}

/*-------------------------------------------------------------
	#Profile/ CSS - 0.1.9
--------------------------------------------------------------*/
.about-me:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.relative {
	position: relative;
}
.lined-head {
    position: relative;
    padding-left: 62px;
}
.lined-head:before {
	background: var(--primary-color);
    position: absolute;
    content: close-quote;
    height: 2px;
    width: 40px;
    left: 0;
    top: 50%;
}
.experience li {
    padding-left: 86px;
    position: relative;
}
.experience li .dates {
    position: absolute;
    left: 0;
    top: 2px;
}
.experience li:not(:last-child) {
    margin-bottom: 30px;
}
.about-image {
    max-width: 474px;
}
.about-image img:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	transition: all 1s;
	padding:10px !important;
	margin-bottom: 15px !important;
}
.user-exprnce {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.user-exprnce h1 {
	text-shadow: 0.1px 0.1px var(--white-color);
	font-size: 85px;
	margin-left: 13px;
}
.user-exprnce h4 {
	text-shadow: 1px 1px var(--black-color);
	margin-left: 20px;
}
.introHighlight {
    border-left: 4px solid var(--primary-color);
    position: relative;
	padding-left: 10px;
}
.introHighlight:before {
    position: absolute;
    content: close-quote;
    width: 4px;
    bottom: 0;
    left: 0;
    top: 0;
}
.dotList li {
    font-size: 14px;
    font-weight: 400;
    line-height: 2;
    position: relative;
    padding-left: 25px;
}
.dotList li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f192";
    position: absolute;
    left: 0;
    top: 0px;
	color: var(--primary-color);
}
.ruthList li {
    font-size: 14px;
    font-weight: 400;
    line-height: 2;
    position: relative;
    padding-left: 25px;
}
.ruthList li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f192";
    position: absolute;
    left: 0;
    top: 0px;
	color: var(--primary-color);
}
.imgHover img {
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	transition: all 1s;
}
.imgHover img:hover {
	transition: all 1s;
	margin: 1rem !important;
	border-radius: 10px;
}
.accordion-button {
	color: var(--primary-color);
}
.accordion-button:not(.collapsed) {
	color: var(--primary-color);
	background-color: var(--gray-color1);
}
.accordion-button:focus {
	border-color: var(--primary-color) !important;
}
.accordion-button:focus {
	border-color: var(--primary-color) !important;
}
#profiles {
	padding: 60px 0 30px 0;
}
#profiles .profile {
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}
#profiles .profile .details {
	background: rgba(6, 12, 34, 0.76);
	position: absolute;
	left: 0;
	bottom: -30px;
	right: 0;
	text-align: center;
	padding-top: 10px;
	transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
#profiles .profile .details h3 {
  color: var(--white-color);
  font-size: 16px;
  margin-bottom: 5px;
}
#profiles .profile .details p {
  color: var(--white-color);
  font-size: 12px;
  margin-bottom: 5px;
}
#profiles .profile .details .social {
  height: 30px;
}
#profiles .profile .details a {
  color: var(--primary-color) !important;
}
#profiles .profile .details a:hover {
  color: var(--white-color) !important;
}
#profiles .profile:hover .details {
  bottom: 0;
}
#profiles-details {
  padding: 60px 0;
}
#profiles-details .details h2 {
  color: var(--color-primary);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
}
#profiles-details .details .social {
  margin-bottom: 10px;
}
#profiles-details .details .social a {
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding-top: 9px;
}
#profiles-details .details p {
	font-size: 16px;
	margin-bottom: 10px;
}
.profile:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	transition: all 1s;
}