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

Template Name:  Mouri - Personal Responsive Bootstrap Template
Author: MouriThemes
Version: 1.0
Design and Developed by: Manash Kanti Sarker

NB: This is the main stylesheet of this theme.

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

/*
Table of content

1. Default css
2. Preloader css
3. Nav area css
4. Mouse Animate css
5. Banner area css
6. About area css
7. Services area css
8. Portfolio area css
9. Testimonial area css
10. Contact area css
11. Footer area css

*/


/*---------- 1. Default css starts ------------*/

html,body{
    height: 100%;
}

body{
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 100%;
    font-size: 15px;
    line-height: 1.5;
    color: #333333;
    font-weight:400;
}

h1,
h2,
h3,
h4,
h5,
h6{
    color: #333333;
    font-weight: 600;
}

h3{
    font-size: 20px;
    text-transform: none;
}

p {
    letter-spacing: 0;
    line-height:1.8;
}

a{
    text-decoration: none;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

a:focus{
    outline:none;
    text-decoration: none;
}

ul,li{
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.section-padding{
    padding: 80px 0;
}

.section-header{
    margin-bottom: 60px;
    text-align: center;
}

.section-header .line1 {
    height: 2px;
    width: 200px;
    background: #3498db;
    margin:auto;
}

.section-header .line2 {
    height: 2px;
    width: 150px;
    background: #222222;
    margin: 15px auto;
}

/*---------- default css ends ------------*/

/*-------------- 2. Preloader css starts ---------------*/

.loader_bg {
    position: fixed;
    z-index: 9999999;
    background: #fff;
    width: 100%;
    height: 100%;
}

.loader {
    border: 0 solid transparent;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}

.loader:before, .loader:after {
    content: '';
    border: 1em solid #3498db;
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader 2s linear infinite;
    opacity: 0;
}

.loader:before {
    animation-delay: .5s;
}

@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0; }
    50% {
        opacity: 1; }
    100% {
        transform: scale(1);
        opacity: 0; }
}

/*---------- preloader css ends -------------*/

/*---------- 3. Nav area css starts -------------*/

.nav-area{
    height: 65px;
}

.nav-area.sticky_navigation{
    background: #ffffff;
    height: 55px;
}

.sticky_navigation{
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out ;
    -ms-transition: all 0.4s ease-out ;
    -o-transition: all 0.4s ease-out ;
    transition: all 0.4s ease-out ;
    -webkit-box-shadow: 0px 3px 4.6px 0.3px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 3px 4.6px 0.3px rgba(0,0,0,0.25);
    box-shadow: 0px 3px 4.6px 0.3px rgba(0,0,0,0.25);
}

.sticky_navigation .main-menu{
    margin-top: 0;
}

.sticky_navigation .navbar-brand, .sticky_navigation .navbar-brand span {
    color: #3498DB;
}

.sticky_navigation .navbar-brand:hover, .sticky_navigation .navbar-brand:focus, .sticky_navigation .navbar-brand span {
    color: #3498DB;
}

.sticky_navigation .nav li a {
    color: #333333;
}

.sticky_navigation .nav li.active a{
    color: #3498db;
}

.sticky_navigation .navbar-brand:hover{
    color: #333333;
}

.main-menu{
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    margin-top: 10px;
}

.navbar{
    border:0;
    margin-bottom: 0;
}

.navbar-brand{
    padding: 15px 0;
    text-transform: uppercase;
    font-size: 25px;
    display: block;
    color: #ffffff;
    font-weight: 800;
}

.navbar-brand:focus, .navbar-brand:hover {
    text-decoration: none;
    color: #ffffff;
}

.navbar-right li{
    display: inline-block;
    float: none;
}

.navbar-right li a{
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 600;
}

.navbar-right li.active a{
    font-weight: bold;
    color: #ffffff;
}

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus{
    background: none;
}

.navbar-toggle .icon-bar{
    background: #777777;
}

/*---------- Nav area css ends -------------*/

/*----------- 4. Mouse Animate Icon Starts ------------------*/

.mouse-icon {
    position: absolute;
    left: 50%;
    bottom: -160px;
    border: 2px solid #fff;
    border-radius: 16px;
    height: 50px;
    width: 30px;
    margin-left: -17px;
    display: block;
    z-index: 10;
}

