/************* CSS Styles ************************
    Template Name: Adrian - Personal Portfolio Template
    Author: cosmos-themes
    Version: 2.0
    Copyright 2018
****************************************/


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

            Table of Content
            1. Body and Core Css
            2. Preloader
            3. Navbar
            4. Home Banner Section
            5. About Section
            6. Services Section
            7. Portfolio Section
            8. Blog Section
            9. Contact Section
            10. Footer
            11. Blog Banner Section
            12. Blog Post Page Main Area
            13. Site Mobile Responsive
            14. Particles Background

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


/*============ 1. Body and Core Css ============*/

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    font-family: "Poppins", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Montserrat", sans-serif;
}

h2 {
    font-weight: 700;
}

h3,
h4,
h5,
h6 {
    font-weight: 600;
}



a {
    color: #000;
}

a:hover {
    text-decoration: none;
}

a:hover,
a:focus {
    outline: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

section {
    overflow: hidden;
}


/*Margins*/

.padtop-20 {
    padding-top: 20px;
}
.padtop-40 {
    padding-top: 40px;
}
.padtop-60 {
    padding-top: 60px;
}
.padtop-90 {
    padding-top: 90px;
}
.padbtm-20 {
    padding-bottom: 20px;
}
.padbtm-40 {
    padding-bottom: 40px;
}
.padbtm-60 {
    padding-bottom: 60px;
}
.padbtm-90 {
    padding-bottom: 90px;
}
.martop-20 {
    margin-top: 20px;
}
.martop-40 {
    margin-top: 40px;
}
.martop-60 {
    margin-top: 60px;
}
.marbtm-20 {
    margin-bottom: 20px;
}
.marbtm-40 {
    margin-bottom: 40px;
}
.marbtm-60 {
    margin-bottom: 60px;
}

.main-button {
    text-decoration: none;
    border: 1px solid #aaa;
    color: #f1eee9;
    padding: 10px 20px;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    background-color: transparent;
}

.main-button:hover {
    border: 1px solid #37523F;
    background: #f1eee9;
    color: #20191d;
    text-decoration: none;
}

.main-button:hover,
.main-button:focus {
    outline: none;
}

.main-button.success {
    border-color: #28a745;
    color: #28a745;
}

.main-button.success:hover {
    background-color: #28a745;
    color: #fff;
}

.main-button.error {
    border-color: #dc3545;
    color: #dc3545;
}

.main-button.error:hover {
    background-color: #dc3545;
    color: #fff;
}

.wave {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    left: 0;
    fill: #586f6b;
    z-index: 1;
    visibility: hidden;
}

.wave-third .wave {
    fill: #cec7bd;
    visibility: visible;
};


.wave-primary {
    position: relative;
}

.wave-primary .wave {
    fill: #586f6b;
    display: block;
    visibility: visible;
}

.wave-secondary {
    position: relative;
}

.wave-secondary .wave {
    fill: #758a7b;
    visibility: visible;
}

.wave-footer {
    position: relative;
}

.wave-footer .wave {
    fill: #20191D;
    visibility: visible;
    top: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}


/*============ 2. Preloader ============*/

body.loaded p {
    opacity: 1;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

#loader-wrapper .loader-section {
    position: fixed;
    top: -500%;
    width: 101%;
    height: 1000%;
    background: #111;
    z-index: 1000;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
    left: -50%;
}

#loader-wrapper .loader-section.section-right {
    right: -50%;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded .loading {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
    visibility: hidden;
}

.loading {
    z-index: 1001;
    display: inline-block;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    margin-top: -35px;
    margin-left: -35px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 10px solid transparent;
    border-left: 10px solid #3c3c3c;
    border-bottom: 10px solid #3c3c3c;
    -webkit-animation: spin-one 2s linear infinite;
    animation: spin-one 2s linear infinite;
}

.loading:before,
.loading:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 10px solid transparent;
    border-left: 10px solid #3c3c3c;
    border-bottom: 10px solid #3c3c3c;
}

.loading:before {
    -webkit-animation: spin-two 1s linear infinite;
    animation: spin-two 1s linear infinite;
}

.loading:after {
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
}

