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

 Theme Name:   Shaiq Uddin
 Theme URI:    https://www.shaiquddin.com
 Description:  Custom child theme built for shaiquddin.com by Crownstone Consulting Services (CCS)
 Author:       Shaiq Uddin
 Author URI:   https://www.crownstonecs.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

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


/**********************************************/
/** Top Menu Bar & Fixed Header **/
#main-header {
	border-bottom: .08rem solid #d7e1f0;
	box-shadow: 0 1px 8px #0000000d;
}

#main-header.et-fixed-header {
	border-bottom: .08rem solid #d7e1f0;
	box-shadow: 0 1px 8px #0000000d;
}

/**********************************************/
/** Anti-Breaking on Mobile **/
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: normal!important;
}

/**********************************************/
/** Vertical Align Elements **/
su-vertical-align { 
    display: flex!important; 
    flex-direction: column!important; 
    justify-content: center!important;
} 

/**********************************************/
/** Side by Side Buttons **/
.su-btn-sidebyside .et_pb_button_module_wrapper {
    display: inline-block;
	margin: 0;
}
.su-btn-sidebyside {
	text-align:center!important;
} 

/**********************************************/
/** Custom Menu Button **/
.menu-btn {
	padding: 10px!important;
	background:#0866ff!important;
	color:#ffffff!important;
	border:2px solid #0866ff!important;
	border-radius:3px;
	font-weight:bold;
	text-align:center!important;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
.menu-btn:hover {
	opacity:1!important;
	background:#275adc!important;
	color:#ffffff!important;
	border:2px solid #275adc!important;
	border-radius:3px;
}

/**********************************************/
/** Menu Opacity on Hover **/
#top-menu li a:hover {
 opacity:1!important;
}

/**********************************************/
/** Custom bullet Icon **/
.custom_bullets ul li {
  padding-left: 20px!important;
  list-style:none!important;
  margin-bottom: 10px!important;
}

.custom_bullets ul li::before {
  content: ''!important;
  display: inline-block!important;
  margin-right: 7px!important;
  margin-left: -30px!important;
  padding-right: 5px!important;
  font-family:'ETmodules'!important;
  font-size: 1.2em!important;
  vertical-align: middle!important;
}

/*Square Check Icon*/
.custom_bullets_squarecheck ul li::before {
  content: "\5a"!important;
}
/*Rounded Square Icon*/
.custom_bullets_roundsquare ul li::before {
  content: "\5e"!important;
}
/*Circle Square Icon*/
.custom_bullets_circlecheck ul li::before {
  content: "\52"!important;
}

/**********************************************/
/** Center Footer Credits **/
#footer-info {text-align: center; width: 100%;} 

/**********************************************/
/** Apply the link underline and other styling **/
.et_pb_text a {
	background-image: linear-gradient(120deg, #0866ff 0%, #0866ff 100%)!important;
	background-repeat: no-repeat!important;
	background-size: 100% 2px!important;
	background-position: 0 100%!important;
	transition: background-size 0.25s ease-in-out!important;
	color: inherit !important;
	font-weight:600 !important;
}

/*animate the line into a background on hover*/
.et_pb_text a:hover {
	background-size: 100% 100%!important;
	color: #ffffff !important;
	transition: ease all .3s!important;
}

/**********************************************/
/** Email Optin with One Field - Button on Side **/
@media (min-width: 767px) {
	/*set the width of the button*/
	.et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
		flex-basis: 200px !important;
	}
	/*set the width of the input field minus the width of the button*/
	.et_pb_newsletter_form .et_pb_newsletter_field {
		flex-basis: calc(100% - 210px) !important;
	}
}

/**********************************************/
/** GRID STYLE BLOG POSTS **/

/** Blog Image Zoom & Rotate **/
/*adjust the image spacing*/
.et_pb_post .entry-featured-image-url {
	margin: 0;
	padding-top: 50%;
	display: block;
}

.et_pb_post .entry-featured-image-url img {
	position: absolute;
	height: 100%!important;
	width: 100%!important;
	bottom: 0;
	object-fit: cover;
}

/*keep the zoomed in image inside the image frame*/
.et_pb_blog_grid .et_pb_image_container {
	overflow: hidden;
}

/*add a smooth transition for the zoom effect */
.et_pb_blog_grid .et_pb_image_container img {
	transition: all 0.95s ease;
	-moz-transition: all 0.95s ease;
	-webkit-transition: all 0.95s ease;
}

/*make the featured image zoom in on hover */
.et_pb_blog_grid .et_pb_post:hover img {
	transform: scale(1.05) /*rotate(-1deg)*/;
	-moz-transform: scale(1.05) /*rotate(-1deg)*/;
	-webkit-transform: scale(1.05) /*rotate(-1deg)*/;
}

/* Style Read More text as a button on Grid Blog */
.et_pb_blog_grid .et_pb_post a.more-link {
	text-transform:capitalize!important;
	font-size: 16px;
	font-weight:400;
	border-bottom: 2px solid #0865FE;
}

/** Add Hidden Screen Reader Text on Read More links for SEO **/
.screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/**********************************************/
/** Change color of site-wide text highlight **/
::-moz-selection {
  color: #ffffff;
  background: #0866ff!important;
}

::selection {
  color: #ffffff;
  background: #0866ff!important;
}

/**********************************************/
/** Change Mobile Menu Hamburger Icon to X **/
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

/** Rotate the Mobile Menu icon on click **/
.mobile_menu_bar:before {
	transition: all .4s ease;
	transform: rotate(0deg);
	display: block;
}

.mobile_nav.opened .mobile_menu_bar::before {
	transition: all .4s ease;
	transform: rotate(90deg);
	display: block;
}

/**********************************************/
/** FEATURED STYLE BLOG POST **/

/*add media query so changes only affect tablet and desktop*/
@media (min-width: 767px) {

/*set the Featured image width*/
.featured-blog .entry-featured-image-url  {
width: 40%;
float: left;
margin-bottom: 0!important;
/*Featured blog image aspect ratio square 1:1*/
padding-top: 20%;
display: block;
}

/*Featured blog image aspect ratio square 1:1*/
.featured-blog .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;	
border-radius:3px!important;
}

/*keep the zoomed in image inside the image frame*/
.featured-blog .et_pb_image_container {
	overflow: hidden!important;
}

/*set the details width*/
.featured-blog .entry-title,
.featured-blog .post-meta,
.featured-blog .post-content {
width: 60%;
float: left;
padding-left: 30px;
}
}

/*style the individual posts*/
.featured-blog .et_pb_post {
background: #FFFFFF!important;
box-shadow: 0px 2px 20px 0px rgba(160,190,212,0.25);  
border-radius: 3px;
padding-top: 50px;
padding-bottom: 50px;
padding-left:20px;
padding-right:20px;
}

/** Style Read More text as a button on Featured Blog **/
.featured-blog .et_pb_post a.more-link {
	text-transform:capitalize!important;
}

/**********************************************/
/** Menu text before Mobile Hamburger **/
#et_mobile_nav_menu:before {
    content: 'Menu';
    font-size: 16px;
    position: absolute !important;
    bottom: 29px;
    right: 40px;
    color: #000000;
}

/**********************************************/
/** Greyscale Client Logos **/
.client-logo {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    opacity: 1;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}
 
.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    margin-top: -5px;
}

/**********************************************/
/*Equalize Blog Columns*/
.pa-blog-equal-height .pa-auto-height {
    height: auto !important;
}
.pa-blog-equal-height .pa-auto-margin {
    margin-top: 20px !important;
}