.mouse-icon .wheel {
    -webkit-animation-name: drop;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: drop;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.mouse-icon .wheel {
    position: relative;
    border-radius: 10px;
    background: #fff;
    width: 4px;
    height: 10px;
    top: 4px;
    margin-left: auto;
    margin-right: auto;
}

@keyframes drop	{
    0%   { top:5px;  opacity: 0;}
    30%  { top:10px; opacity: 1;}
    100% { top:25px; opacity: 0;}
}

/* --------- Mouse Animate Icon ends -------------- /*


/* --------- 5. Banner area css starts -----------*/

.banner-area{
    background-image: url(../images/home/joseph2.jpg);
    background-position: center;
    -webkit-background-size:cover;
    background-size:cover;
    position: relative;
    height: 100%;
}

.banner-table{
    display: table;
    margin: 0;
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.banner-table-cell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.welcome-text{
    color: #ffffff;
}

.welcome-text h2 {
    font-size: 3.8em;
    font-weight: 300;
    color: #ffffff;
}

.text-affect,
.typed-cursor {
    display: inline;
    font-size: 4em;
    font-weight: 700;
    color: #ffffff;
}

canvas{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(0,0,0,0.3);
}

.banner-btn a {
    background-color: #3498DB;
    color: #ffffff;
    padding: 10px 35px;
    display: inline-block;
    margin-top: 30px;
    border-radius: 25px;
    text-decoration: none;
    letter-spacing: 2px;
}

@media (max-width: 991px){
    .welcome-text{
        text-align: center;
        margin: 25px auto;
    }
}

/* --------------  Banner area css ends --------------- */

/*---------------6. About area starts ----------------*/

.about-area .tab-content > .tab-pane {
    padding: 30px 20px;
}

.about-area .tab-pane h4 {
    font-weight: 600;
}

.experience-area h3{
    font-weight: 600;
}

.experience-area h3, h5 {
    margin: 0 0 10px;
}

.experience-area h5{
    font-style: italic;
    text-transform: uppercase;
}

.about-area .btn-group .btn {
    padding: 15px 12px;
    font-size: 18px;
}

.about-area .btn.btn-primary{
    background-color: transparent;
    color: #333333;
    border-color: transparent;
    border-radius: 0 !important;
}

.about-area .btn.btn-default{
    background-color: transparent;
    color: #333333;
    border-color: transparent;
}

.about-area .btn-default:hover {
    color: #333333;
    background-color: transparent;
    border-color: transparent;
}

.btn.btn-primary::before {
    content: "\f0d7";
    font-family: 'FontAwesome';
    cursor: pointer;
    background: #3498db;
    color: #ffffff;
    font-size: 15px;
    height: auto;
    margin-right: 10px;
    padding: 10px 15px;
    width: auto;
}

.skillbar .skillbar-title {
    font-weight: normal;
}

p.heading-text {
    font-size: 18px;
    margin-top: 20px;
    font-weight: 700;
}

.about-text img {
    width: 90px;
    margin-bottom: 15px;
}

.socials a i {
    width: 40px;
    height: 40px;
    text-align: center;
    display: inline-block;
    padding: 13px;
    font-size: 15px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #333333;
    color: #ffffff;
}

.socials a i:hover {
    border-color: #3498db;
    color: #ffffff;
    background: #3498db;
    -webkit-transition: ease .5s;
    -moz-transition: ease .5s;
    -ms-transition: ease .5s;
    -o-transition: ease .5s;
    transition: ease .5s;
}

.skillbar {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 30px;
}

.skillbar-bar:before {
    background: #eee;
    content: "";
    height: 3px;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.skillbar-bar {
    height: 3px;
    width: 0px;
    background: #3498DB;
    transition-property: width, background-color;
}

.skillbar-title {
    color: #333333;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.skill-bar-percent {
    float: right;
    display: inline-block;
    color: #333333;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}


/*--------------- About area ends ----------------*/

/*---------------7. Services area Starts--------------*/

.services-area {
    background-color: #eeeeee;
}

.services-icon i {
    font-size: 35px;
    color: #ffffff;
}

.services-content h3 {
    line-height: 1.9;
    text-transform: uppercase;
}

.services-icon {
    border: 1px solid #3498db;
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    padding: 20px;
    background-color: #3498db;
}

.single-services {
    padding: 40px 20px;
    box-shadow: rgba(58,78,95,0.2) 0 10px 16px, rgba(58,78,95,0.05) 0 -5px 16px;
    margin-bottom: 15px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

.single-services:hover {
    box-shadow: 1px 3px 4px 5px rgba(199,199,199,.8);
    transition: ease .09s;
}

.single-services:hover .services-icon{
    background-color: #ffffff;
    transition: ease .3s;
    border-color: #3498db;
}

.single-services:hover .services-icon i{
    color: #3498db;
}

.single-services:hover{
    background-color: #3498db;
    -webkit-transition: .9s;
    -moz-transition: .9s ;
    -ms-transition: .9s ;
    -o-transition: .9s ;
    transition: .9s ;    
}
.single-services:hover .services-content{
    color: #ffffff;
}
.single-services:hover .services-content h3{
    color: #ffffff;
}

/*--------------- Services area ends --------------*/

/*--------------8. Portfolio area starts-----------*/


.single-portfolio {
    margin-top: 20px;
}

.single-portfolio .item {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.single-portfolio .item img {
    width: 100%;
    transition: 0.8s ease-out;
}

.portfolio-area .list-inline li.active {
    background: #3498DB;
    color: #ffffff;
}

.portfolio-area ul li:hover{
    cursor: pointer;
}

.single-portfolio .item-overlay{
    position: absolute;
    transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
    -ms-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
    -moz-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
    -webkit-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
    height: 0;
    top: 50%;
    width: 0;
    text-align: center;
    opacity: 0;
    left: 50%;
}

.single-portfolio .item:hover {
    z-index: 100;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.single-portfolio .item:hover .item-overlay {
    height: 85%;
    top: 0;
    left: 0;
    opacity: 0.9;
    width: 100%;
}

.portfolio-images .mix {
    display: none;
}

.single-portfolio .item-overlay i {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 22px;
    left: 50%;
    color: #fff;
    background-color: #3498DB;
    padding: 20px;
    top: 50%;
}

.portfolio-area ul.list-inline{
    text-align: center;
}

.portfolio-area ul.list-inline li{
    font-weight: bold;
    background-color: #333333;
    color: #ffffff;
    padding: 5px;
}

.portfolio-area ul.list-inline li:first-child{
    -webkit-border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    border-radius:5px 0 0 5px;
}

.portfolio-area ul.list-inline li:last-child{
    -webkit-border-radius:0 5px 5px 0;
    -moz-border-radius:0 5px 5px 0;
    border-radius:0 5px 5px 0;
}

/*--------------Portfolio area Ends-----------*/


/*------------9. Testimonial area starts ---------*/

.testimonial-content p {
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
}

.testimonial-area{
    background-color: #eeeeee;
}

.single-testimonial {
    margin: 0 49px 29px;
    border-right: 10px solid #3498DB;
    border-left: 10px solid #3498DB;
    padding: 40px 30px 40px;
    position: relative;
    background-color: #eeeeee;
    color: #010446;
    text-align: center;
}

.single-testimonial::before {
    content: "";
    background-color: #3498DB;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 10px;
}

.single-testimonial::after {
    content: "";
    background-color: #3498DB;
    right: 0;
    width: 50%;
    height: 10px;
    position: absolute;
    bottom: 0;
}

.single-testimonial .testimonial-content{
    margin-bottom: 30px;
    font-size: 15px;
}

.single-testimonial .pic {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-right: 15px;
    border-radius: 50%;
    overflow: hidden;
}

.single-testimonial .pic img{
    width: 100%;
    height: 100%;
}

.single-testimonial .testimonial-title small{
    font-size: 15px;
    color:#292F36;
}

.owl-theme .owl-controls{
    margin-top: 50px;
    margin-left: 30px;
}

.owl-dots{
    text-align: center;
}

.owl-dot {
    display: inline-block;
    height: 15px !important;
    width: 15px !important;
    background-color: #222222 !important;
    opacity: 0.8;
    border-radius: 50%;
    margin: 0 5px;
}

.owl-dot.active {
    background-color: #3498DB !important;
}

/*------------ Testimonial area ends ---------*/

/*-------------10. Contact area starts -------------*/

.contact-area{
    background-color: #ffffff;
}

.contact-area .form-control{
    border: none;
    border-bottom: 2px solid #a2a2a2;
    box-shadow: none;
    padding: 6px 0;
    border-radius: 0;
    margin-bottom: 30px;
}

.contact-area textarea.form-control{
    border:2px solid #a2a2a2;
    padding: 6px;
    height: 250px;
    margin-bottom: 30px;
}

.btn.btn-send {
    background: #3498DB;
    color: #ffffff;
    border-radius: 25px;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 600;
}

/*------------- Contact area ends -------------*/

/*--------------11. Footer area starts -------------*/


.footer-area {
    background: #232323;
    color: #ffffff;
    padding: 30px 0;
}

/*--------------- Footer area ends -------------*/




/*skils*/


/* My custom css */

.about-align {
    display: flex;
    align-items: center; /* Vertically center the two columns */
    flex-wrap: wrap; /* Keep it responsive on smaller screens */
  }
  
  .about-align .proPic {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .about-align .proPic img {
    max-width: 100%;
    height: auto;
  }
  


  /* For the about texts */

  @keyframes fadeLeftIn {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .tab-pane.fade-left-custom {
    animation: fadeLeftIn 0.8s ease both;
  }