/************* CSS Styles ************************



    Template Name: Adrian - Personal Portfolio Template

    Author: cosmos-themes

    Version: 1.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;
}



p {

  color: #748182;

  line-height: 28px;
}



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: #000;

  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 #000;

  background: #000;

  color: #fff;

  text-decoration: none;
}

.main-button:hover img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(93%) saturate(0%) hue-rotate(74deg) brightness(107%) contrast(100%);
}

.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: #fff;

  z-index: 1;

  visibility: hidden;
}



.wave-primary {

  position: relative;
}

.wave-primary .wave {

  fill: #fff;

  display: block;

  visibility: visible;
}



.wave-secondary {

  position: relative;
}

.wave-secondary .wave {

  fill: #f2f2f2;

  visibility: visible;
}

.wave-grey {
  position: relative;
}

.wave-grey .wave {

  fill: #d9d9d9;

  visibility: visible;
}



.wave-footer {

  position: relative;
}

.wave-footer .wave {

  fill: #111c;

  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: 20px;

  padding-bottom: 20px;

  font-size: .90rem;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 9999;
}

.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: #fff;
}



.navbar-scroll-fixed {

  padding-top: 10px;

  padding-bottom: 10px;

  position: fixed;

  background-color: #fff;

  -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.4;

  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,

#banner .banner-text #typed2,

#banner .banner-text #typed3,

#banner .banner-text #typed4 {

  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: 120px;
}

#about p:last-child {

  margin-bottom: 0;

}

#about .about-info-container {

  background-color: #f3f3f3;

  margin-top: 20px;

  padding-top: 40px;

  padding-bottom: 40px;

  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.01);

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.01);

  -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 .info-item img {

  width: 100px;

  -webkit-border-radius: 90px;

  border-radius: 90px;

  border: 5px solid #fff;

  margin-bottom: 20px;
}

#about .about-info-container .about-info .info-item p {

  margin-bottom: 10px;
}

#about .about-info-container .about-info .info-item span {

  font-family: "Montserrat", sans-serif;

  font-weight: 500;

  color: #000;
}

#about .about-info-container .about-skills {

  padding-left: 50px;
}

#about .about-info-container .about-skills h3 {

  font-weight: 700;

  margin-bottom: 20px;
}

#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: #000;
}

#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: #616161;

  -webkit-transition: width 1.5s ease;

  -o-transition: width 1.5s ease;

  transition: width 1.5s ease;

  width: 0;
}



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

#services {

  padding-top: 120px;

  padding-bottom: 120px;
}

#services .services-item {

  text-align: center;

  padding: 0px;

  background-color: #000;

  border-radius: 5px 5px 0px 0px;

  margin-bottom: 0px;

  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  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);
}

#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: 20px;
}

#services .services-item h3 {

  font-family: "Poppins", sans-serif;

  font-size: 18px;

  font-weight: 500;

  margin-bottom: 15px;

  color: #fff;

}



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

#portfolio {

  padding-top: 120px;

  padding-bottom: 120px;

  background-color: #f2f2f2;
}



.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: #748182;

  list-style: none;

  margin-right: 10px;

  cursor: pointer;

  font-size: 15px;
}

.portfolio-header .portfolio-filter ul li.sel-item {

  color: #000 !important;

  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);
}

#poetry {

  /* background-color: #f2f2f2; */

  padding-top: 120px;

  padding-bottom: 120px;
}

#videos {

  padding-top: 120px;

  padding-bottom: 120px;
}

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

#blog {

  /* background-color: #f2f2f2; */

  padding-top: 120px;

  padding-bottom: 120px;
}



.blog-post {

  color: #000;

  margin-bottom: 40px;
}

.blog-post:hover {

  color: #000;

  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: .3;

  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;
}

.blog-post .post-body {

  font-size: 15px;

  line-height: 25px;
}

.blog-post .post-meta {

  font-size: 13px;

  font-weight: 400;

  color: #b8b8b8;

  float: right;
}

.blog-post .post-meta span {

  color: #000;

  font-weight: 600;
}



.view-more-button {

  text-align: center;

  margin-top: 20px;
}

.view-more-button a {

  display: inline-block;
}



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

#contact {
  background-color: #f2f2f2;

  padding-top: 120px;

  padding-bottom: 120px;
}

#contact h2 {

  margin-bottom: 30px;

  text-transform: uppercase;

  font-size: 24px;
}

#contact .contact-item h4 {

  font-weight: 600;

  margin-bottom: 6px;

  font-size: 14px;

  line-height: 21px;
}

#contact .contact-item p {

  font-size: 14px;

  line-height: 24px;
}

#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: transparent;

  border: 0;

  border-bottom: 1px solid #cccccc;

  height: 52px;

  -webkit-transition: all .4s ease;

  -o-transition: all .4s ease;

  transition: all .4s ease;
}

#contact form .form-group textarea.form-control {

  height: auto;
}

#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: #666666;
}



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

footer {

  padding-top: 10%;

  padding-bottom: 10%;

  background-repeat: no-repeat;

  background-size: cover;

  text-align: center;
}

footer ul.social-icons {

  padding: 0;

  margin: 0;

  list-style-type: none;
}

footer ul.social-icons li {

  display: inline-block;

  margin: 3px;

  background-color: #333;

  border-radius: 25px;

}

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: #fff;

  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: #ccc;
}

footer p {

  color: #fff;

  margin: 0;

  font-size: 14px;
}



.foot-copyright {

  background-color: #000;

  text-align: center;

  padding: 20px;

}



.foot-copyright p {

  margin-bottom: 0 !important;

  color: #fff !important;

}



/*============ 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;
}



@media screen and (max-width: 600px) {

  .categories {

    padding-bottom: 80px !important;

  }

  #banner .banner-text h1 {

    font-size: 20px;

    line-height: 40px;
  }

  .wave-footer .wave {

    top: 0;

  }



  .carousel-caption {

    top: 25% !important;

  }

}



/* .boat-img {

  background-image: url(../img/boat.webp);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  height: 500px;

} */