@-webkit-keyframes spin-one {
    0% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    100% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(360deg);
        transform: rotateX(0) rotateY(0) rotateZ(360deg);
    }
}

@keyframes spin-one {
    0% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    100% {
        -webkit-transform: rotateX(0) rotateY(0) rotateZ(360deg);
        transform: rotateX(0) rotateY(0) rotateZ(360deg);
    }
}

@-webkit-keyframes spin-two {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}

@keyframes spin-two {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}


/*============ 3 .Navbar ============*/

.navbar {
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: .90rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.navbar .navbar-brand img {
    width: 100%;
}

.navbar .navbar-toggler {
    border: none;
}

.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:hover {
    outline: none;
}

.navbar .navbar-nav .back-button {
    color: #cec7bd;
}

.navbar-scroll-fixed {
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    background-color: #cdc7bd;
    -webkit-box-shadow: 0 1px 70px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 70px rgba(0, 0, 0, 0.5);
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.navbar-scroll-fixed .navbar-nav .back-button {
    color: #000;
}


/*============ Home Page ============*/


/*============ 4. Home Banner Section ============*/

/*Banner Section*/
#banner {
    background-position: top center;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}

#banner:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    z-index: 1;
}

#banner .banner-text {
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#banner .banner-text h1 {
    font-weight: 800;
    color: #fff;
    font-size: 60px;
    line-height: 100px;
    letter-spacing: 2px;
}

#banner .banner-text #typed {
    color: #fff;
    font-size: 32px;
    font-weight: 500;
}


/*Animations*/

/*Typed Cursor Blink*/

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    font-size: 35px;
    font-weight: 900;
    color: #fff;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*============ 5. About Section ============*/

#about {
    padding-top: 120px;
    padding-bottom: 160px;
    background-color: #586f6b; /* Background color set to #586f6b */
    color: #f1eee9; /* Text color set to #f1eee9 */
}

#about .about-info-container {
    background-color: #586f6b; /* Background color set to #586f6b */
    color: #f1eee9; /* Text color set to #f1eee9 */
    margin-top: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#about .about-info-container:hover {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.01);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.01);
}

#about .about-info-container .about-info {
    text-align: right;
    padding-right: 50px;
}

#about .about-info-container .about-info .about-info-item img {
    width: 100px;
    -webkit-border-radius: 90px;
    border-radius: 90px;
    border: 5px solid #586f6b;
    margin-bottom: 20px;
}

#about .about-info-container .about-info .about-info-item p {
    margin-bottom: 10px;
}

#about .about-info-container .about-info .info-item span {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

#about .about-info-container .about-skills {
    padding-left: 50px;
}

#about .about-info-container .about-skills h3 {
    font-weight: 700;
    margin-bottom: 20px;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

#about .about-info-container .about-skills .progress-box {
    margin-bottom: 20px;
}

#about .about-info-container .about-skills .progress-box p {
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
    color: #f1eee9; /* Text color set to #f1eee9 */
    background-color: #586f6b; /* Background color set to #586f6b */
}

#about .about-info-container .about-skills .progress-box .progress {
    -webkit-border-radius: 0;
    border-radius: 0;
    height: 2px;
}

#about .about-info-container .about-skills .progress-box .progress .progress-bar {
    background-color: #f1eee9; /* Progress bar color set to #f1eee9 */
    -webkit-transition: width 1.5s ease;
    -o-transition: width 1.5s ease;
    transition: width 1.5s ease;
    width: 0;
    animation: progress-animation 1.5s forwards;
}

@keyframes progress-animation {
    from {
        width: 0;
    }
    to {
        width: 100%; /* Adjust this value dynamically if needed */
    }
}


/*============ 6. Services Section ============*/

#services {
    padding-top: 120px;
    padding-bottom: 110px;
    background-color: #cec7bd; /* Background color set to #cec7bd */
    color: #20191d; /* Text color set to #20191d */
}

#services .services-item {
    text-align: center;
    background-color: #758a7b; /* Background color set to #cec7bd */
    color: #f1eee9; /* Text color set to #20191d */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 40px; /* Increased padding to make the boxes larger */
    margin-bottom: 50px; /* Added margin between each row */
}

#services .services-item:hover {
    -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
}

