/***************************************
========================================

	Author Name   : Md. Belal Hossain
	This is HTML5 template
	Template Name : Miraz Personal Portfolio HTML5 Template
	Version: 1.0
	
****************************************
=======================================/

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

 ==> Table Of Content

	01 Basics
	02 Buttons
	03 Header
	04 Banner
	05 About
	06 Service
	07 cta 
	08 Works
	09 Counter
	10 Resume
	11 Testimonial
	12 Blog
	13 Contact
	14 Footer
	15 Top-control
 

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


/* ----------------------------------------------------------------
    [ 01 Start Basics ]
-----------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  list-style: none;
  word-wrap: break-word;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #333333;
    overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6{
	color: #333333;
	font-weight: 600;
}
img{
	max-width: 100%;
	height: auto;
}
ul{
	padding: 0;
	list-style: none;
}
p {	
	font-weight: 400;
	font-family: 'Poppins', sans-serif;
    margin: 0;
    font-size: 15px;
    color: #333333;
    letter-spacing: 0;
}
a:hover{
	text-decoration: none;
	outline: none;
}
.text_white{
	color: #fff;
}
.padding_0{
	padding: 0;
}
.dark_bg{
	background-color: #111418 ;
}
/* START PRELOADER DESIGN */
.preloader {
	background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;	
}
.spinner {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	font-size: 10px;
	text-indent: -12345px;
	z-index: 10000;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f7c500 ;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.dark_preloader .double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
/* END PRELOADER DESIGN */


/* ----------------------------------------------------------------
    [ 15 Start Top-control ]
-----------------------------------------------------------------*/
.topcontrol {
    background: #f7c500 none repeat scroll 0 0;
    border-radius: 30px;
    margin-bottom: 80px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
	border: 1px solid #f7c500;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    height: 40px;
    opacity: 1;
    filter: alpha(opacity=100);
    padding: 6px 10px;
    position: fixed;
    margin-right: 10px;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 40px;
    z-index: 99;
}
.topcontrol:hover {
    background: transparent;
	border: 1px solid #f7c500;
    color: #f7c500;
}
/* ---------------------------------------------------------------
    [ End Top-control ]
-----------------------------------------------------------------*/

/* Start Section-Padding */
.section_padding{
	padding: 80px 0;
}
/* End Section-Padding */

/* Start Section-Heading */
.section_heading{
    padding-bottom: 80px;
}
.section_heading h2{
    font-size: 42px;
    font-weight: bold;
	text-transform: capitalize;
    color: #222;
    margin-top: 5px;
    margin-bottom: 10px;
}
.dark_bg .section_heading h2{
	color: #fff;
}
.section_heading .sm_border {
    display: block;
    height: 2px;
    width: 70px;
    margin-bottom: 15px;
    bottom: -5px;
    position: relative;
    left: 50%;
    background-color: #f7c500;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.section_heading span{
	font-weight: bold;
	color: #f7c500;
}
/* End Section-Heading */

/* ----------------------------------------------------------------
    [ End Basics ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
    [ 02 Start Buttons ]
-----------------------------------------------------------------*/
/* Start Btn-Style */
.main_btn{
    color: #fff;
    font-size: 13px;
    margin-top: 30px;
	border-radius: 30px;
    text-transform: capitalize;
    padding: 15px 30px;
    letter-spacing: 0.6px;
	font-weight: 600;
    background: #f7c500;
    line-height: 10px;
	border: 1px solid #f7c500;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out 0s;
}
.main_btn:hover{
	background: transparent;
	border: 1px solid #f7c500;
    color: #f7c500;
}
.blog-info .blog_btn {
    padding: 20px 30px;
}
/* ----------------------------------------------------------------
    [ End Buttons ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
    [ 03 Start Header ]
-----------------------------------------------------------------*/
.navbar-default {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 0;
    background: #fff;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}
.navbar-brand p{
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
    color: #222;
}
.dark_bg_menu .navbar-brand p{
	color: #fff;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: #fff;
}
.menu-top { background: rgba(0, 0, 0, 0) none repeat scroll 0 0 }
.navbar-default .navbar-nav>li>a{
    color: #222;
    font-size: 18px;
    font-weight: 600;
	margin-right: 3px; 
    text-transform: capitalize;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.navbar-default.dark_bg_menu .navbar-nav>li>a{
	color: #fff !important;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus{
    color: #f7c500;
}
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus{
    color: #333333 !important;
    background-color: transparent;
}
.navbar-default.dark_bg_menu .navbar-nav>.active>a,
.navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus{
	color: #fff !important;
}
.mobile-nav{
	display:none;
}
.navbar-default.menu-shrink {
    background-color: #fff;
    box-shadow: 0 10px 15px rgba(25,25,25,0.1);
    padding: 10px 0;
    width: 100%;
    animation: fadeInDown 1s both 0.2s;
}
.navbar-default.dark_bg_menu.menu-shrink{
	background-color: #111;
    box-shadow: 0 10px 15px rgba(25,25,25,0.1);
    padding: 10px 0;
    width: 100%;
    animation: fadeInDown 1s both 0.2s;
}
.navbar-default.menu-shrink .navbar-brand p{
    color: #f7c500;
}
.navbar-default.menu-shrink li a { 
	color: #222; 
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.navbar-default.menu-shrink li a:hover { color: #f7c500 !important }
.navbar-default.menu-shrink .navbar-nav>.active>a, 
.navbar-default.menu-shrink .navbar-nav>.active>a:hover,
.navbar-default.menu-shrink .navbar-nav>.active>a:focus{
    color: #f7c500 !important;
    background-color: transparent;
}
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fff }
.navbar-default .navbar-toggle .icon-bar { background-color: #f7c500 }
/* ----------------------------------------------------------------
     [ End Header ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
     [ 04 Start Banner ]
-----------------------------------------------------------------*/
.main_banner{
	height: 700px;
	background-size: cover;
	background-repeat: no-repeat;
}
.banner_content{
	margin-top: 50%;
}
.banner_content strong {
	text-transform: capitalize;
    color: #f7c500;
    font-size: 30px;
}
.banner_content h1 {
    color: #222;
    font-size: 50px;
	text-transform: capitalize;
    margin: 15px 0 10px;
}
.dark_bg .banner_content h1{
	color: #fff;
}
.banner_content h1 span .fw_600{
	font-weight: 600;
}
.banner_content h1 span .fw_300{
	font-weight: 600;
}
.banner_social_link{
	margin-top: 25px;
}
.banner_social_link li {
    display: inline-block;
    margin-right: 12px;
}
.banner_social_link li a{
	color: #222;
	border: 1px solid #222;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	text-align: center;
	display: inline-block;
	font-size: 14px;
	transition: .5s;
}
.dark_bg .banner_social_link li a{
	color: #fff;
	border: 1px solid #fff;
}
.banner_social_link li a:hover{
	background: #f7c500 ;
	border-color: #f7c500;
	color: #fff;
}
.dark_bg .banner_social_link li a:hover{
	background: #f7c500 ;
	border-color: #f7c500;
	color: #fff;
}
.banner_content p{
    color: #333333;
	font-size: 14px;
    padding-bottom: 0;
    max-width: 100%;
}
.dark_bg .banner_content p{
	color: #fff;
}
.banner-images img{
	margin: 100px 0px 0px 30px;
}
/* ----------------------------------------------------------------
    [ End Banner ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
    [ 05 Start About ]
-----------------------------------------------------------------*/
.about_image img{
	
}
.about_content_area{
	margin: 40px 0px 0px 0px;
}
.single_about h4{
    font-size: 30px;
	text-transform: capitalize;
    font-weight: 600;
    margin: 0 0 20px;
}
.dark_bg .single_about h4{
	color: #fff;
}
.dark_bg .about_content_area p{
	color: #fff;
}
.about_details {
    margin-top: 20px;
}
.about_details li {
	color: #333;
	display: inline-block;
	margin-top: 15px;
	width: 49%;
}
.about_details span {
    color: #222;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
    width: 25%;
}
.dark_bg .about_details span{
	color: #fff;
}
.ct_about{
	margin: 6px 0;
}
.dark_bg .ct_about{
	color: #fff;
}
.ct_about span i{
	margin-right: 5px;
}
.single_about a i{
	margin-right: 20px;
	padding-right: 20px;
	border-right: 1px solid #ddd;
}

/* ----------------------------------------------------------------
    [ End About ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
    [ 06 Start Service ]
-----------------------------------------------------------------*/
.single-service{
    padding: 40px 30px;
	background-color: #f7f8fe;
    margin-bottom: 30px;
    transition: all 0.4s ease;
}
.dark_bg .single-service{
	background: #212529;
	border-bottom: 4px solid #f7c500;
}
.single-service i{
	background: #fff;
	width: 60px;
    height: 60px;
	line-height: 60px;
	border-radius: 30px;
	text-align: center;
	transition: all 0.4s ease;
    font-size: 25px;
    display: inline-block;
    color: #f7c500;
}
.single-service:hover i{
	background: #f7c500;
	color: #fff;
}
.single-service h4{
    font-size: 25px;
    margin-top: 30px;
    text-transform: capitalize;
    color: #222;
    font-weight: bold;
	transition: all 0.4s ease;
}
.dark_bg .single-service h4{
	color: #fff;
}
.single-service p{
	transition: all 0.4s ease;
	margin-top: 15px;
}
.dark_bg .single-service p{
	color: #fff;
}
/* ----------------------------------------------------------------
    [ End Service ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 08 Start Works ]
-----------------------------------------------------------------*/
.work_filter ul{
	padding-bottom: 30px;
    list-style: none;
}
.work_filter ul li{
	font-weight: 600;
	text-transform: capitalize;
	display: inline-block;
	cursor: pointer;
	font-size: 16px;
	color: #222;
	border-radius: 50px;
	padding: 7px 25px;
	letter-spacing: 1px;
	background: transparent;
    margin: 0 5px 20px;
    transition: all .3s ease-in-out;
}
.dark_bg .work_filter ul li{
	color: #fff;
}
.work_filter ul li:hover{
	background: #f7c500;
    color: #fff;
}
.work_filter .active{
	color: #fff;
	background: #f7c500;
	border-color: #f7c500;
}
.work_content_area .item-img{
	position: relative;
	margin-bottom: 30px;
	-webkit-transition: all .4s;
	transition: all .4s;
}
.work_content_area .item-img:hover{
	-webkit-box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
	box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
}
.work_content_area .item-img:hover .item-img-overlay {
	visibility: visible;
	opacity: 1;
}
.overlay-info{
	margin-top: 50px;
}
.work_content_area .item-img-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	padding: 30px;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: 2s;
}
.work_content_area .item-img-overlay .icon{
	position: absolute;
	right: 170px;
	bottom: 85px;
	text-align: center;
	font-size: 20px;
	color: #fff;
}
.work_content_area .item-img-overlay h5{
	color: #fff;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
	text-transform: capitalize;
	margin-top: 5px;
	transition: 2s;
}
.work_content_area:hover .item-img-overlay h5{
	animation: fadeInDown 1000ms ease-in-out;
}
.work_content_area .item-img-overlay p {
	color: #fff;
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	transition: 2s;
	margin: 10px 10px 10px 10px;
}
.work_content_area:hover .item-img-overlay p{
	animation: fadeInDown 1300ms ease-in-out;
}
.work_content_area:hover a{
	animation: fadeInDown 700ms ease-in-out;
}
/* ----------------------------------------------------------------
    [ End Works ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
    [ 09 Start Counter ]
-----------------------------------------------------------------*/
.single_counter{
	background: #fafafa;
	box-shadow: 0 1px 30px rgba(255, 255, 255, 0.2);
	padding: 5px 10px 30px 0px;
}
.dark_bg .single_counter{
	background: #212529;
	box-shadow: 0 0px 0px rgba(255, 255, 255, 0.2);
}
.single_counter h3{
	color: #f7c500;
	font-size: 30px;
}
.single_counter span{
	font-size: 30px;
	font-weight: 600;
}
.single_counter h5 {
    font-size: 16px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 0;
}
.dark_bg .single_counter h5{
	color: #fff;
}
/* ----------------------------------------------------------------
    [ End Counter ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
    [ 12 Start Blog ]
-----------------------------------------------------------------*/
.single_blog{
	margin-bottom: 30px;
}
.blog-thumb{
	background: transparent;
	-webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	text-align: left;
	margin-bottom: 30px;
}
.blog-thumb small{
	color: #f7c500;
	font-weight: 500;
	display: block;
}
.blog-thumb small .fa{
	margin-right: 5px;
}
.blog-thumb small,
.blog-thumb small + span{
	display: inline-block;
	vertical-align: middle;
	margin: 0px 0px 10px 0px;
}
.blog-thumb small + span{
	color: #222;
	font-size: 10px;
	font-weight: 600;
	text-transform: capitalize;
}
.dark_bg  .blog-thumb small + span{
	color: #fff;
}
.blog-thumb h4 {
	color: #222;
	text-transform: capitalize;
    font-size: 16px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.dark_bg .blog-thumb h4{
	color: #fff;
}
.single_blog:hover .blog-thumb h4{
	color: #f7c500;
}
.dark_bg .blog-thumb p{
	color: #fff;
}
#blog-detail h2 {
	padding: 25px 0 10px 0;
}
.blog-info {
	box-shadow: 0 1px 30px rgba(255, 255, 255, 0.2);
	padding: 15px 30px;
}
.blog-info .blog_btn{
	color: #222;
    font-size: 12px;
    margin-top: 10px;
    text-transform: capitalize;
	background: transparent;
	border: none;
	font-weight: 500;
    transition: all 0.4s ease-in-out 0s;
	padding: 10px 0px;
}
.dark_bg .blog-info .blog_btn{
	color: #fff;
}
.blog-info .blog_btn:hover{
	color: #f7c500;
}
/* ----------------------------------------------------------------
    [ End Blog ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 13 Start Contact ]
-----------------------------------------------------------------*/
.form .form-group input{
	background: transparent;
	border-color: #e3e3e3;
    height: 40px;
    border-radius: 0;
	box-shadow: none;
}
.form .form-group input:focus{
	border-color: #f7c500;
}
.dark_bg .form .form-group input:focus{
	border-color: #f7c500;
	color: #fff;
}
.form .form-group textarea{
	background: transparent;
	border-color: #e3e3e3;
	margin-top: 10px;
	padding-bottom: 5%;
    border-radius: 0;
	box-shadow: none;
}
.form .form-group textarea:focus{
	border-color: #f7c500;
}
.dark_bg .form .form-group textarea:focus{
	border-color: #f7c500;
	color: #fff;
}
/* ----------------------------------------------------------------
    [ End Contact ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
    [ 14 Start Footer ]
-----------------------------------------------------------------*/
.footer {
    padding: 30px 0 20px;
    background: #212529;
}
.copy-text p{
	color: #fff;
}
/* ----------------------------------------------------------------
    [ End Footer ]
-----------------------------------------------------------------*/