/*========================================
Author Name:   Mironitem
Template Type: Personal Portfolio
Email:         mironbonny1994@gmail.com
Facebook:      https://www.facebook.com/mironcoder/
Linkedin:      https://www.linkedin.com/in/mironcoder/
Brand Color:   #fe6347, #48455a
Icon:          Flat Icon, Font Awesome
Text font:     Poppins
Version:       v1.0.01
-----------------------------

Thanks for purchasing the template. I hope the templete will come in handy. If you want to develop this template then you can contact me, I will develop you at a very reasonable price. In addition, I am available for any kind of support.

By the way,
Dont't forgot your feedback or ratings.

-----------------------------
## TABLE OF COMPONENT STYLE
-----------------------------
01. GEAR BUTTON
02. BACK2TOP BUTTON
03. ALL FORM
04. ALL BUTTON
05. DROPDOWN MENU
06. ALL ICON
07. SLIDER ARROW
08. BREADCRUMB
09. SELECT OPTION
10. PAGINATION
11. NAV TABS
12. STAR RATING

-----------------------------
## TABLE OF ELEMENT STYLE
-----------------------------
01. SECTION HEADING
02. RESUME CARD
03. REFERENCE
04. SERVICE CARD
05. PORTFOLIO CARD
06. SKILLS CARD
07. COUNTER CARD
08. PRICING CARD
09. TESTIMONIAL CARD
10. BLOG CARD
11. FEATURE CARD

-----------------------------
## TABLE OF LAYOUT STYLE
-----------------------------
01. NAVBAR
02. CONTACT
03. FOOTER 
04. INNER BANNER

=========================================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
/*=====================================
            ALL COMMON STYLE
======================================*/
* {
  margin: 0px;
  padding: 0px;
  outline: 0px;
}

img {
  vertical-align: middle;
}

a {
  text-decoration: none;
  display: inline-block;
}