#services .services-item .fa {
    margin-bottom: 30px;
    font-size: 36px; /* Increased icon size */
}

#services .services-item h3 {
    font-family: "Poppins", sans-serif;
    font-size: 20px; /* Slightly increased font size */
    font-weight: 500;
    margin-bottom: 15px;
    color: #f1eee9; /* Text color set to #20191d */
}


/*============ 7. Portfolio Section ============*/

#portfolio {
    padding-top: 120px;
    padding-bottom: 130px;
    background-color: #758a7b; /* Background color changed to #758a7b */
    color: #f1eee9; /* Text color set to #f1eee9 */
}

.portfolio-header .portfolio-filter {
    padding-top: 5px;
}

.portfolio-header .portfolio-filter ul {
    margin: auto;
    display: inline-block;
    padding-left: 0px;
}

.portfolio-header .portfolio-filter ul li {
    float: left;
    color: #f1eee9; /* Text color set to #f1eee9 */
    list-style: none;
    margin-right: 10px;
    cursor: pointer;
    font-size: 15px;
}

.portfolio-header .portfolio-filter ul li.sel-item {
    color: #f1eee9 !important; /* Text color set to #f1eee9 */
    font-weight: bold;
}

.portfolio-header .portfolio-filter ul li li:last-child {
    margin-right: 0;
}

.portfolio-items .single-item {
    margin-bottom: 30px;
}

.portfolio-items .single-item .popup {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.portfolio-items .single-item .popup img {
    width: 100%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

.portfolio-items .single-item .popup:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    -webkit-transition: background-color .6s ease-in-out;
    -o-transition: background-color .6s ease-in-out;
    transition: background-color .6s ease-in-out;
}

.portfolio-items .single-item .popup:hover:after {
    background-color: rgba(0, 0, 0, 0.5);
}

.portfolio-items .single-item .popup:hover img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}



/*============ 8. Blog Section ============*/

#blog {
    background-color: #758a7b;
    padding-top: 120px;
    padding-bottom: 160px;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

.blog-post {
    color: #f1eee9; /* Text color set to #f1eee9 */
    margin-bottom: 40px;
}

.blog-post:hover {
    color: #f1eee9; /* Text color set to #f1eee9 */
    text-decoration: none;
}

.blog-post .post-image {
    position: relative;
}

.blog-post .post-image img {
    width: 100%;
}

.blog-post .post-image:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.0;
    z-index: 1;
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}

.blog-post .post-image:hover:before {
    opacity: 0;
}

.blog-post .post-title {
    font-size: 18px;
    line-height: 25px;
    padding-top: 30px;
    padding-bottom: 15px;
    margin-bottom: 0;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

.blog-post .post-body {
    font-size: 15px;
    line-height: 25px;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

.blog-post .post-meta {
    font-size: 13px;
    font-weight: 400;
    color: #b8b8b8;
    float: right;
}

.blog-post .post-meta span {
    color: #f1eee9; /* Text color set to #f1eee9 */
    font-weight: 600;
}

.view-more-button {
    text-align: center;
    margin-top: 20px;
}

.view-more-button a {
    display: inline-block;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

/*============ 9. Contact Section ============*/

#contact {
    padding-top: 120px;
    padding-bottom: 160px;
    background-color: #586f6b; /* Background color set to #586f6b */
    color: #f1eee9; /* Text color set to #f1eee9 */
}

#contact h2 {
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 24px;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

#contact .contact-item h4 {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 21px;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

#contact .contact-item p {
    font-size: 14px;
    line-height: 24px;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

#contact form .form-group {
    margin-bottom: 24px;
}

#contact form .form-group .form-control {
    font-size: 14px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    background-color: #f1eee9; /* Background color set to #586f6b */
    border: 0;
    border-bottom: 1px solid #f1eee9; /* Border color set to #f1eee9 */
    height: 52px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    color: #f1eee9; /* Text color set to #f1eee9 */
}

#contact form .form-group textarea.form-control {
    height: auto;
    color: #f1eee9; /* Text color set to #f1eee9 */
    background-color: #f1eee9; /* Background color set to #586f6b */
}

#contact form .form-group .con-error {
    border-color: red;
}

