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


Template Name: Esham - Personal Portfolio Template
Author: validtheme
Version: 1.1

-------------------------------------

Table of contents
        
    01. Google font
    02. Reset
    03. Typography
    04. Background color
    05. Custom
    06. Button
    07. Border
    08. Aside style
    09. Video
    10. Background image
    11. Icon
    12. Magnific popup
    13. Header
    14. Page title
    15. Swiper carousel
    16. Slider and parallax typography
    17. Portfolio
    18. Elements
    19. Blog
    20. Footer
    21. Home page
    22. Others

*/


/*
** General Styles for HTML tags
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Varialbes */
:root {
	--font-default: 'Open Sans', sans-serif;
	--font-heading: 'Roboto', sans-serif;
	--fontawesome: "Font Awesome 5 Pro";
	--black: #000000;
	--dark: #0E1E2A;
	--dark-secondary: #041637;
	--white: #ffffff;
	--color-primary: #2667FF;
	--color-secondary: #6c19ef;
	--color-heading: #04000b;
	--color-paragraph: #666666;
	--box-shadow-primary: -1px 3px 10px 0 rgba(0, 0, 0, 0.6);
	--box-shadow-secondary: 0 10px 30px 0 rgba(44, 130, 237, 0.4);
	--box-shadow-regular: 0px 2px 12px 0px #e7e7e7;
	--bg-gray: #f7f7f7;
	--bg-gradient: linear-gradient(90deg, var(--color-primary)  20%, var(--color-secondary) 100%);
	--box-shadow: 0px 15px 60px -10px rgb(109 117 143/33%);
}


* {
    padding: 0;
    margin: 0;
}
html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

body {
    font-family: var(--font-default);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
    background-color: var(--white);
}
html, body, .wrapper {
    height: 100%;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    font-weight: normal;
    line-height: 1.2;
    font-family: var(--font-heading);
    letter-spacing: 0;
    margin: 0;
}
h1 {
    margin-bottom: 20px;
}
h2,h3,h4 {
    margin-bottom: 15px;
}
h5,h5 {
    margin-bottom: 10px;
}
img {
    border: none;
    outline: none;
    max-width: 100%;
}
label {
    display: inline-block;
    font-weight: normal;
    margin-bottom: 5px;
    max-width: 100%;
}
a, .btn {
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}
a img, iframe {
    border: none;
}
p {
    color: var(--color-paragraph);
    line-height: 1.7;
    margin: 0 0 15px;
    text-transform: none;
    font-weight: 400;
}
hr {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid #eee;
}
pre {
    display: block;
    margin: 0 0 30px;
    padding: 9.5px;
    word-wrap: break-word;
    word-break: break-all;
    color: var(--color-heading);
    border: 1px solid #ededed;
    border-radius: inherit;
    background-color: #f9f9f9;
    font-size: 13px;
    line-height: 1.42857143;
}
input:focus, 
textarea:focus, 
select:focus {
    outline: none;
    box-shadow: inherit;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a, 
a:active, a:focus, a:hover {
    outline: none;
    text-decoration: none;
    color: var(--color-heading);
}
a:hover {
    color: var(--color-heading);
}
a {
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    text-decoration: none;
    font-family: var(--font-heading);
}
b, strong {
    font-weight: 900;
}
.btn.active, 
.btn:active {
    background-image: inherit !important;
}
.btn.focus, 
.btn:active:focus, 
.btn:active:hover, 
.btn:focus, 
.btn:hover {
    outline: 0;
}
.btn.active, 
.btn:active {
    outline: 0;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
}
input {
    border: 1px solid #e7e7e7;
    border-radius: inherit;
    box-shadow: inherit;
    min-height: 50px;
}
/* Default CSS */
.container-half {
    margin: 0 auto;
    width: 60%;
    padding: 0 15px;
}
.bg-cover {
    background-position: center center;
    background-size: cover;
}
.bg-fixed {
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
}
.bg-gray {
    background-color: var(--bg-gray);
}
.bg-light {
    background-color: #f7f7f7;
}
.text-light h1, 
.text-light h2, 
.text-light h3, 
.text-light h4, 
.text-light h5, 
.text-light h6, 
.text-light p, 
.text-light a {
    color: var(--white);
}
.shadow {
    position: relative;
    z-index: 1;
}
.shadow.dark::after {
    background: var(--black) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.default-padding {
    padding-top: 120px;
    padding-bottom: 120px;
}
/* Welcome Banner */
html, 
body, 
.wrapper, 
.welcome-banner {
    height: 100%;
}
.welcome-banner div {
    height: 100%;
}
.welcome-banner div.item-cell, 
.welcome-banner div.item-cell div {
    height: auto;
}
.welcome-banner .item-table {
    display: table;
    width: 100%;
}
.welcome-banner .item-cell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}
.welcome-content h1 {
    font-size: 80px;
    margin-bottom: 10px;
}
.welcome-banner .arrow-down {
    bottom: 0;
    left: 50%;
    position: absolute;
    text-align: center;
}
.welcome-banner .arrow-down a {
    border: 2px solid var(--white);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    bottom: 50px;
    display: inline-block;
    font-size: 34px;
    height: 45px;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    width: 25px;
}
.welcome-banner .arrow-down a span {
    background: var(--white) none repeat scroll 0 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
   ;
    height: 5px;
    width: 5px;
}
.welcome-banner .arrow-down span.dot {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: arrow-down;
    animation-timing-function: linear;
    display: inline-block;
    transform-style: preserve-3d;
}
@keyframes arrow-down {
    0% {
        opacity: 0;
        transform: translate3d(0px, 0px, 0px);
   }
    10% {
        opacity: 1;
        transform: translate3d(0px, 5px, 0px);
   }
    100% {
        opacity: 0;
        transform: translate3d(0px, 30px, 0px);
   }
}
#particles-js {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}


/* ============================================================== 
   # About 
=================================================================== */

.about-area .about-text h2 {
    font-size: 35px;
    font-weight: 500;
    text-transform: capitalize;
}
.about-area .about-text {
 padding-left: 30px;
}
.about-area .about-text h4 {
 margin-bottom: 30px;
}
.about-area .about-text .socials {
 margin-top: 30px;
}
.about-area ul li {
    display: inline-block;
}
.about-area ul li a {
    display: inline-block;
    font-size: 20px;
    height: 40px;
    width: 50px;
}
.about-area .button a {
    background: var(--color-heading) none repeat scroll 0 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: var(--white);
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 8px 25px;
    border: 1px solid var(--color-heading);
}
.about-area .button a:hover, 
.about-area .button a.active {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
}
.about-area .button {
    margin-top: 20px;
}
.about-area .thumb img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}