a:hover {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span,
label {
  margin-bottom: 0px;
}

html,
body {
  scroll-behavior: smooth;
}

body {
  color: #dddddd;
  background: #232338;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  line-height: 28px;
}

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

h1 {
  font-size: 35px;
  line-height: 48px;
}

h2 {
  font-size: 35px;
  line-height: 45px;
}

h3 {
  font-size: 32px;
  line-height: 42px;
}

h4 {
  font-size: 22px;
  line-height: 32px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #777777;
  font-size: 15px;
  letter-spacing: 0.3px;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #777777;
  font-size: 15px;
  letter-spacing: 0.3px;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #777777;
  font-size: 15px;
  letter-spacing: 0.3px;
}

input::placeholder,
textarea::placeholder {
  color: #777777;
  font-size: 15px;
  letter-spacing: 0.3px;
}

button:focus {
  outline: none;
}

/*=====================================
        GEAR BUTTON PART STYLE
======================================*/
.gear-btn {
  position: fixed;
  top: 30%;
  right: 0px;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  background: #f3f3f3;
  border-radius: 30px 0px 0px 30px;
  -webkit-box-shadow: -3px 0px 8px 0px rgba(0, 0, 0, 0.3);
          box-shadow: -3px 0px 8px 0px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.gear-btn img {
  width: 20px;
  border-radius: 50%;
}

/*=====================================
        BACK2TOP BUTTON PART STYLE
======================================*/
.back2top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: none;
}

.back2top-btn i {
  width: 48px;
  height: 48px;
  font-size: 16px;
  color: #f3f3f3;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, left bottom, from(#fe6347), to(#ee563b));
  background: linear-gradient(#fe6347, #ee563b);
  -webkit-box-shadow: 0px 0px 15px 3px rgba(254, 99, 71, 0.5);
          box-shadow: 0px 0px 15px 3px rgba(254, 99, 71, 0.5);
  -webkit-animation: mahmud 2s infinite;
          animation: mahmud 2s infinite;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

@-webkit-keyframes mahmud {
  0% {
    margin-bottom: 0px;
  }
  50% {
    margin-bottom: 15px;
  }
}

@keyframes mahmud {
  0% {
    margin-bottom: 0px;
  }
  50% {
    margin-bottom: 15px;
  }
}

@media (max-width: 575px) {
  .back2top-btn i {
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
  }
}

/*=====================================
         FORM ROUND GRID STYLE
======================================*/
.form-round-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: #252549;
  border-radius: 30px;
  padding: 6px;
  -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
}

.form-round-grid input {
  width: 293px;
  height: 45px;
  border: none;
  background: transparent;
  padding: 0px 20px;
}

.form-round-grid .btn {
  padding: 0px;
}

.form-round-grid .btn i {
  margin: 0px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
}

.form-round-grid .btn-inline:hover {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

@media (max-width: 1199px) {
  .form-round-grid input {
    width: 83%;
  }
}

/*=====================================
            NAVBAR SEARCH STYLE
======================================*/
.navbar-src {
  height: 50px;
  padding: 10px;
  border-radius: 40px;
  background: #48455a;
  margin-left: 15px;
}

.navbar-src:focus-within input {
  width: 200px;
  padding-left: 15px;
}

.navbar-src:focus-within a {
  font-size: 12px;
  color: #f3f3f3;
  background: #fe6347;
}

.navbar-src input {
  border: none;
  background: none;
  width: 0px;
  float: left;
  color: #f3f3f3;
  font-size: 15px;
  line-height: 30px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.navbar-src input::-webkit-input-placeholder {
  color: #e7e7e7;
}

.navbar-src input:-ms-input-placeholder {
  color: #e7e7e7;
}

.navbar-src input::-ms-input-placeholder {
  color: #e7e7e7;
}

.navbar-src input::placeholder {
  color: #e7e7e7;
}

.navbar-src a {
  border: none;
  float: right;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  color: #fe6347;
  background: transparent;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.navbar-src a:hover {
  color: #fff;
}

/*=====================================
            CONTACT FORM STYLE
======================================*/
.input-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.input-grid input {
  width: 297px;
  margin: 10px;
  border: none;
  outline: none;
  height: 50px;
  padding: 0px 20px;
  border-radius: 30px;
  color: #f5f5f5;
  background: #252549;
  border: 1px solid transparent;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.input-grid input:focus-within {
  border: 1px solid #fe6347;
}

.input-grid textarea {
  border: none;
  outline: none;
  resize: none;
  padding: 20px;
  margin: 10px;
  border-radius: 30px;
  height: 200px;
  width: 100%;
  border: 1px solid transparent;
  color: #f5f5f5;
  background: #252549;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.input-grid textarea:focus-within {
  border: 1px solid #fe6347;
}

::-webkit-file-upload-button {
  border: none;
  outline: none;
  background: transparent;
  text-transform: capitalize;
  margin-top: 9px;
  cursor: pointer;
  color: #777777;
  font-size: 15px;
  letter-spacing: 0.3px;
}

.input-btn .btn {
  margin: 30px 0px 0px 10px;
}

@media (max-width: 767px) {
  .input-grid input {
    width: 100%;
  }
}

@media (max-width: 991px) {
  .contact-form {
    text-align: center;
    margin-bottom: 50px;
  }
  .input-grid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .input-btn .btn {
    margin: 30px 0px 0px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .input-grid input {
    width: 245px;
  }
}

/*=====================================
      INNER PORTFOLIO SEARCH STYLE
======================================*/
.port-src {
  text-align: center;
  margin-bottom: 35px;
}

.port-form {
  padding: 7px;
  border-radius: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #252549;
  display: inline-block;
  -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.2);
}

.port-form input {
  border: none;
  width: 320px;
  height: 50px;
  padding: 0px 20px;
  background: transparent;
}

.port-form .btn-inline:hover {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

@media (max-width: 575px) {
  .port-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-radius: 15px;
    padding: 15px 10px;
  }
  .port-form input {
    width: 100%;
    border-bottom: 1px solid #444444;
  }
  .port-form .custom-select {
    width: 100%;
    height: 45px;
    border-left: none;
    margin-bottom: 15px;
    border-bottom: 1px solid #444444;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .port-form input {
    width: 215px;
  }
}

/*=====================================
            FORM BLOCK STYLE
======================================*/
.form-block input {
  width: 100%;
  margin: 10px;
  border: none;
  outline: none;
  height: 50px;
  padding: 0px 20px;
  border-radius: 30px;
  color: #f5f5f5;
  background: #252549;
  border: 1px solid transparent;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.form-block input:focus-within {
  background: #252549;
  border: 1px solid #fe6347;
}

.form-block textarea {
  border: none;
  outline: none;
  resize: none;
  padding: 20px;
  margin: 10px;
  border-radius: 30px;
  height: 200px;
  width: 100%;
  border: 1px solid transparent;
  color: #f5f5f5;
  background: #252549;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.form-block textarea:focus-within {
  background: #252549;
  border: 1px solid #fe6347;
}

.form-block .btn {
  width: 100%;
  margin: 10px;
}

/*=====================================
            ALL BUTTON STYLE
======================================*/
.btn {
  border: none;
  font-size: 14px;
  font-weight: 500;
  padding: 16px 35px;
  border-radius: 50px;
  text-transform: uppercase;
  text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 8px 25px 0px rgba(72, 69, 90, 0.1);
          box-shadow: 0px 8px 25px 0px rgba(72, 69, 90, 0.1);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.btn:focus {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.btn i {
  margin-right: 8px;
  margin-top: -1px;
}

.duel-btn .btn {
  margin-right: 15px;
}

.duel-btn .btn:nth-child(1) {
  background: #48455a;
}

.duel-btn .btn:nth-child(2):hover {
  background: #fe6347;
}

.btn-inline {
  color: #f3f3f3;
  background: #fe6347;
}

.btn-inline:hover {
  color: #f3f3f3;
  background: #48455a;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0px 25px 60px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 25px 60px 0px rgba(0, 0, 0, 0.1);
}

.btn-outline {
  color: #fe6347;
  background: #48455a;
  border: 1px solid #fe6347;
}

.btn-outline:hover {
  color: #f3f3f3;
  background: #fe6347;
}

.btn-light {
  color: #555555;
  background: #e7e7e7;
}

.btn-light:hover {
  background: #dfdfdf;
}

@media (max-width: 450px) {
  .duel-btn {
    width: 210px;
    margin: 0 auto;
    text-align: center;
  }
  .duel-btn .btn {
    margin: 8px 0px;
  }
}

@media (min-width: 451px) and (max-width: 575px) {
  .duel-btn .btn {
    margin: 0px 8px;
  }
}

/*=====================================
            DROPDOWN MENU STYLE
======================================*/
.navbar-dropdown {
  position: relative;
}

.navbar-dropdown:hover .dropdown-list {
  visibility: visible;
  opacity: 1;
  top: 98px;
}

.dropdown-indicator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.dropdown-indicator span {
  margin-right: 5px;
}

.dropdown-indicator i {
  font-size: 10px;
}

.dropdown-list {
  position: absolute;
  top: 130px;
  left: 0px;
  z-index: 1;
  width: 240px;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  border-radius: 3px;
  background: #2b2c41;
  border-top: 2px solid #fe6347;
  -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.3);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.dropdown-list li {
  border-bottom: 1px solid #444444;
}

.dropdown-list li:last-child {
  border-bottom: none;
}

.dropdown-link {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 25px;
  color: #dddddd;
  text-transform: capitalize;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.dropdown-link:hover {
  color: #f3f3f3;
  background: #fe6347;
}

.dropdown-toggle::after {
  margin-left: 2px;
}

@media (max-width: 1270px) {
  .navbar-dropdown {
    position: inherit;
  }
  .dropdown-indicator {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .dropdown-indicator i {
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
  }
  .dropdown-indicator.active i {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .dropdown-list {
    position: inherit;
    visibility: visible;
    opacity: 1;
    width: 100%;
    display: none;
  }
}

/*=====================================
            ALL ICON STYLE
======================================*/
.icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
  font-size: 16px;
  text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.25);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.icon-inline {
  color: #f3f3f3;
  background: #fe6347;
}

.icon-inline:hover {
  color: #f3f3f3;
  background: #48455a;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0px 5px 15px 0px rgba(72, 69, 90, 0.3);
          box-shadow: 0px 5px 15px 0px rgba(72, 69, 90, 0.3);
}

.icon-outline {
  color: #fe6347;
  background: #48455a;
  border: 1px solid #fe6347;
}

.icon-outline:hover {
  color: #f3f3f3;
  background: #fe6347;
}

.icon-light {
  color: #555555;
  background: #f5f5f5;
}

.icon-light:hover {
  background: #dfdfdf;
}

@media (max-width: 400px) {
  .icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
}

@media (min-width: 401px) and (max-width: 991px) {
  .icon {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
  }
}

/*=====================================
            SLIDER ARROW STYLE
======================================*/
.dandik,
.bamdik {
  position: absolute;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 16px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
  color: #f3f3f3;
  background: #fe6347;
  text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 1;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.dandik:hover,
.bamdik:hover {
  color: #f3f3f3;
  background: #48455a;
}

.dandik {
  top: 50%;
  right: -15px;
}

.bamdik {
  top: 50%;
  left: -15px;
}

@media (min-width: 576px) and (max-width: 1199px) {
  .dandik {
    right: 0px;
  }
  .bamdik {
    left: 0px;
  }
}

/*=====================================
         BREADCRUMB PART STYLE
======================================*/
.breadcrumb {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0px;
  margin-bottom: 0px;
  background: none;
  border-radius: 0px;
}

.breadcrumb-item {
  text-transform: capitalize;
}

.breadcrumb-item a {
  color: #f3f3f3;
  text-transform: capitalize;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #dddddd;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #f3f3f3;
}

/*=====================================
            SELECT OPTION STYLE
======================================*/
.custom-select {
  border-radius: 0px;
  background: #252549;
  color: #777777;
  border: none;
  width: 120px;
  font-size: 14px;
  border-left: 1px solid #444444;
  cursor: pointer;
}

.custom-select:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

/*=====================================
         PAGINATION PART STYLE
======================================*/
.pagination {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.page-item {
  margin: 0px 6px;
}

.page-item:first-child .page-link, .page-item:last-child .page-link {
  border-radius: 50%;
}

.page-item .active {
  color: #f3f3f3;
  background: #fe6347;
}

.page-link {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  border: none;
  padding: 0px;
  color: #dddddd;
  background: #48455a;
}

.page-link:hover {
  color: #f3f3f3;
  background: #fe6347;
}

.page-link:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

/*=====================================
          NAV-TABS BUTTON STYLE
======================================*/
.nav {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.nav-tabs li {
  width: 100%;
}

.nav-tabs li .nav-link {
  width: 100%;
  border: none;
  padding: 16px 0px;
  border-radius: 5px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #f5f5f5;
  border-bottom: 3px solid transparent;
  text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
}

.nav-tabs li .nav-link:hover {
  border-color: transparent;
}

.nav-tabs li .active {
  color: #fe6347 !important;
  background: #252549 !important;
  border-color: #fe6347 !important;
}

.tab-pane {
  padding: 50px 50px 0px;
  display: none;
}

.tab-pane.active {
  display: block;
}

@media (max-width: 575px) {
  .nav-tabs li .nav-link {
    font-size: 12px;
    padding: 10px 0px;
  }
  .tab-pane {
    padding: 30px 0px;
  }
}

/*=====================================
            STAR RATING STYLE
======================================*/
.star-rating {
  direction: rtl;
  margin: 0px 0px 25px 15px;
}

.star-rating input {
  display: none;
}

.star-rating input:checked ~ label::after {
  opacity: 1;
}

.star-rating label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 15px;
}

.star-rating label:hover::after {
  opacity: 1;
}

.star-rating label:hover:hover ~ label::after {
  opacity: 1;
}

.star-rating label::before {
  content: "\f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 35px;
  display: block;
  color: #555555;
}

.star-rating label::after {
  content: "\f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 35px;
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  color: #ffcc23;
  opacity: 0;
}

/*=====================================
          SECTION HEADING STYLE
======================================*/
.section-heading {
  text-align: center;
  margin-bottom: 48px;
}

.section-heading p {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #f5f5f5;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.section-heading p span {
  color: #fe6347;
}

.section-heading h2 {
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 767px) {
  .section-heading {
    margin-bottom: 25px;
  }
  .section-heading p {
    font-size: 16px;
  }
  .section-heading h2 {
    font-size: 24px;
    line-height: 32px;
  }
}

/*=====================================
          RESUME CARD STYLE
======================================*/
.resume-card {
  width: 100%;
  border-radius: 8px;
  background: #252549;
  padding: 50px 0px 45px;
  margin-bottom: 30px;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.15);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.resume-card:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  background: #fe6347;
}

.resume-card:hover h4 {
  color: #fe6347;
  background: #f3f3f3;
}

.resume-card:hover ul li i,
.resume-card:hover ul li h5,
.resume-card:hover ul li h6 {
  color: #f3f3f3;
}

.resume-card span {
  color: #524c5f;
  font-size: 70px;
  position: absolute;
  top: 50px;
  right: 25px;
}

.resume-card h4 {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-transform: capitalize;
  display: inline-block;
  color: #f3f3f3;
  background: #fe6347;
  margin-bottom: 30px;
  padding: 15px 30px 15px 30px;
  border-radius: 0px 30px 30px 0px;
  -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.resume-card ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.resume-card ul li:nth-child(1) {
  margin-right: 30px;
}

.resume-card ul li i {
  color: #777777;
  display: block;
  font-size: 45px;
}

.resume-card ul li h5 {
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 12px;
}

.resume-card ul li h6 {
  color: #e44a00;
  font-weight: 500;
  text-transform: capitalize;
}

/*=====================================
          REFERENCE PART STYLE
======================================*/
.refer-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.refer-img {
  border-radius: 50%;
  border: 5px solid #fe6347;
  -webkit-box-shadow: 0px 0px 60px 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 60px 3px rgba(0, 0, 0, 0.15);
}

.refer-img img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 5px solid #232338;
}

.refer-content {
  width: 100%;
  text-align: center;
  padding: 35px 45px;
  border-radius: 8px;
  background: #252549;
  -webkit-box-shadow: 0px 0px 60px 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 60px 3px rgba(0, 0, 0, 0.15);
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
  position: relative;
}

.refer-content h4 {
  text-transform: capitalize;
  margin-bottom: 5px;
}

.refer-content p {
  font-weight: 500;
}

.refer-content p span {
  display: block;
}

.refer-contact {
  position: absolute;
  bottom: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 105px;
}

.refer-contact li {
  display: inline-block;
  margin: 0px 5px;
}

.refer-contact .icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

/*=====================================
            SERVICE CARD STYLE
======================================*/
.service-card {
  margin-bottom: 30px;
  background: #252549;
  text-align: center;
  padding: 60px 40px 65px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.service-card:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

.service-card:hover::after {
  -webkit-clip-path: circle(75%);
          clip-path: circle(75%);
}

.service-card:hover i {
  visibility: hidden;
}

.service-card:hover h4,
.service-card:hover p {
  color: #f3f3f3;
}

.service-card::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #fe6347;
  -webkit-clip-path: circle(20% at 100% 0%);
          clip-path: circle(20% at 100% 0%);
  z-index: -1;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.service-card h3 {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  color: #f3f3f3;
  font-size: 24px;
  font-weight: 500;
  position: absolute;
  top: 5px;
  right: 5px;
}

.service-card span {
  position: absolute;
  top: 15px;
  left: 15px;
  color: #524c5f;
  font-size: 80px;
  line-height: 80px;
}

.service-card i {
  color: #fe6347;
  font-size: 45px;
  line-height: 45px;
  display: inline-block;
  margin-bottom: 18px;
}

.service-card h4 {
  color: #f5f5f5;
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 35px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.service-card p {
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.service-ghape {
  margin-top: -80px;
}

/*=====================================
          PORTFOLIO CARD STYLE
======================================*/
.port-card {
  margin: 0px 25px;
  border-radius: 8px;
  position: relative;
}

.port-card:hover .port-oly {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: center;
          transform-origin: center;
}

.port-img img {
  width: 100%;
  border-radius: 8px;
}

.port-oly {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.port-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  width: 160px;
}

.port-btn .btn {
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 10px 25px;
  margin: 12px 0px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.port-btn .btn-inline {
  color: #fe6347;
  background: #f3f3f3;
}

.port-btn .btn-inline:hover {
  color: #fff;
  background: #fe6347;
}

.port-text {
  position: absolute;
  bottom: 30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  padding: 0px 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.port-text h6 {
  color: #f3f3f3;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin-left: 15px;
  position: relative;
}

.port-text h6::before {
  position: absolute;
  content: "";
  top: 50%;
  left: -15px;
  width: 3px;
  height: 100%;
  background: #fe6347;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.port-text a {
  width: 38px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 8px;
  font-size: 16px;
  background: #dddddd;
  color: #fe6347;
}

.port-text a:hover {
  color: #f3f3f3;
  background: #fe6347;
}

/*=====================================
          SKILLS CARD STYLE
======================================*/
.skills-card {
  background: #252549;
  text-align: center;
  border-radius: 5px;
  padding: 30px 0px 0px;
  margin-bottom: 30px;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.15);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.skills-card:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  background: #fe6347;
}

.skills-card:hover .skills-img {
  background: #f3f3f3;
  -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.2);
}

.skills-card:hover .skills-img img {
  height: 35px;
}

.skills-card:hover .skills-name p {
  color: #f3f3f3;
}

.skills-img {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  margin: 0px auto 30px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.skills-img img {
  width: auto;
  height: 60px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.skills-name {
  border-top: 1px solid #444444;
}

.skills-name p {
  color: #f5f5f5;
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 0px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

/*=====================================
          COUNTER CARD STYLE
======================================*/
.counter-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.counter-card i {
  font-size: 70px;
  line-height: 70px;
  margin-right: 25px;
}

.count-1 i {
  background: -webkit-linear-gradient(#38ef7d, #35df76);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.count-2 i {
  background: -webkit-linear-gradient(#fc4a1a, #f7b733);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.count-3 i {
  background: -webkit-linear-gradient(#ADD100, #a1c004);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.counter-info h3 {
  color: #fff;
  font-size: 45px;
  font-weight: 600;
  margin-bottom: 13px;
}

.counter-info p {
  font-size: 18px;
  color: #f3f3f3;
  text-transform: capitalize;
}

/*=====================================
          PRICING CARD STYLE
======================================*/
.pricing-card {
  text-align: center;
  background: #252549;
  border-radius: 10px;
  margin: 0px 8px;
  padding: 30px 50px 30px;
  -webkit-box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.pricing-card:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  background: #fe6347;
}

.pricing-card:hover h3,
.pricing-card:hover h4,
.pricing-card:hover p,
.pricing-card:hover .pricing-list li {
  color: #f3f3f3;
}

.pricing-card:hover p::before {
  background: #ff9683;
}

.pricing-card:hover .pricing-btn .btn-inline {
  color: #fe6347;
  background: #f3f3f3;
}

.pricing-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #f3f3f3;
  margin-bottom: 80px;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.pricing-card h3::before {
  position: absolute;
  content: "";
  top: -50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 120px;
  height: 130px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9068), to(#ff4b1f));
  background-image: linear-gradient(#ff9068, #ff4b1f);
  z-index: -1;
  border-radius: 30px 0px 50% 50%;
  -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}

.pricing-card h4 {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -2px;
  color: #f5f5f5;
  margin-bottom: 3px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.pricing-card p {
  color: #dddddd;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 45px;
  position: relative;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.pricing-card p::before {
  position: absolute;
  content: "";
  bottom: -23px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #444444;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.pricing-list {
  text-align: left;
  list-style: disc;
  margin-bottom: 35px;
  display: inline-block;
}

.pricing-list li {
  color: #dddddd;
  text-transform: capitalize;
  padding-left: 10px;
  margin-bottom: 20px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.pricing-list li:last-child {
  margin-bottom: 0px;
}

.pricing-btn .btn {
  color: #f3f3f3;
  background: #48455a;
  -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.pricing-recom {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  background: #fe6347;
}

.pricing-recom:hover {
  -webkit-transform: scale(1.1) translateY(-3px);
          transform: scale(1.1) translateY(-3px);
}

.pricing-recom h3,
.pricing-recom h4,
.pricing-recom p,
.pricing-recom .pricing-list li {
  color: #f3f3f3;
}

.pricing-recom p::before {
  background: #ff9683;
}

.pricing-recom .pricing-btn .btn-inline {
  color: #fe6347;
  background: #f3f3f3;
}

/*=====================================
          TESTIMONIAL CARD STYLE
======================================*/
.testi-card {
  margin: 0px 15px;
  padding: 45px 30px 40px;
  text-align: center;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background: #252549;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.testi-card:hover {
  background: #fe6347;
}

.testi-card:hover .testi-quote p,
.testi-card:hover .testi-meta h5,
.testi-card:hover .testi-meta p {
  color: #f3f3f3;
}

.testi-card i {
  position: absolute;
  bottom: 10px;
  right: -50px;
  font-size: 150px;
  color: #524c5f;
}

.testi-quote {
  margin-bottom: 30px;
}

.testi-quote p {
  font-size: 18px;
  color: #dddddd;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.testi-meta h5 {
  font-weight: 600;
  margin-bottom: 2px;
  color: #dddddd;
  text-transform: capitalize;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.testi-meta p {
  font-weight: 500;
  margin-bottom: 7px;
  color: #dddddd;
  text-transform: capitalize;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.testi-meta a {
  border-radius: 50%;
  border: 2px solid #fe6347;
}

.testi-meta a img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid #232338;
}

/*=====================================
            BLOG CARD STYLE
======================================*/
.blog-card {
  border-radius: 10px;
  margin-bottom: 50px;
}

.blog-card:hover .blog-oly {
  background: rgba(0, 0, 0, 0.3);
}

.blog-card:hover .blog-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.blog-card:hover .blog-text h4 a {
  color: #fe6347;
}

.blog-img {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 22px;
}

.blog-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.blog-oly {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.blog-oly p {
  position: absolute;
  top: 25px;
  left: 25px;
  padding: 4px 12px;
  background: #fe6347;
  border-radius: 5px;
  color: #f3f3f3;
  font-size: 13px;
  line-height: 22px;
  text-transform: capitalize;
}

.blog-content {
  padding: 0px 15px;
}

.blog-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 12px;
}

.blog-meta li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.blog-meta li i {
  margin-right: 8px;
}

.blog-meta li p {
  font-size: 15px;
  text-transform: capitalize;
}

.blog-text {
  margin-bottom: 20px;
}

.blog-text h4 {
  font-weight: 500;
}

.blog-text h4 a {
  color: #f5f5f5;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.blog-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.blog-link li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.blog-link li i {
  font-size: 18px;
  margin-right: 10px;
}

.blog-link li p {
  font-size: 15px;
  text-transform: capitalize;
}

.blog-link li a {
  font-size: 13px;
  line-height: 20px;
  padding: 6px 25px;
}

/*=====================================
         BLOG SUGGEST CARD STYLE
======================================*/
.blog-suggest {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #444444;
}

.suggest-img a img {
  width: 100px;
  height: auto;
  border-radius: 10px;
  margin-right: 15px;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}

.suggest-title {
  margin-bottom: 18px;
}

.suggest-title h6 {
  font-weight: 600;
  line-height: 24px;
}

.suggest-title h6 a {
  color: #f5f5f5;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.suggest-title h6 a:hover {
  color: #fe6347;
}

.suggest-date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.suggest-date i {
  margin-right: 10px;
}

.suggest-date p {
  font-size: 14px;
  text-transform: capitalize;
}

/*=====================================
            FEATURE CARD STYLE
======================================*/
.feature-card {
  width: 180px;
  margin: 0px 25px;
  text-align: center;
  border-radius: 8px;
  padding: 30px 15px 35px;
  background: #252549;
}

.feature-card:hover i {
  color: #fff;
  background: #fe6347;
}

.feature-card i {
  width: 55px;
  height: 55px;
  font-size: 24px;
  line-height: 55px;
  text-align: center;
  color: #fe6347;
  background: #48455a;
  border-radius: 50%;
  margin-bottom: 25px;
  display: inline-block;
  -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.2);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.feature-card h6 {
  font-weight: 500;
  text-transform: capitalize;
}

/*======================================
           NAVBAR PART STYLE
=======================================*/
.navbar-part {
  padding: 0px 15px;
}

.navbar-part .container {
  max-width: 1300px;
}

.navbar-fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 2;
  background: #202032;
  -webkit-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.5);
}

.navbar-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.navbar-logo img {
  width: 130px;
}

.navbar-toggle {
  border: none;
  outline: none;
  background: none;
  display: none;
}

.navbar-toggle i {
  background: #fe6347;
  color: #f3f3f3;
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 16px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.navbar-toggle i:hover {
  color: #f3f3f3;
  background: #f5f5f5;
}

.navbar-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.navbar-cross {
  position: absolute;
  top: 15px;
  left: 15px;
  display: none;
}

.navbar-cross i {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  font-size: 16px;
  color: #f5f5f5;
  background: #f3f3f3;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.navbar-cross i:hover {
  color: #f3f3f3;
  background: #fe6347;
}

.navbar-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.navbar-link {
  font-size: 15px;
  font-weight: 500;
  padding: 35px 15px;
  border-radius: 5px;
  color: #dddddd;
  -webkit-transform: skewX(-5deg);
          transform: skewX(-5deg);
  text-transform: capitalize;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.navbar-link:hover {
  color: #f3f3f3;
  background: #fe6347;
}

.navbar-item.active .navbar-link {
  color: #f3f3f3;
  background: #fe6347;
}

.navbar-btn {
  margin-left: 25px;
}

@media (max-width: 1270px) {
  .navbar-part {
    padding: 8px 15px;
  }
  .navbar-logo img {
    width: 110px;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-slide {
    position: fixed;
    top: 0px;
    right: -260px;
    z-index: 3;
    width: 250px;
    height: 100vh;
    padding: 70px 15px 0px;
    overflow-y: scroll;
    overflow-x: hidden;
    background: #f9f9f9;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
    -webkit-transition: all linear .4s;
    transition: all linear .4s;
  }
  .navbar-slide.active {
    right: 0px;
  }
  .navbar-cross {
    display: block;
  }
  .navbar-list {
    width: 100%;
    display: block;
    margin-bottom: 30px;
  }
  .navbar-list li {
    border-bottom: 1px solid #444444;
  }
  .navbar-link {
    width: 100%;
    padding: 12px 15px;
  }
  .navbar-src {
    margin-left: 0px;
    margin-bottom: 15px;
  }
  .navbar-src:focus-within input {
    width: 160px;
  }
  .navbar-btn {
    margin-left: 0px;
    width: 100%;
  }
  .navbar-btn .btn {
    display: block;
    padding: 14px 0px;
    margin-bottom: 50px;
  }
}

/*=====================================
            CONTACT PART STYLE
======================================*/
.contact-part {
  padding: 142px 0px 0px;
}

.contact-heading h2 {
  width: 420px;
}

.contact-address {
  text-align: center;
}

.contact-address:hover .address-icon .icon-inline {
  color: #f3f3f3;
  background: #fe6347;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

.address-icon {
  margin-bottom: 28px;
}

.address-icon .icon-inline {
  color: #f3f3f3;
  background: #48455a;
}

.address-text h4 {
  line-height: 20px;
  margin-bottom: 22px;
  text-transform: capitalize;
}

.address-text p {
  color: #f5f5f5;
  line-height: 24px;
}

.address-text p span {
  display: block;
  margin-top: 8px;
}

.contact-img img {
  width: 100%;
}

@media (max-width: 767px) {
  .contact-part {
    padding: 60px 0px 0px;
  }
  .contact-part .mb-5 {
    margin-bottom: 10px !important;
  }
  .contact-heading h2 {
    width: 100%;
  }
  .contact-address {
    margin-bottom: 30px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .address-text p {
    font-size: 15px;
  }
}

/*=====================================
            FOOTER PART STYLE
======================================*/
.footer-part {
  padding: 100px 0px 100px;
}

.footer-logo {
  text-align: center;
  margin-bottom: 50px;
}

.footer-logo a img {
  width: 160px;
}

.footer-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 55px;
}

.footer-icon li {
  margin: 0px 15px;
}

.footer-icon li .icon-inline {
  background: #48455a;
}

.footer-icon li .icon-inline:hover {
  background: #fe6347;
}

.footer-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.footer-text li {
  padding: 0px 25px;
  border-right: 2px solid #999999;
}

.footer-text li:last-child {
  border-right: none;
}

.footer-text li h6 {
  font-weight: 400;
}

.footer-text li h6 span {
  color: #fe6347;
}

.footer-text li h6 a {
  color: #fe6347;
}

@media (max-width: 767px) {
  .footer-part {
    padding: 60px 0px;
  }
  .footer-logo a img {
    width: 145px;
  }
  .footer-icon {
    margin-bottom: 45px;
  }
  .footer-icon li {
    margin: 0px 10px;
  }
  .footer-text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .footer-text li {
    padding: 0px;
    border: none;
    margin: 5px 0px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .footer-part {
    padding: 60px 0px;
  }
}

/*=====================================
         INNER BANNER PART STYLE
======================================*/
.inner-banner {
  background: url(../../images/inner-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.inner-oly {
  background: rgba(209, 65, 40, 0.9);
  padding: 98px 0px 175px;
}

.inner-content {
  text-align: center;
}

.inner-content h1 {
  font-size: 38px;
  line-height: 46px;
  color: #f3f3f3;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
}

@media (max-width: 575px) {
  .inner-oly {
    padding: 60px 0px 118px;
  }
  .inner-content h1 {
    font-size: 35px;
    line-height: 43px;
  }
}

/*=====================================
            BANNER PART STYLE
======================================*/
.banner-part {
  background: #202032;
  overflow: hidden;
  position: relative;
}

.banner-part .container {
  position: relative;
}

.banner-bg {
  background: url(../../images/banner-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 120px 0px;
}

.circle-shape {
  position: absolute;
  top: 93px;
  right: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: auto;
  height: auto;
  opacity: 0.5;
  -webkit-animation: hasan 4s linear infinite;
          animation: hasan 4s linear infinite;
}

@-webkit-keyframes hasan {
  0% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
}

@keyframes hasan {
  0% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
}

.star-shape {
  position: absolute;
  right: 0px;
  bottom: -135px;
  width: auto;
  height: 120px;
  opacity: 0.5;
  -webkit-animation: miron 4s linear infinite;
          animation: miron 4s linear infinite;
}

@-webkit-keyframes miron {
  0% {
    -webkit-transform: rotate(180deg) scale(1.2);
            transform: rotate(180deg) scale(1.2);
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(-180deg) scale(1.2);
            transform: rotate(-180deg) scale(1.2);
  }
}

@keyframes miron {
  0% {
    -webkit-transform: rotate(180deg) scale(1.2);
            transform: rotate(180deg) scale(1.2);
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(-180deg) scale(1.2);
            transform: rotate(-180deg) scale(1.2);
  }
}

.banner-img img {
  width: auto;
  height: 450px;
}

.banner-icon {
  margin-bottom: 45px;
}

.banner-icon li {
  display: inline-block;
  margin-right: 18px;
}

.banner-text {
  margin-bottom: 55px;
}

.banner-text span {
  font-size: 22px;
  font-weight: 500;
  color: #f5f5f5;
  text-transform: capitalize;
  margin-bottom: 13px;
}

.banner-text h1 {
  margin-bottom: 25px;
}

@media (max-width: 767px) {
  .banner-oly {
    padding: 40px 0px 50px;
    background-position: right;
  }
  .circle-shape {
    display: none;
  }
  .banner-img {
    margin-bottom: 45px;
  }
  .banner-img img {
    width: 100%;
    height: auto;
  }
  .banner-content {
    text-align: center;
  }
  .banner-icon li {
    margin: 0px 5px;
  }
  .banner-text {
    margin-bottom: 35px;
  }
  .banner-text h1 {
    font-size: 30px;
    line-height: 40px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .banner-img img {
    width: 100%;
    height: auto;
  }
  .banner-icon li {
    margin-right: 15px;
  }
  .banner-text {
    margin-bottom: 40px;
  }
  .banner-text h1 {
    font-size: 32px;
    line-height: 42px;
  }
  .banner-btn .btn {
    padding: 14px 22px;
    margin-right: 10px;
  }
  .banner-btn .btn:nth-child(2) {
    margin-right: 0px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .banner-img img {
    width: 100%;
    height: auto;
  }
}

/*=====================================
            RESUME PART STYLE
======================================*/
.resume-part {
  padding: 143px 0px 0px;
}

.resume-heading h2 {
  width: 440px;
}

.resume-cate-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.resume-cate-btn li {
  margin: 15px 25px;
}

.cate-btn {
  border: none;
  width: 130px;
  padding: 30px 0px;
  border-radius: 8px;
  text-align: center;
  color: #dddddd;
  background: #252549;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.2);
}

.cate-btn i {
  font-size: 22px;
  margin-bottom: 10px;
}

.cate-btn span {
  display: block;
  text-transform: capitalize;
}

.cate-btn.active {
  color: #f3f3f3;
  background: #fe6347;
}

@media (max-width: 767px) {
  .resume-part {
    padding: 60px 0px 0px;
  }
  .resume-heading h2 {
    width: 100%;
  }
  .resume-cate-btn {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .resume-cate-btn li {
    margin: 10px;
  }
  .cate-btn {
    width: 107px;
    padding: 25px 0px;
  }
  .cate-btn i {
    font-size: 20px;
  }
  .cate-btn p {
    font-size: 15px;
  }
}

/*=====================================
            ABOUT PART STYLE
======================================*/
.about-part {
  padding: 88px 0px 0px;
}

.about-summery {
  margin-bottom: 50px;
}

.about-summery h3 {
  font-weight: 600;
  margin-bottom: 38px;
}

.about-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 55px;
}

.about-list ul:first-child {
  margin-right: 80px;
}

.about-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 18px;
}

.about-list li:last-child {
  margin-bottom: 0px;
}

.about-list li h6 {
  text-transform: capitalize;
  font-weight: 600;
  margin-right: 15px;
}

.about-list li p {
  font-weight: 500;
}

.about-img img {
  width: auto;
  height: 450px;
  margin-left: 50px;
}

.exper-part,
.edu-part,
.refer-part {
  padding: 80px 0px 0px;
  display: none;
}

@media (max-width: 767px) {
  .about-part,
  .exper-part,
  .edu-part,
  .refer-part {
    padding: 40px 0px 0px;
  }
  .about-summery {
    margin-bottom: 30px;
  }
  .about-summery h3 {
    font-size: 26px;
    line-height: 36px;
    margin-bottom: 18px;
  }
  .about-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 15px;
  }
  .about-list ul {
    margin-bottom: 18px;
  }
  .about-btn {
    margin-bottom: 30px;
  }
  .about-img img {
    display: none;
  }
  .resume-card ul {
    margin: 0px 18px;
  }
  .refer-card {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .refer-content {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .about-part,
  .exper-part,
  .edu-part,
  .refer-part {
    padding: 60px 0px 0px;
  }
  .resume-card ul {
    margin: 0px 22px;
  }
  .refer-card {
    margin-bottom: 30px;
  }
  .about-img img {
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .about-part,
  .exper-part,
  .edu-part,
  .refer-part {
    padding: 60px 0px 0px;
  }
  .about-list ul:nth-child(1) {
    margin-right: 45px;
  }
  .about-list ul li h6 {
    font-size: 15px;
    margin-right: 8px;
  }
  .about-list ul li p {
    font-size: 15px;
  }
  .about-img img {
    width: 100%;
    height: auto;
    margin-left: 0px;
  }
  .refer-img img {
    width: 215px;
    height: 215px;
  }
  .refer-content {
    padding: 35px 25px;
  }
}

@media (min-width: 1200px) and (max-width: 1300px) {
  .about-img img {
    width: 100%;
    height: auto;
    margin-left: 0px;
  }
}

/*=====================================
            SERVICE PART STYLE
======================================*/
.service-part {
  padding: 144px 0px 0px;
}

.service-heading {
  margin-bottom: 130px;
}

.service-heading h2 {
  width: 500px;
}

.service-btn {
  text-align: center;
}

@media (max-width: 767px) {
  .service-part {
    padding: 35px 0px 0px;
  }
  .service-heading {
    margin-bottom: 40px;
  }
  .service-heading h2 {
    width: 100%;
  }
  .service-ghape {
    margin-top: 0px;
  }
  .service-card {
    padding: 50px 14px 55px;
  }
  .service-btn {
    margin-top: 30px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .service-heading {
    margin-bottom: 50px;
  }
  .service-ghape {
    margin-top: 0px;
  }
  .service-card {
    padding: 60px 34px 65px;
  }
  .service-btn {
    margin-top: 30px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .service-card {
    padding: 60px 30px 65px;
  }
}

/*=====================================
            CODING PART STYLE
======================================*/
.coding-part {
  padding: 143px 0px 0px;
}

.coding-heading h2 {
  width: 530px;
}

.coding-content h3 {
  color: #dddddd;
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
  margin-bottom: 20px;
}

.coding-content h3 span {
  font-weight: 700;
}

.coding-content p {
  width: 420px;
  margin-bottom: 45px;
}

.coding-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin-bottom: 25px;
}

.coding-list li:last-child {
  margin-bottom: 0px;
}

.coding-list li p {
  font-size: 18px;
}

.coding-round {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 25px;
  background: #fe6347;
  -webkit-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.3);
  position: relative;
}

.coding-round::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f3f3f3;
}

.coding-img img {
  width: 100%;
  margin-top: 45px;
}

@media (max-width: 575px) {
  .coding-part {
    padding: 60px 0px 0px;
  }
  .coding-heading h2 {
    width: 100%;
  }
  .coding-content h3 {
    font-size: 24px;
    line-height: 36px;
  }
  .coding-content p {
    width: 100%;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .coding-part {
    padding: 100px 0px 0px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .coding-content h3 {
    font-size: 24px;
    line-height: 36px;
  }
}

/*=====================================
          PORTFOLIO PART STYLE
======================================*/
.port-part {
  padding: 135px 0px 0px;
}

.port-part .container {
  max-width: 1300px;
}

.port-heading h2 {
  width: 570px;
}

.port-slider:hover .dandik,
.port-slider:hover .bamdik {
  visibility: visible;
  opacity: 1;
}

.port-slider .dandik,
.port-slider .bamdik {
  right: 25%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
}

.port-slider .bamdik {
  left: 25%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
}

.port-show-btn {
  text-align: center;
  margin-top: 60px;
}

@media (max-width: 575px) {
  .port-part {
    padding: 50px 0px 0px;
  }
  .port-card {
    margin: 0px 15px;
  }
}

@media (max-width: 767px) {
  .port-heading h2 {
    width: 100%;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .port-part {
    padding: 70px 0px 0px;
  }
  .port-card {
    margin: 0px 15px;
  }
}

/*=====================================
          SKILLS PART STYLE
======================================*/
.skills-part {
  padding: 145px 0px 0px;
}

.skills-heading h2 {
  width: 430px;
}

@media (max-width: 767px) {
  .skills-part {
    padding: 60px 0px 0px;
  }
  .skills-heading h2 {
    width: 100%;
  }
  .skills-parent .col-6 {
    padding: 0px 10px;
  }
  .skills-card {
    margin-bottom: 20px;
  }
}

/*=====================================
          DISCUSS PART STYLE
======================================*/
.discuss-part {
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}

.discuss-oly {
  background: #fe6347;
  border-radius: 10px;
  padding: 0px 15px;
  -webkit-box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.15);
}

.discuss-bg {
  background: url(../../images/discuss-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 70px 70px;
  border-radius: 10px;
}

.discuss-content h3 {
  color: #f3f3f3;
  font-size: 42px;
  line-height: 50px;
  margin-bottom: 22px;
}

.discuss-content p {
  color: #f3f3f3;
  font-size: 18px;
}

.discuss-btn {
  text-align: right;
}

.discuss-btn .btn {
  font-size: 16px;
  padding: 16px 40px;
  margin-top: 25px;
  -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}

.discuss-btn .btn-inline {
  color: #fe6347;
  background: #f3f3f3;
}

.discuss-btn .btn-inline:hover {
  color: #f3f3f3;
  background: #f5f5f5;
}

@media (max-width: 767px) {
  .discuss-part {
    -webkit-transform: translateY(15%);
            transform: translateY(15%);
  }
  .discuss-bg {
    padding: 45px 15px;
  }
  .discuss-content {
    text-align: center;
    margin-bottom: 15px;
  }
  .discuss-content h3 {
    font-size: 35px;
    line-height: 43px;
  }
  .discuss-btn {
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .discuss-part {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  .discuss-content p {
    font-size: 17px;
  }
  .discuss-btn .btn {
    margin-top: 70px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .discuss-part {
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
  }
}

/*=====================================
          COUNTER PART STYLE
======================================*/
.counter-part {
  background: #252549;
}

.counter-bg {
  background: url(../../images/counter-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 205px 0px 90px;
}

@media (max-width: 767px) {
  .counter-bg {
    padding: 100px 0px 60px;
  }
  .counter-card {
    width: 235px;
    margin: 0 auto 30px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .counter-card i {
    font-size: 55px;
    line-height: 55px;
  }
  .count-3 {
    margin-bottom: 0px;
  }
  .counter-info h3 {
    font-size: 35px;
    line-height: 43px;
    margin-bottom: 8px;
  }
  .counter-info p {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .counter-bg {
    padding: 120px 0px 60px;
  }
  .counter-card i {
    font-size: 50px;
    line-height: 50px;
  }
  .counter-info h3 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 0px;
  }
  .counter-info p {
    font-size: 14px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .counter-bg {
    padding: 180px 0px 90px;
  }
}

/*=====================================
          PRICING PART STYLE
======================================*/
.pricing-part {
  padding: 142px 0px 0px;
}

.pricing-heading {
  margin-bottom: 90px;
}

.pricing-heading h2 {
  width: 500px;
}

@media (max-width: 767px) {
  .pricing-part {
    padding: 60px 0px 0px;
  }
  .pricing-heading {
    margin-bottom: 50px;
  }
  .pricing-heading h2 {
    width: 100%;
  }
  .pricing-card {
    margin-bottom: 50px;
    padding: 30px 30px;
  }
  .pricing-recom {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .pricing-recom:hover {
    -webkit-transform: scale(1) translateY(-3px);
            transform: scale(1) translateY(-3px);
  }
}

@media (min-width: 451px) and (max-width: 767px) {
  .pricing-card {
    width: 400px;
    margin: 0 auto 50px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .pricing-part {
    padding: 90px 0px 0px;
  }
  .pricing-part .container {
    max-width: 750px;
  }
  .pricing-card {
    margin: 0px 3px;
    padding: 30px 25px;
  }
  .pricing-list li {
    font-size: 14px;
  }
  .pricing-btn .btn {
    font-size: 12px;
    padding: 15px 22px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .pricing-btn .btn {
    font-size: 13px;
    padding: 16px 23px;
  }
}

/*=====================================
            FAQ PART STYLE
======================================*/
.faq-part {
  padding: 175px 0px 0px;
}

.faq-heading h2 {
  width: 570px;
}

.faq-child {
  margin-bottom: 30px;
  background: #252549;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
  border-left: 3px solid #fe6347;
  border-right: 3px solid #fe6347;
}

.faq-child:hover .faq-que button {
  color: #fe6347;
}

.faq-que {
  cursor: pointer;
  padding: 18px 25px;
}

.faq-que button {
  border: none;
  outline: none;
  background: none;
  text-align: left;
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 500;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.faq-ans p {
  font-size: 14px;
  line-height: 26px;
  padding: 20px 25px;
  border-top: 1px solid #444444;
}

@media (max-width: 767px) {
  .faq-part {
    padding: 20px 0px 0px;
  }
  .faq-heading h2 {
    width: 100%;
  }
}

/*=====================================
          TESTIMONIAL PART STYLE
======================================*/
.testi-part {
  padding: 113px 0px 0px;
}

.testi-heading h2 {
  width: 570px;
}

.testi-btn {
  text-align: center;
  margin-top: 50px;
}

@media (max-width: 767px) {
  .testi-part {
    padding: 35px 0px 0px;
  }
  .testi-heading h2 {
    width: 100%;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .testi-part .container {
    max-width: 570px;
  }
}

/*=====================================
            BLOG PART STYLE
======================================*/
.blog-part {
  padding: 144px 0px 0px;
}

.blog-heading h2 {
  width: 420px;
}

.blog-btn {
  text-align: center;
  margin-top: 50px;
}

@media (max-width: 767px) {
  .blog-part {
    padding: 60px 0px 0px;
  }
  .blog-heading h2 {
    width: 100%;
  }
  .blog-card {
    margin-bottom: 45px;
  }
  .blog-text h4 {
    font-size: 18px;
    line-height: 26px;
  }
  .suggest-title {
    margin-bottom: 8px;
  }
  .blog-btn {
    margin-top: 15px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .blog-card {
    margin-bottom: 45px;
  }
  .blog-text h4 {
    font-size: 20px;
    line-height: 28px;
  }
  .blog-btn {
    margin-top: 25px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .blog-text h4 {
    font-size: 18px;
    line-height: 26px;
  }
  .suggest-title {
    margin-bottom: 10px;
  }
  .blog-btn {
    margin-top: 0px;
  }
}

/*=====================================
        INNER SERVICE PART STYLE
======================================*/
.inner-service {
  padding: 30px 0px 0px;
}

.inner-service .service-heading h2 {
  width: 550px;
}

@media (max-width: 767px) {
  .inner-service .service-heading h2 {
    width: 100%;
  }
}

/*=====================================
        INNER RESUME BANNER STYLE
======================================*/
.single-banner .inner-oly {
  padding: 115px 0px 115px;
}

.inner-exper,
.inner-edu,
.inner-refer {
  display: block;
}

.inner-about {
  padding: 142px 0px 0px;
}

.about-heading h2 {
  width: 450px;
}

.inner-exper {
  padding: 142px 0px 0px;
}

.exper-heading h2 {
  width: 400px;
}

.inner-edu {
  padding: 110px 0px 0px;
}

.edu-heading h2 {
  width: 400px;
}

.inner-refer {
  padding: 110px 0px 0px;
}

.refer-heading h2 {
  width: 400px;
}

@media (max-width: 767px) {
  .about-heading h2,
  .exper-heading h2,
  .edu-heading h2,
  .refer-heading h2 {
    width: 100%;
  }
  .single-banner .inner-oly {
    padding: 60px 0px;
  }
  .inner-about {
    padding: 70px 0px 0px;
  }
  .inner-exper {
    padding: 35px 0px 0px;
  }
  .inner-edu {
    padding: 40px 0px 0px;
  }
  .inner-refer {
    padding: 50px 0px 0px;
  }
  .inner-skills {
    padding: 40px 0px 0px;
  }
}

/*=====================================
            FEATURE PART STYLE
======================================*/
.feature-part {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media (max-width: 767px) {
  .feature-part {
    -webkit-transform: translateY(-35%);
            transform: translateY(-35%);
  }
  .feature-card {
    margin: 0px 8px;
    padding: 30px 18px 35px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .feature-card {
    padding: 30px 30px 35px;
  }
}

/*=====================================
        INNER PORTFOLIO PART STYLE
======================================*/
.inner-port-part {
  padding: 32px 0px 0px;
}

.inner-port-heading {
  text-align: center;
  margin-bottom: 45px;
}

.inner-port-heading h2 {
  font-size: 40px;
  text-transform: capitalize;
  margin-bottom: 22px;
}

.port-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 35px;
}

.port-menu li {
  margin: 0px 12px;
}

.port-menu li .active {
  color: #f3f3f3;
  background: #fe6347;
}

.menu {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: #f5f5f5;
  text-transform: capitalize;
  background: none;
  border: none;
  letter-spacing: 0.3px;
  padding: 5px 20px;
  border-radius: 8px;
  border: 1px solid #fe6347;
  border-bottom: 2px solid #fe6347;
}

.menu:focus {
  outline: none;
}

.port-parent {
  margin-bottom: 25px;
}

.port-parent .port-card {
  margin: 25px 10px;
}

.port-inner-btn {
  top: 40%;
}

@media (max-width: 767px) {
  .inner-port-part {
    padding: 0px 0px;
  }
  .inner-port-heading {
    margin-bottom: 30px;
  }
  .inner-port-heading h2 {
    font-size: 28px;
    line-height: 36px;
  }
  .port-menu {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .port-menu li {
    margin: 7px 7px;
  }
  .port-parent .port-card {
    margin: 15px 0px;
  }
}

@media (min-width: 420px) and (max-width: 575px) {
  .inner-port-part .container {
    max-width: 420px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .inner-port-part .container {
    max-width: 568px;
  }
  .port-parent .col-sm-6 {
    padding: 0px 10px;
  }
  .port-parent .port-card {
    margin: 10px 0px;
  }
}

/*=====================================
     PORTFOLIO CONTENT PART STYLE
======================================*/
.port-con-part {
  padding: 100px 0px 0px;
}

.port-con-title {
  margin-bottom: 30px;
}

.port-con-title h2 a {
  color: #f5f5f5;
}

.port-con-img {
  margin-bottom: 20px;
}

.port-con-img img {
  width: 100%;
  border-radius: 10px;
}

.port-con-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 30px;
  margin-right: 30px;
}

.port-con-meta li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.port-con-meta li:hover p span {
  color: #fe6347;
}

.port-con-meta li i {
  font-size: 14px;
  margin-right: 5px;
}

.port-con-meta li p {
  font-size: 14px;
}

.port-con-meta li p span {
  margin-left: 5px;
}

.port-con-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 30px;
}

.port-con-btn .btn {
  width: 280px;
  padding: 12px 0px;
  text-align: center;
  border-radius: 8px;
}

.port-con-btn .icon {
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 8px;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin-left: 20px;
}

.port-con-color {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.port-con-color span {
  width: 160px;
  height: 160px;
  line-height: 145px;
  text-align: center;
  font-weight: 500;
  margin: 0px 8px;
  display: inline-block;
  border-radius: 50%;
}

.port-con-color span:nth-child(1) {
  border: 10px solid #fe6347;
}

.port-con-color span:nth-child(1):hover {
  color: #f3f3f3;
  background: #fe6347;
}

.port-con-color span:nth-child(2) {
  border: 10px solid #f5f5f5;
}

.port-con-color span:nth-child(2):hover {
  color: #232338;
  background: #f5f5f5;
}

@media (max-width: 767px) {
  .port-con-part {
    padding: 60px 0px 0px;
  }
  .port-con-title h2 {
    font-size: 24px;
    line-height: 32px;
  }
  .port-con-meta {
    margin-right: 0px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .port-con-btn .btn {
    width: 100%;
  }
}

/*=====================================
      PORTFOLIO DETAILS PART STYLE
======================================*/
.port-det-part {
  padding: 60px 0px 0px;
}

.port-det-descrip p {
  line-height: 28px;
}

.port-det-descrip p span {
  display: block;
  margin-top: 30px;
}

.table th, .table td {
  color: #dddddd;
}

@media (max-width: 767px) {
  .port-det-part {
    padding: 25px 0px 25px;
  }
}

/*=====================================
            REVIEW FORM STYLE
======================================*/
.review-form h3 {
  margin: 0px 0px 25px 15px;
}

.review-form .btn {
  margin-left: 15px;
}

.grid-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 30px;
}

.grid-input input {
  width: 100%;
  height: 50px;
  margin: 0px 15px;
  padding: 0px 20px;
  border-radius: 8px;
  color: #f5f5f5;
  background: #252549;
  border: 1px solid #444444;
}

.grid-input input:focus-within {
  border-color: #fe6347;
}

.row-input {
  margin: 0px 15px 20px;
}

.row-input input,
.row-input textarea {
  width: 100%;
}

.row-input textarea {
  height: 250px;
  padding: 15px 20px;
  border-radius: 8px;
  color: #f5f5f5;
  background: #252549;
  border: 1px solid #444444;
}

.row-input textarea:focus-within {
  border-color: #fe6347;
}

.review-rating {
  margin: 0px 15px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.review-rating li {
  margin-right: 15px;
}

.review-rating li i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  background: #48455a;
  color: #555555;
  font-size: 14px;
  text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.review-rating li i:hover {
  color: #ffffff;
  background: #ffcc23;
}

@media (max-width: 991px) {
  .grid-input {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 0px;
  }
  .grid-input input {
    margin-bottom: 20px;
  }
  .row-input {
    margin: 0px 0px 20px;
  }
  .star-rating {
    margin: 0px 0px 20px !important;
  }
  .review-form .btn {
    margin-left: 0px;
  }
}

/*=====================================
        REVIEW LIST PART STYLE
======================================*/
.review-list {
  margin-bottom: 50px;
}

.review-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  padding: 30px 0px;
  border-bottom: 1px solid #444444;
}

.reviewer-img {
  margin-right: 30px;
}

.reviewer-img a img {
  width: 100px;
  border-radius: 8px;
}

.reviewer-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.reviewer-meta a {
  color: #f5f5f5;
  font-weight: 500;
}

.reviewer-meta p {
  font-size: 15px;
}

.reviewer-rating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 13px;
}

.reviewer-rating li {
  margin-right: 5px;
}

.reviewer-rating li i {
  font-size: 14px;
  color: #bbbbbb;
}

.reviewer-rating li .active {
  color: #ffcc23;
}

.reviewer-descrip {
  width: 100%;
}

@media (max-width: 575px) {
  .review-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .reviewer-img {
    margin-bottom: 25px;
  }
}

.port-footer {
  padding: 150px 0px 100px;
}

/*=====================================
         BLOG LIST PART STYLE
======================================*/
.blog-list-part {
  padding: 100px 0px 0px;
}

.blog-bar-src {
  margin-bottom: 45px;
}

.blog-bar-list {
  margin-bottom: 45px;
}

.blog-bar-list h4 {
  position: relative;
  display: inline-block;
  text-transform: capitalize;
  margin-bottom: 28px;
}

.blog-bar-list h4::before {
  position: absolute;
  content: "";
  top: 50%;
  right: -50px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 30px;
  height: 2px;
  background: #fe6347;
}

.blog-bar-list ul li:last-child {
  margin-bottom: 0px;
}

.blog-suggest-list {
  margin-bottom: 42px;
}

.blog-suggest-list .blog-suggest:last-child {
  margin-bottom: 0px;
}

.blog-cate-list ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #444444;
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.blog-cate-list ul li:hover h6 a {
  color: #fe6347;
}

.blog-cate-list ul li:hover p {
  background: #fe6347;
}

.blog-cate-list ul li h6 {
  font-weight: 500;
}

.blog-cate-list ul li h6 a {
  color: #f5f5f5;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.blog-cate-list ul li p {
  font-size: 13px;
  font-weight: 500;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  color: #f3f3f3;
  background: #48455a;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.blog-tag-list ul li {
  display: inline-block;
  margin: 0px 8px 12px 0px;
}

.blog-tag-list ul li a {
  color: #f5f5f5;
  font-size: 13px;
  padding: 2px 12px;
  border-radius: 30px;
  text-transform: capitalize;
  border: 1px solid #444444;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.blog-tag-list ul li a:hover {
  color: #f3f3f3;
  background: #fe6347;
  border-color: #fe6347;
}

.blog-follow-list ul li {
  display: inline-block;
  margin-right: 10px;
}

.blog-follow-list .icon {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.blog-banner-ad img {
  width: 100%;
  border-radius: 8px;
}

.blog-list-pagi {
  margin-top: 30px;
}

.blogbar-part {
  padding: 140px 0px 0px;
}

.blogbar-part .col-lg-4 {
  padding: 0px 25px;
}

@media (max-width: 767px) {
  .blogbar-part {
    padding: 30px 0px 0px;
  }
}

@media (max-width: 991px) {
  .blog-list-part {
    padding: 60px 0px 0px;
  }
  .content-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .blog-list-pagi {
    margin-top: 10px;
    margin-bottom: 50px;
  }
  .blog-list-pagi .page-item {
    margin: 0px 5px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .blog-list-part {
    padding: 80px 0px 0px;
  }
  .blog-follow-list ul li {
    margin-right: 6px;
  }
  .blogbar-part .icon {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }
}

/*=====================================
         BLOG DETAILS PART STYLE
======================================*/
.blog-details-part {
  padding: 100px 0px 55px;
}

.details-title {
  margin-bottom: 20px;
}

.details-title h2 a {
  color: #f5f5f5;
}

.details-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 30px;
}

.details-meta li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0px 18px;
  border-right: 1px solid #444444;
}

.details-meta li:first-child {
  padding-left: 0px;
}

.details-meta li:last-child {
  padding-right: 0px;
  border-right: none;
}

.details-meta li i {
  font-size: 14px;
  margin-right: 8px;
  margin-top: -2px;
}

.details-meta li p {
  font-size: 14px;
}

.details-img {
  margin-bottom: 30px;
}

.details-img img {
  width: 100%;
  border-radius: 10px;
}

.details-descrip p {
  margin-bottom: 35px;
}

.details-descrip p span {
  display: block;
  margin-top: 25px;
}

.details-subtitle {
  margin-bottom: 35px;
}

.details-subtitle h4 {
  margin-bottom: 25px;
}

.details-subtitle p a {
  text-decoration: underline;
}

.details-quote {
  padding: 50px 50px;
  background: #252549;
  border-left: 5px solid #fe6347;
  margin-bottom: 45px;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.details-quote p {
  font-size: 22px;
  font-style: italic;
  line-height: 35px;
  margin-bottom: 35px;
}

.details-quote span {
  font-weight: 500;
  -ms-flex-item-align: end;
      align-self: flex-end;
  text-transform: capitalize;
}

.details-list {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 50px;
}

.details-list li {
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .blog-details-part {
    padding: 60px 0px 10px;
  }
  .details-title h2 {
    font-size: 22px;
    line-height: 30px;
  }
  .details-meta {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .details-quote {
    padding: 40px 40px;
  }
  .details-quote p {
    font-size: 18px;
    line-height: 30px;
  }
  .details-quote span {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .blog-banner-ad {
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .details-meta li {
    padding: 0px 9px;
  }
  .details-meta li p,
  .details-meta li i {
    font-size: 13px;
  }
}

/*=====================================
        DETAILS SUGGEST PART STYLE
======================================*/
.suggest-slider {
  padding: 60px 0px 50px;
  border-top: 1px solid #444444;
  border-bottom: 1px solid #444444;
}

.suggest-slider li {
  width: 336px;
  margin: 0px 25px;
}

.suggest-slider li:hover img {
  opacity: 0.8;
}

.suggest-slider li:hover a {
  color: #fe6347;
}

.suggest-slider li img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 25px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.suggest-slider li h5 {
  text-transform: inherit;
  line-height: 26px;
  margin-bottom: 8px;
  font-weight: 600;
}

.suggest-slider li h5 a {
  color: #f5f5f5;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.suggest-slider li p {
  font-size: 14px;
}

.suggest-slider li p i {
  margin-right: 5px;
}

.suggest-slider .dandik {
  right: -25px;
}

.suggest-slider .bamdik {
  left: -25px;
}

/*=====================================
        DETAILS USER PART STYLE
======================================*/
.blog-user-part {
  padding: 76px 0px 0px;
}

.user-comment h4 {
  margin-bottom: 30px;
}

.comment-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 25px 0px 21px;
  border-bottom: 1px solid #444444;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 18px;
}

.comment a img {
  width: 80px;
  height: auto;
  border-radius: 5px;
  margin-right: 25px;
}

.comment-text p {
  line-height: 26px;
}

.comment-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
}

.comment-header li {
  font-size: 14px;
}

.comment-header li a {
  font-weight: 500;
  color: #f5f5f5;
}

.comment-header li i {
  margin-right: 5px;
}

.comment-reply {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.comment-reply a {
  font-size: 16px;
  font-weight: 600;
  color: #f5f5f5;
  text-transform: uppercase;
}

.comment-reply a:hover {
  color: #fe6347;
}

.comment-reply a i {
  margin-left: 8px;
}

.user-form h4 {
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .blog-user-part {
    padding: 50px 0px 0px;
  }
  .comment {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .comment-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .comment-item.ml-5 {
    margin-left: 2rem !important;
  }
  .user-form input,
  .user-form textarea,
  .user-form .btn {
    margin: 0px;
    margin-bottom: 20px;
  }
}

/*=====================================
    BLOG DETAILS RIGHTBAR PART STYLE
======================================*/
.details-rightbar .details-content {
  margin-right: 50px;
}

@media (max-width: 991px) {
  .details-rightbar .details-content {
    margin-right: 0px;
  }
}

/*=====================================
    BLOG DETAILS LEFTBAR PART STYLE
======================================*/
.details-leftbar .details-content {
  margin-left: 50px;
}

@media (max-width: 991px) {
  .details-leftbar .details-content {
    margin-left: 0px;
  }
}
/*# sourceMappingURL=dark-theme.css.map */