#contact form .form-control:hover,
#contact form .form-control:active,
#contact form .form-control:focus {
    -webkit-box-shadow: none;
    -moz-webkit-box-shadow: none;
    box-shadow: none;
    border-color: #f1eee9; /* Border color set to #f1eee9 */
    color: #f1eee9; /* Text color set to #f1eee9 */
}


/*============ 10. Footer ============*/

footer {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #20191D;
    text-align: center;
}

footer ul.social-icons {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

footer ul.social-icons li {
    display: inline-block;
    margin: 0 15px;
}

footer ul.social-icons li:first-child {
    margin-left: 0;
}

footer ul.social-icons li:last-child {
    margin-right: 0;
}

footer ul.social-icons li a {
    color: #F1EEE9;
    font-size: 16px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

footer ul.social-icons li a:hover {
    color: #F1EEE9;
}

footer p {
    color: #F1EEE9;
    margin: 24px 0 0 0;
    font-size: 14px;
}


/*============ Blog And Single-Blog Page ============*/

/*============ 11. Blog Post Page Banner ============*/

.blog-banner {
    padding: 150px 0;
    text-align: center;
    background-color: #111;
    color: #fff;
}

.blog-banner h1 {
    font-size: 46px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 17px;
}

.blog-banner .bread-crumb a {
    color: #fff;
}


/*============ 12. Blog Post Page Main Area ============*/

#blog-posts-area,
#single-blog-area {
    background-color: #f2f2f2;
    padding: 100px 0;
}

.blog-featured-image {
    overflow: hidden;
    max-height: 400px;
}

.blog-meta span {
    font-size: 13px;
    text-transform: uppercase;
    margin-right: 15px;
}

.blog-content {
    margin-top: 12px;
}

#blog-posts-area .single-blog,
#single-blog-area .single-blog-details {
    padding: 30px;
    margin-bottom: 50px;
    background-color: #fff;
}

#blog-posts-area .single-blog h2,
#single-blog-area .single-blog-details h2 {
    margin: 20px 0 5px;
    font-size: 24px;
    font-weight: 600;
}

#blog-posts-area .pagination {
    margin: 0;
}

#blog-posts-area .pagination ul {
    list-style: outside none none;
}

#blog-posts-area .pagination ul li {
    display: inline-block;
}

#blog-posts-area .pagination ul li a {
    background-color: #fff;
    color: #444;
    display: block;
    font-size: 20px;
    font-weight: 500;
    height: 35px;
    line-height: 34px;
    margin-right: 5px;
    text-align: center;
    width: 35px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

#blog-posts-area .pagination ul li.active a,
#blog-posts-area .pagination ul li:hover a {
    background-color: #000;
    color: #fff;
}

#blog-posts-area #sidebar .widget,
#single-blog-area #sidebar .widget {
    padding: 20px;
    background-color: #fff;
    margin-bottom: 40px;
}

#blog-posts-area #sidebar .widget .widget-heading,
#single-blog-area #sidebar .widget .widget-heading {
    font-size: 22px;
    margin-bottom: 20px;
    text-transform: capitalize;
    font-weight: 600;
}

#blog-posts-area #sidebar .search-form,
#single-blog-area #sidebar .search-form {
    width: 100%;
    background-color: #f2f2f2;
}

#blog-posts-area #sidebar .search-form input[type="search"],
#single-blog-area #sidebar .search-form input[type="search"] {
    padding: 15px;
    border: none;
    background: transparent;
    width: 80%;
    color: #000;
}

#blog-posts-area #sidebar .search-form button[type="submit"],
#single-blog-area #sidebar .search-form button[type="submit"] {
    border: none;
    color: #fff;
    float: right;
    padding: 14px;
    width: 20%;
    cursor: pointer;
    background: #000;
    border: 1px solid #000;
}

#blog-posts-area #sidebar .featured-post p,
#single-blog-area #sidebar .featured-post p {
    margin-top: 10px;
}

#blog-posts-area #sidebar .social .social-icons,
#single-blog-area #sidebar .social .social-icons {
    list-style: outside none none;
    padding: 0;
    margin: 0;
}