/* ============================================================== 
   # Services 
=================================================================== */

.services-area.default-padding {
    padding-bottom: 90px;
}
.services-items .item {
    background: var(--white) none repeat scroll 0 0;
    -moz-box-shadow: 0 16px 40px #ededed;
    -webkit-box-shadow: 0 16px 40px #ededed;
    -o-box-shadow: 0 16px 40px #ededed;
    box-shadow: 0 16px 40px #ededed;
    padding: 67px 40px 64px;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.services-items .item:hover {
   transform: translateY(-10px);
}
.services-items .item h4 {
    margin-bottom: 20px;
}
.services-area .item p {
    margin: 0;
}
.services-items .equal-height {
    margin-bottom: 30px;
}
.services-items .item i {
    font-size: 35px;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.services-items .equal-height {
    margin-bottom: 30px;
}
.title h2 {
    font-size: 35px;
    font-weight: 500;
    text-transform: capitalize;
}
.title {
    margin-bottom: 30px;
}


/* ============================================================== 
   # Experiance 
=================================================================== */

.timeline {
    position: relative;
}
.timeline::before {
    background: #ccd1d9 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: calc(33% + 19px);
    position: absolute;
    top: 0;
    width: 2px;
}
.timeline:after {
    content: "";
    display: table;
    clear: both;
}
.entry {
    clear: both;
    text-align: left;
    position: relative;
}
.entry .title {
    margin-bottom: .5em;
    float: left;
    width: 33%;
    padding-right: 30px;
    text-align: right;
    position: relative;
}
.entry .title::before {
    background: var(--white) none repeat scroll 0 0;
    border: 5px solid var(--color-primary);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    content: "";
    height: 20px;
    position: absolute;
    right: -26px;
    top: 0;
    width: 20px;
    z-index: 1;
}
.contact-area button {
    font-weight: 500;
    text-transform: uppercase;
}
.entry .content {
    margin: 0 0 3em;
    float: right;
    width: 66%;
    padding-left: 30px;
}
.entry .content ul li:before {
    content: "–";
    margin-right: .5em;
}
.timeline .entry .title h1, 
.timeline .entry .title h2, 
.timeline .entry .title h3, 
.timeline .entry .title h4, 
.timeline .entry .title h5, 
.timeline .entry .title h6 {
    margin: 0;
    line-height: inherit;
}

/* ============================================================== 
   # Fun Factor 
=================================================================== */

.fun-fact i {
    color: var(--color-primary);
    font-size: 35px;
}
.fun-fact .timer {
    color: var(--white);
    font-size: 35px;
    margin-top: 30px;
}
.fun-fact span.medium {
    color: var(--white);
    display: block;
    font-size: 18px;
    margin-top: 10px;
}


/* ============================================================== 
   # Portfolio 
=================================================================== */

.portfolio-area.default-padding {
    padding-bottom: 105px;
}
.mix-item-menu.line-border {
    margin-bottom: 20px;
}
.item-mixitup-nav li {
    display: inline-block;
    padding: 0 10px;
}
.item-mixitup-nav li a {
    color: #212331;
    display: inline-block;
    font-weight: 600;
    position: relative;
    text-transform: uppercase;
    z-index: 1;
    overflow: hidden;
}
.item-mixitup-nav li a::after {
    background: black none repeat scroll 0 0;
    content: "";
    height: 1px;
    left: -100%;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: -1;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.item-mixitup-nav li a.current:after, 
.item-mixitup-nav li a:hover:after {
    left: 0;
}
.item-inner {
    color: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
}
.item-inner * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.item-inner img {
    opacity: 1;
    width: 100%;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}
.item-inner .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 3em 3em;
    width: 100%;
    height: 100%;
}
.item-inner .overlay::before {
    position: absolute;
    top: 50%;
    right: 30px;
    bottom: 50%;
    left: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    content: '';
    opacity: 0;
    background-color: var(--white);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.item-inner .view-list,
.item-inner p,
.item-inner a {
    margin: 0 0 5px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s,
    -webkit-transform 0.35s,
    -moz-transform 0.35s,
    -o-transform 0.35s,transform 0.35s;
}
.item-inner .view-list,.item-inner a {
    word-spacing: -0.15em;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transform: translate3d(0%, 50%, 0);
    transform: translate3d(0%, 50%, 0);
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.item-inner:hover .overlay .view-list,
.item-inner:hover .overlay a {
    opacity: 1;
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.item-inner:hover .overlay::before {
    background: var(--white);
    border: none;
    top: 30px;
    bottom: 30px;
    opacity: 1;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    opacity: .9;
}
.item-inner .view-list {
    font-weight: 300;
    margin-top: -45px;
    position: relative;
    text-transform: uppercase;
    top: 50%;
    transform: translate3d(0%, 50%, 0px);
    transition-delay: 0.3s;
    width: 100%;
    word-spacing: -0.15em;
}
.item-inner .view-list a {
    background: var(--color-primary) none repeat scroll 0 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: var(--white);
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin: 0 2px;
    width: 40px;
}

.magnific-mix-gallery.masonary .pf-item {
    padding: 15px;
}

.magnific-mix-gallery.masonary {
    margin: 0 -15px;
}


/* ============================================================== 
   # Testimonials 
=================================================================== */

.testimonial-items .item {
    padding: 30px;
    position: relative;
    z-index: 1;
}
.testimonial-items .item::after {
    background: var(--black) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.3;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.testimonial-items .item img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    height: 60px;
    width: 60px;
}
.testimonial-items .item p {
    margin: 20px 0;
}
.testimonial-items .item span {
    color: var(--color-primary);
    font-style: italic;
}
.testimonial-items .owl-nav {
    margin: 0;
}
.testimonial-items .owl-nav .owl-next, 
.testimonial-items .owl-nav .owl-prev {
    background: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    height: 40px;
    left: 0;
    line-height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 40px;
    color: var(--white);
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.testimonial-items .owl-nav .owl-next:hover, 
.testimonial-items .owl-nav .owl-prev:hover {
    background-color: var(--color-primary);
}
.testimonial-items .owl-nav .owl-next::after, 
.testimonial-items .owl-nav .owl-prev::after {
    background: var(--black) none repeat scroll 0 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.testimonial-items .owl-nav .owl-next {
    left: auto;
    right: -15px;
}
.testimonial-items h4 {
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
}

/* ==============================================================
   # Blog 
=================================================================== */

.blog-area .item .meta {
    margin-top: 30px;
}
.blog-area .item .meta li {
    color: var(--color-heading);
    display: inline-block;
    font-size: 12px;
    margin-bottom: 5px;
    margin-right: 10px;
    text-transform: uppercase;
}
.blog-area .item .meta li i {
    margin-right: 5px;
}
.blog-area .item {
    overflow: hidden;
    position: relative;
}
.blog-items h4 {
    margin-bottom: 20px;
}
.blog-items h2 {
    margin-bottom: 20px;
}
.blog-area .item img {
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
.blog-area .item:hover img {
    -webkit-transform:scale(1.2) translateY(-7.5%);
    -moz-transform: scale(1.2) translateY(-7.5%);
    -ms-transform: scale(1.2) translateY(-7.5%);
    transform: scale(1.2) translateY(-7.5%);
}
.read-more {
    background: var(--color-heading) none repeat scroll 0 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: var(--white);
    display: inline-block;
    font-size: 14px;
    padding: 10px 40px;
    text-transform: uppercase;
    margin-top: 10px;
    font-weight: 500;
}
.read-more:hover {
    background: var(--color-primary) none repeat scroll 0 0;
    color: var(--white);
}
.blog-items .thumb {
    overflow: hidden;
}
.container-pull {
    width: 70%;
    margin: 0 auto;
}
.blog-area.pull .item-box {
    margin-bottom: 50px;
}
.blog-area.pull .item-box:last-child {
    margin: 0;
}
.pagination a {
    color: var(--color-heading) !important;
    display: inline-block;
    padding: 10px 20px !important;
}
.pagination li.active a {
    color: var(--white) !important;
}
.blog-area blockquote {
    border: medium none;
    font-size: 18px;
    padding-left: 30px;
    position: relative;
    z-index: 1;
}
.blog-area blockquote::before {
    content: "\f10d";
    font-family: "FontAwesome";
    font-weight: 600;
    left: 0;
    position: absolute;
}
.comments-list .commen-item .avatar {
    float: left;
    height: 80px;
    width: 80px;
}
.comments-list .commen-item .content {
    display: table-cell;
    vertical-align: top;
}
.comments-list .commen-item .avatar img {
    height: 60px;
    width: 60px;
}
.comments-list .commen-item {
    margin-bottom: 30px;
}
.comments-list .commen-item.reply {
    padding-left: 80px;
}
.comments-area {
    margin-top: 30px;
}
.comments-area .comments-title h3 {
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 30px;
    padding-bottom: 10px;
}
.comments-list .commen-item .content h5 {
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.comments-info a {
    display: inline-block;
    margin-left: 14px;
}
.comments-info a:hover {
    color: var(--color-primary);
}
.comments-info a i {
    margin-right: 5px;
}
.comments-form input, 
.comments-form textarea {
    border: 1px solid #e2e2e2;
    box-shadow: inherit;
}
.comments-form textarea {
    min-height: 150px;
}
.comments-form button {
    background: var(--color-primary) none repeat scroll 0 0;
    border: medium none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: var(--white);
    display: inline-block;
    margin-top: 20px;
    padding: 8px 25px;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

.form-group.comments {
    margin-top: 20px;
}


/* ============================================================== 
   # Contact Form 
=================================================================== */

.contact-form input {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: currentcolor currentcolor #e7e7e7;
    border-image: none;
    border-radius: inherit;
    border-style: none none solid;
    border-width: medium medium 1px;
    box-shadow: inherit;
}
.contact-form textarea {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: currentcolor currentcolor #e7e7e7;
    border-image: none;
    border-radius: inherit;
    border-style: none none solid;
    border-width: medium medium 1px;
    box-shadow: inherit;
    min-height: 180px;
}
.contact-form button {
    background: var(--color-primary) none repeat scroll 0 0;
    border: medium none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: var(--white);
    display: inline-block;
    margin-top: 20px;
    padding: 8px 25px;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.contact-form button i {
    margin-left: 5px;
}
.contact-form input, 
.contact-form textarea,
.contact-form input:focus, 
.contact-form textarea:focus {
    background: transparent none repeat scroll 0 0;
    color: var(--white);
    min-height: 60px;
    padding: 20px 0;
}

.contact-form textarea {
    height: 160px;
}

.contact-form input::-webkit-input-placeholder, 
.contact-form textarea::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
    color: var(--white) !important;
    opacity: 1;
}
.contact-form input::-moz-placeholder, 
.contact-form textarea::-moz-placeholder {
   /* Firefox 19+ */
    color: var(--white) !important;
    opacity: 1;
}
.contact-form input::-ms-input-placeholder, 
.contact-form textarea::-ms-input-placeholder {
   /* IE 10+ */
    color: var(--white) !important;
    opacity: 1;
}
.contact-form input::-moz-placeholder, 
.contact-form textarea::-moz-placeholder {
   /* Firefox 18- */
    color: var(--white) !important;
    opacity: 1;
}
/* contact form alert */
.contact-form .loader {
    display: inline-block;
    margin-left: 10px;
    margin-top: 5px;
    position: absolute;
    top: 50%;
}
.alert {
    border: 1px solid transparent;
    border-radius: 5px;
    color: red;
    font-weight: 400;
    margin-bottom: 0 !important;
    padding: 0;
    text-align: center;
}
.alert-msg {
    background: var(--white) none repeat scroll 0 0;
    color: #685654;
    display: none;
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    text-align: left;
    margin-top: 20px;
}
#message b {
    color: red;
}
.alert.alert-success {
    background: transparent none repeat scroll 0 0;
}
.alert.alert-success > h3 {
    color: green;
    margin-bottom: 5px;
}
.alert.alert-success > p {
    color: var(--color-heading);
}
.contact-info-area .item i {
    color: var(--color-primary);
    font-size: 35px;
}
.contact-info-area .item h4 {
    margin-top: 10px;
    text-transform: capitalize;
}
.contact-info-area .item p {
    line-height: 26px;
    margin: 0;
}

/* ============================================================== 
   # Blog 
=================================================================== */

.breadcrumb-area {
    padding: 150px 0;
    text-align: center;
}
.breadcrumb {
    background: transparent none repeat scroll 0 0;
    text-align: center;
}
.breadcrumb li {
    font-weight: 600;
    text-transform: capitalize;
}
.breadcrumb li a {
    display: inline-block;
    color: var(--white);
}
.breadcrumb li.active {
    color: var(--color-primary);
}
.breadcrumb-area h1 {
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

.breadcrumb-area ul.breadcrumb {
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 0;
}

.breadcrumb-area ul.breadcrumb li a {
    font-weight: 600;
}

.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0"
}

/* ============================================================== 
   # Footer 
=================================================================== */

footer {
    background: #212121 none repeat scroll 0 0;
}
footer {
    padding: 50px 0;
}
footer .footer-social li {
    display: inline-block;
}
footer .footer-social li a {
    color: var(--white);
    display: inline-block;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}
footer .copyright-text p {
    color: #fff;
    margin: 0;
}
footer .copyright-text p i, footer .copyright-text p a {
    color: var(--color-primary);
}
.copyright-text {
    margin-top: 5px;
}
footer .footer-social li a::before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    content: "";
    height: 4px;
    left: 0;
    margin-top: -2px;
    opacity: 1;
    position: absolute;
    top: 50%;
    width: 4px;
    z-index: 10;
}
footer .footer-social li.twitter a::before {
    background-color: #00b6f1;
}
footer .footer-social li.facebook a::before {
    background-color: #3b5998;
}
footer .footer-social li.google a::before {
    background-color: #df4a32;
}
footer .footer-social li.vimeo a::before {
    background-color: #1ab7ea;
}


/* ============================================================== 
 # Preloader 
=================================================================== */
.no-js #loader {
    display: none;
}
.js #loader {
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
}
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: url(../img/preloader.gif) center no-repeat #fff;
    text-align: center;
}

.demo-banner {
    padding: 250px 0;
    text-align: center;
}

.demo-banner h1 {
    margin: 20px 0 0;
    font-weight: 700;
}

.demo-area .single-item {
    box-shadow: 0 16px 40px #ededed;
    position: relative;
    z-index: 1
}

.demo-area .item {
    margin-bottom: 30px
}

.demo-area .single-item .info {
    background: #fff;
    color: #333;
    padding: 15px 10px;
    text-align: center
}

.demo-area .single-item .info h3 {
    color: #333;
    margin: 0
}