#blog-posts-area #sidebar .social .social-icons li,
#single-blog-area #sidebar .social .social-icons li {
    line-height: 22px;
    display: inline-block;
    margin-right: 8px;
}

#blog-posts-area #sidebar .social .social-icons li a,
#single-blog-area #sidebar .social .social-icons li a {
    padding-bottom: 8px;
    display: block;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #aaaaaa;
    color: #444;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 16px;
    text-align: center;
}

#blog-posts-area #sidebar .social .social-icons li a:hover,
#single-blog-area #sidebar .social .social-icons li a:hover {
    background-color: #000;
    color: #fff;
}

.single-blog-details blockquote {
    font-size: 14px;
    font-style: italic;
    line-height: 30px;
    background-color: #f2f2f2;
    margin-top: 15px;
    margin-bottom: 15px;
    border-left: 5px solid #000;
    padding: 10px 20px;
    margin: 0 0 20px;
}

.discussion-list-area {
    padding: 30px;
    margin-bottom: 50px;
    background-color: #fff;
}

.discussion-list-area .discussion-title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 21px;
}

.discussion-list-area ul.discussion-list {
    list-style: none;
}

.discussion-list-area ul.discussion-list li.discussion-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
    padding-bottom: 25px;
}

.discussion-list-area ul.discussion-list li.discussion-item:last-child {
    border-bottom: none;
}

.discussion-meta h5 {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 14px;
}

.discussion-meta p {
    font-size: 12px;
}

.discussion-reply-link {
    font-weight: 600;
}

.discussion-reply-link:hover {
    color: #000;
}

.row.reply-area {
    margin-left: 120px;
    margin-top: 40px;
}

.discussion-form-container {
    background-color: #fff;
    padding: 30px;
    margin-bottom: 50px;
}

.discussion-form-container h3 {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 21px;
}

.discussion-form-container .form-control {
    background: #f2f2f2;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 15px;
    height: 45px;
}

.discussion-form-container textarea.form-control {
    height: auto;
    resize: none;
}


/*============ 13. Site Mobile Responsive ============*/

/*Responsive Max Width 992px*/

@media screen and (max-width: 992px) {
    #banner .banner-text h1 {
        font-size: 50px;
    }
    #banner .banner-text #typed {
        font-size: 30px;
    }
    #banner .banner-text .typed-cursor {
        font-size: 30px;
    }
    #about .about-info-container .about-info {
        text-align: center;
        margin-bottom: 60px;
        padding-right: 15px;
    }
    #about .about-info-container .about-skills {
        padding-left: 15px;
    }
    #about .about-info-container .about-skills h3 {
        text-align: center;
    }
    #blog-posts-area .pagination {
        margin-bottom: 50px;
    }
    .wave {
        height: 25px;
    }
}


/*Max Width 768px*/

@media screen and (max-width: 767px) {
    #banner .banner-text h1 {
        font-size: 32px;
        line-height: 50px;
    }
    #banner .banner-text #typed {
        font-size: 20px;
    }
    #banner .banner-text .typed-cursor {
        font-size: 20px;
    }
    .navbar .navbar-brand img {
        width: 80%;
    }
    .navbar.navbar-dark .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
    }
    .navbar.navbar-dark .navbar-collapse li.nav-item {
        border-bottom: 1px solid #111;
        margin-bottom: 4px;
    }
    .navbar.navbar-dark .navbar-collapse li.nav-item:last-child {
        margin-bottom: 0;
        border-bottom: 0px;
    }
    .navbar.navbar-light {
        text-align: center;
    }
    .navbar.navbar-light li.nav-item {
        border-bottom: 1px solid #eee;
        margin-bottom: 4px;
    }
    .navbar.navbar-light li.nav-item:last-child {
        margin-bottom: 0;
        border-bottom: 0;
    }
    #contact .message-box h2 {
        margin-top: 50px;
        text-align: left !important;
    }
    .blog-banner h1 {
        font-size: 32px;
    }
    .blog-banner .bread-crumb a {
        font-size: 14px;
    }
    .row.reply-area {
        margin-left: 40px;
        margin-top: 20px;
    }
}


/*============ 13. Particles Background ============*/

#banner #particles-js {
    position: absolute;
    height: 100vh;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 10;
}