/*
  Theme Name: Bittu - Personal Portfolio/CV/Resume HTML5 Template
  Author: theme_group
  Support: robiulislamfree@gmail.com
  Description: bittu is a HTML5 template that fits all kinds of agency, Personal Portfolio, CV, Resume, Business Card, and Onepage website for all your needs. This template comes with a home page, about page, Portfolio Page & services page
  Tags: agency, business, company, creative portfolio, dark agency, digital, digital agency, freelancer, light dark theme, marketing, one-page, personal, resume, bittu psd template, bittu service
  Version: 1.0.0
*/
/* CSS Index
-----------------------------------
 /* 
 1. theme default area css
 2. preloader area css
 3. header area css
 4. nav menu area css
    i. sub menu
 5. off canvas menu area
 6. hero area css
 7. services area css
 8. about area css
 9. counter area css
 10. project area css
 11. team area css
 12. pricing area css
 13. testimonial area css
 14. blog area css
 15. breadcrumb area css
 16. blog details area css
    i. Blog Quote Area Css Style
    ii. Blog tags Area Css Style
    iii. Blog Comments Area Css Style
    iv. Blog Comments Form Area Css Style
17. footer area css
18. google map area css
19. Contact Form Area Css Style
 */

/* Google Fonts area */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/* theme default area css */
* {
  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
  font-size: 100%;
  line-height: inherit;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

body {
  font-family: "Montserrat", sans-serif;
  font-weight: normal;
  font-style: normal;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease-out 0s;
}

a,
.button,
.btn {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus,
.btn:focus {
  text-decoration: none;
  outline: none;
}

a,
a:focus,
a:hover {
  text-decoration: none;
  color: inherit;
}

.btn:focus,
button:focus,
input:focus,
textarea,
textarea:focus,
.form-control:focus {
  outline: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  color: #444444;
  font-style: normal;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

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

li {
  margin-bottom: 10px;
}

p {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: #444444;
}

hr {
  border-bottom: 1px solid #eceff8;
  border-top: 0 none;
  margin: 30px 0;
  padding: 0;
}

label {
  color: #7e7e7e;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

*::-moz-selection {
  background: #d6b161;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #444;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #106ad2;
  color: #fff;
  text-shadow: none;
}

*::-moz-placeholder {
  color: #555555;
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: #555555;
  font-size: 14px;
  opacity: 1;
}

.bittu-section-area h4 {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
  background: #f8f8f8;
  padding: 10px 10px 10px 25px;
  display: inline-block;
  position: relative;
}

.bittu-section-area h3 {
  font-size: 50px;
  text-transform: capitalize;
  font-weight: 600;
}

.bittu-section-area h4:before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  top: 0;
  bottom: 0;
  background: #ff2f00;
  transform: skew(-10deg);
}

/* preloader area css */
.preloader {
  background: #070707;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 99999;
}

.preloader .lds-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* header area css */
.bittu-main-manu-content {
  padding: 0px 50px;
}

.sticky {
  left: 0;
  margin: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  background: #000000;
  transition: 0.3s;
}

.bittu-header-wrape {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 70px;
  z-index: 99;
}

.header-logo {
  padding: 30px 0;
  display: inline-block;
  float: left;
}

ul.header-cta-btn li a {
  font-size: 14px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

ul.header-cta-btn li a i {
  margin-right: 5px;
}

ul.header-cta-btn {
  margin: 0;
  padding: 15px 0;
}

ul.header-cta-btn li {
  margin: 0;
}

.header-top-modal-btn {
  margin: 16px 30px 16px 0;
}

/* nav menu area css */
.main-menu-area {
  display: inline-block;
  position: relative;
}

.main-menu ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.main-menu nav>ul>li {
  display: inline-block;
  position: relative;
  margin: 0;
}

.main-menu nav>ul>li>a {
  color: #fff;
  display: block;
  font-size: 18px;
  font-weight: 600;
  padding: 35px 30px;
  transition: all 0.3s ease 0s;
  line-height: 1.25;
  font-family: "Montserrat", sans-serif;
  text-transform: capitalize;
}

.main-menu nav>ul>li:hover>a,
.main-menu nav>ul>li.active>a {
  color: #ff2f00;
}

/* sub menu */
.main-menu nav>ul>li .sub-menu {
  background: #ffffff none repeat scroll 0 0;
  border-top: 3px solid #ff2f00;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: all 0.4s ease-out;
  visibility: hidden;
  width: 220px;
  z-index: 9;
  transform-origin: top;
  transform: scaleY(0);
}

.main-menu nav>ul>li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

.main-menu nav>ul>li .sub-menu li {
  display: block;
  position: relative;
  margin: 0;
}

.main-menu nav>ul>li .sub-menu li a {
  color: #666666;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  padding: 13px 20px;
  text-transform: capitalize;
  display: block;
  font-family: "Montserrat", sans-serif;
}

.main-menu nav>ul>li:hover>.sub-menu li>a:hover {
  color: #fff;
  background: #090909;
}

.main-menu nav>ul>li>.sub-menu>li>.sub-menu {
  background: #ffffff none repeat scroll 0 0;
  border-top: 3px solid #ff5959;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  left: 100%;
  opacity: 0;
  position: absolute;
  top: 120%;
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 220px;
  z-index: 9;
}

.main-menu nav>ul>li>.sub-menu>li:hover .sub-menu {
  top: 0 !important;
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.header-top-btn {
  margin: 24px 0 0 35px;
  display: inline-block;
}

/* off canvas menu area */
.mobile-menu {
  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.mobile-menu:hover {
  color: #ff2f00;
}

.bittu-offcanvas-mobile-menu-area nav {
  border-top: 1px solid #f1f1f1;
  padding: 20px 0;
  margin: 20px 0;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li {
  display: block;
  position: relative;
  border-bottom: 1px solid #f1f1f1;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li:last-child a {
  padding-right: 0;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li>a {
  color: #111111;
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 10px;
  transition: all 0.3s ease 0s;
  line-height: 1.25;
  font-family: "Montserrat", sans-serif;
  text-transform: capitalize;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li>a>i {
  float: right;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li:hover>a,
.bittu-offcanvas-mobile-menu-area nav>ul>li.active>a {
  color: #ff2f00;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li .sub-menu {
  background: #ffffff none repeat scroll 0 0;
  border-top: 3px solid #ff2f00;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  left: 0;
  right: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: all 0.4s ease-out;
  visibility: hidden;
  z-index: 9;
  transform-origin: top;
  transform: scaleY(0);
}

.bittu-offcanvas-mobile-menu-area nav>ul>li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

.bittu-offcanvas-mobile-menu-area nav>ul>li .sub-menu li {
  display: block;
  position: relative;
  margin: 0;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li .sub-menu li a {
  color: #666666;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  padding: 13px 20px;
  text-transform: capitalize;
  display: block;
  font-family: "Montserrat", sans-serif;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li:hover>.sub-menu li>a:hover {
  color: #fff;
  background: #ff2f00;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li>.sub-menu>li>.sub-menu {
  background: #ffffff none repeat scroll 0 0;
  border-top: 3px solid #ff2f00;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  left: 100%;
  opacity: 0;
  position: absolute;
  top: 120%;
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 220px;
  z-index: 9;
}

.bittu-offcanvas-mobile-menu-area nav>ul>li>.sub-menu>li:hover .sub-menu {
  top: 0 !important;
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.offcanvas-social {}

.offcanvas-social ul {}

.offcanvas-social ul li {
  display: inline-block;
  margin: 0 5px;
}

.offcanvas-social ul li a {
  display: block;
  text-align: center;
  font-size: 20px;
  color: #1a2b3c;
  background: #ffffff;
  border-radius: 50%;
  line-height: 40px;
  width: 40px;
  height: 40px;
  transition: 0.3s all;
  border: 1px solid #f1f1f1;
}

.offcanvas-social ul li a:hover {
  color: #fff;
  background: #ff2f00;
}

/* hero area css */
.hero-content h2 {
  font-size: 90px;
  font-weight: 700;
  text-transform: capitalize;
  color: #fff;
}

.hero-content h2 span {
  color: #ff2f00;
}

.hero-content h3 {
  color: #fff;
  text-transform: capitalize;
  position: relative;
  display: inline-block;
  margin: 30px 0 40px;
  z-index: 1;
}

.hero-content h3:before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -5px;
  top: -5px;
  background: #ff2f00;
  z-index: -1;
  transform: skew(-20deg);
}

.hero-content p {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
}

.hero-bg {
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
  position: relative;
  min-height: 100vh;
  background-image: url(https://i.postimg.cc/gkV2cxJh/linkedin-background.jpg);
  background-color: #1a2b3c;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero-bg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(71deg, rgba(0, 0, 0, 1) 0%, rgba(255, 74, 84, 0) 100%);
  background: -webkit-linear-gradient(71deg, rgba(0, 0, 0, 1) 0%, rgba(255, 74, 84, 0) 100%);
  background: linear-gradient(71deg, rgba(0, 0, 0, 1) 0%, rgba(255, 74, 84, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#ff4a54", GradientType=1);
  z-index: -1;
}

.hero-content {
  padding: 250px 0;
}

@media (max-width: 1500px) {
  #home {
    text-align: center;
  }

  .hero-content .row {
    display: block;
    margin-inline: auto;
  }
}

@media (max-width: 660px) {
  .hero-content iFrame {
    width: 460px;
    height: 315px;
  }
}

@media (max-width: 480px) {
  .hero-content iFrame {
    width: 360px;
    height: 215px;
  }
}

/* services area css */
.bittu-single-services-area {
  margin: 30px 15px;
}

.bittu-single-services-area:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #f8f8f8;
  width: 100%;
  bottom: 0;
  z-index: -1;
  transition: all 0.3s;
}

.services-style-shape {
  position: absolute;
  top: 60px;
  right: 60px;
  transition: all 0.3s;
}

.services-style-shape svg {
  width: 24px;
  height: auto;
  fill: #595959;
  transition: all 0.3s;
}

.services-icon-area {
  display: inline-block;
  width: 130px;
  height: 130px;
  line-height: 130px;
  border: 2px solid #444444;
  transform: skew(-10deg);
  margin: -20px 0 20px;
  transition: all 0.3s;
}

.services-icon-area svg {
  width: 60px;
  height: 60px;
  transform: skew(10deg);
}

.services-content {
  padding: 0 12px 50px;
}

.services-content h3 {
  font-size: 28px;
  font-weight: 700;
  text-transform: capitalize;
}

.single-counter-area h3 span {
  margin-right: 10px;
}

.services-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.bittu-all-services .active.center .services-btn,
.bittu-single-services-area:hover .services-btn {
  opacity: 1;
  visibility: visible;
  bottom: -30px;
}

.bittu-all-services .active.center .services-icon-area,
.bittu-single-services-area:hover .services-icon-area {
  background: #ff2f00;
  border-color: #ff2f00;
  border-radius: 15px;
}

.bittu-all-services .active.center .services-icon-area svg,
.bittu-single-services-area:hover .services-icon-area svg {
  fill: #ffffff;
}

.bittu-all-services .active.center .bittu-single-services-area::after,
.bittu-single-services-area:hover::after {
  left: 15%;
  right: 15%;
  width: 70%;
  background: hsl(11deg 100% 50% / 10%);
  transform: skew(-10deg);
}

.bittu-all-services .active.center .services-style-shape svg,
.bittu-single-services-area:hover .services-style-shape svg {
  fill: #ff2f00;
}

.bittu-all-services .active.center .bittu-single-services-area {
  margin-top: 70px;
}

/* about area css */
.bittu-about-img2 {
  position: absolute;
  right: 0;
  bottom: -80px;
}

.bittu-about-img3 {
  position: absolute;
  top: 150px;
  right: 120px;
}

.bittu-about-right-content-part {
  padding-left: 30px;
}

h4.about-short-title {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
  background: #f8f8f8;
  padding: 10px 10px 10px 25px;
  display: inline-block;
  position: relative;
  margin-left: -140px;
}

h4.about-short-title:before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  top: 0;
  bottom: 0;
  background: #ff2f00;
  transform: skew(-10deg);
}

h2.about-long-title {
  font-weight: 700;
  font-size: 50px;
  margin-left: -140px;
  text-transform: capitalize;
}

h2.about-long-title span {
  color: #ff2f00;
}

.bittu-nav-tabs-area {}

.bittu-nav-tabs-area>li {
  margin: 0;
}

.bittu-nav-tabs-area>li>button {
  border: none !important;
  background: #222222 !important;
  border-radius: 0 !important;
  color: #fff !important;
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  padding: 16px 50px 16px 20px;
}

.bittu-nav-tabs-area>li>button:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-top: 62px solid #ffffff;
  border-right: 10px solid #222222;
}

.bittu-nav-tabs-area>li>button:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-bottom: 62px solid #ffffff;
  border-left: 10px solid #222222;
}

.bittu-nav-tabs-area>li>button.active::before {
  border-right: 10px solid #ff2f00;
}

.bittu-nav-tabs-area>li>button.active::after {
  border-left: 10px solid #ff2f00;
}

.bittu-nav-tabs-area>li>button.active {
  background-color: #ff2f00 !important;
}

ul.about-skills-content-area {
  margin: 30px 0;
}

ul.about-skills-content-area li {
  width: 50%;
  font-size: 18px;
  padding: 10px;
  font-weight: 600;
  margin: 0;
  text-transform: capitalize;
}

ul.about-skills-content-area li i {
  font-size: 16px;
  width: 40px;
  height: 40px;
  background: #f1f1f1;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  transition: all .3s;
}

ul.about-skills-content-area li:hover i {
  background: #ff2f00;
  color: #fff;
}

/* counter area css */

.single-counter-area {
  border: 2px solid #f8f8f8;
  padding: 30px;
  transition: all 0.3s;
}

.single-counter-area h4 {
  font-size: 16px;
  font-weight: 700;
}

.single-counter-area h3 {
  font-size: 70px;
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 2px #444444;
  line-height: 60px;
  margin: 20px 0;
  transition: all 0.3s;
}

.counter-title {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}

.counter-icon {
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
  background: #f8f8f8;
  transform: skew(-10deg);
  position: absolute;
  top: 35px;
  bottom: 35px;
  right: -77px;
  transition: all 0.3s;
}

.counter-icon svg {
  width: 60px;
  height: 60px;
  transform: skew(10deg);
  transition: all 0.3s;
}

.bittu-counter-area .col-xl-3:nth-child(even) .single-counter-area {
  margin-top: 70px;
}

.single-counter-area:hover .counter-icon {
  background: #ff2f00;
  border-radius: 15px;
}

.single-counter-area:hover .counter-icon svg {
  fill: #ffffff;
}

.single-counter-area:hover.single-counter-area h3 {
  -webkit-text-stroke: 2px #ff2f00;
}

.single-counter-area:hover {
  border: 2px solid #ff2f00;
  border-radius: 15px;
}

/* project area css */
.project-bg {
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  background-image: url(assets/img/project/bg.jpg);
  background-color: #1a2b3c;
  background-repeat: no-repeat;
}

.single-project-area {
  padding: 0px 12px 115px;
}

.project-img:before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  background: hsl(11deg 100% 50% / 90%);
  transition: all 0.3s;
  transform: scale(0);
  visibility: hidden;
  opacity: 0;
}

ul.project-hover-link {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  transition: all 0.3s;
}

ul.project-hover-link li {}

ul.project-hover-link li a {
  width: 60px;
  height: 60px;
  display: inline-block;
  text-align: center;
  line-height: 60px;
  background: #222222;
  font-size: 22px;
  color: #fff;
  margin: 0 5px;
  transition: all 0.3s;
  transform: scale(0);
  visibility: hidden;
  opacity: 0;
}

ul.project-ctg {}

ul.project-ctg li {}

ul.project-ctg li a {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  color: #444444;
  margin-right: 5px;
}

.project-all-content {
  position: absolute;
  left: 0;
  right: 15%;
  bottom: -70px;
  transition: all 0.3s;
}

.project-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  place-items: center;
  height: 100%;
  gap: 2rem;
  padding-bottom: 7rem;
}

.project-content{
  display: none;
  background: rgba(0, 0, 0, 0.6);
  padding-block: 1rem;
  border-left: 4px solid #ff2f00;
  box-shadow: 0px 8px 20px 0px rgba(47, 48, 52, 0.14);
  align-self: end;
}

.projects:hover .project-content {
  display: block;
}

.project-content h4 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
}

.project-link {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.all-project-area .active.center .project-img:before,
.single-project-area:hover .project-img:before {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

.all-project-area .active.center ul.project-hover-link li a,
.single-project-area:hover ul.project-hover-link li a {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

ul.project-hover-link li a:hover {
  background: #fff;
  color: #ff2f00;
  border-radius: 15px;
}

.all-project-area .active.center .project-link,
.single-project-area:hover .project-link {
  right: -20px;
  opacity: 1;
  visibility: visible;
}

ul.project-ctg li a:hover,
.single-project-area:hover .project-content h4,
.all-project-area .active.center .project-content h4 {
  color: #ff2f00;
}

.all-project-area.owl-theme .owl-dots .owl-dot span {
  display: inline-block;
  height: 15px;
  width: 40px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin: 0 2px;
  border-radius: 0;
  background: #222222;
  transform: skew(-10deg);
}

.all-project-area.owl-theme .owl-dots .owl-dot.active span {
  border: medium none;
  opacity: 1;
  width: 40px;
  height: 15px;
  background: #ff2f00;
}

.all-project-area.owl-theme .owl-nav.disabled+.owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -45px;
  margin-top: 0;
}

.stacked {
  display: grid;
}

.stacked > * {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* team area css */
.all-team-area .owl-stage {
  display: flex;
  align-items: center;
}

.all-team-area .owl-item.bittu-show.active {
  width: 13% !important;
}

.all-team-area .owl-item.active {
  width: 10% !important;
  opacity: 1;
  visibility: visible;
}

.all-team-area .owl-item.active .single-team-img {
  width: 80%;
}

.single-team-content-area {
  padding-left: 30px;
  padding-top: 100px;
  opacity: 0;
  visibility: hidden;
  display: none;
}

.all-team-area .owl-item.bittu-show.active .single-team-area .single-team-content-area {
  width: 300px;
  height: auto;
  max-width: 100%;
  opacity: 1;
  visibility: visible;
  display: block;
}

.single-team-content-area h3 {
  font-size: 28px;
  text-transform: capitalize;
  font-weight: 700;
  margin: 0;
}

.team-designation {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}

ul.team-social-area {
  margin-top: 20px;
}

ul.team-social-area li {
  margin: 0;
}

ul.team-social-area li a {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 10px;
  border: 1px solid #414141;
  font-size: 20px;
}

ul.team-social-area li a:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ff2f00;
  bottom: -5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.single-team-img {
  text-align: center;
  position: relative;
  padding: 0 15px;
}

.single-team-img:before {
  content: "";
  position: absolute;
  height: 180px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: #f5f5f5;
}

ul.team-social-area li a:hover {
  background: #ff2f00;
  border-color: #ff2f00;
  color: #ffffff;
  border-radius: 15px;
}

ul.team-social-area li a:hover::after {
  bottom: -8px;
  opacity: 1;
  visibility: visible;
}

.all-team-area.owl-theme .owl-nav div {
  transition: all 0.3s ease 0s;
  text-align: center;
  line-height: 100px;
  font-size: 25px !important;
  color: #fff !important;
  background: #222222;
  padding: 0 !important;
  display: block;
  width: 50px;
  height: 100px;
  transform: skew(-20deg);
}

.all-team-area.owl-theme .owl-nav div:hover {
  background: #ff2f00;
  color: #ffffff !important;
}

.all-team-area.owl-theme .owl-nav {
  display: block;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -100px;
  margin: 0;
}

.all-team-area.owl-theme .owl-nav .owl-prev {
  margin-bottom: 0px;
}

.all-team-area.owl-theme .owl-nav .owl-next {}

.all-team-area.owl-theme .owl-nav .owl-prev,
.all-team-area.owl-theme .owl-nav .owl-next {
  font-size: 14px;
  text-transform: capitalize;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

/* pricing area css */
.pricing-bg {
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  background-image: url(assets/img/project/bg.jpg);
  background-color: #1a2b3c;
  background-repeat: no-repeat;
}

.single-price-area {
  position: relative;
  z-index: 1;
  transition: all .3s;
}

.single-price-area:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  clip-path: polygon(0% 100%, 0% 0%, 100% 2%, 100% 98%);
  top: 0;
  left: 0;
  z-index: -1;
  border: 2px solid #efefef;
  transition: all .3s;
}

.price-header {
  padding: 30px 0 20px;
  margin: 0 0 20px;
  position: relative;
}

.price-header:after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 3px;
  background: #efefef;
  transform: skewY(-5deg);
  transition: all .3s;
}

.price-header h2 span.price,
.price-header h2 {
  font-size: 60px;
  font-weight: 600;
  transition: all 0.3s;
  display: inline-flex;
  align-items: baseline;
}

.price-header h2 span.sep {
  margin: 0 8px;
}

.price-header h2>span {
  font-size: 18px;
}

.price-header h4 {
  font-weight: 500;
  text-transform: capitalize;
  font-size: 22px;
}

.price-item-list li {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
  text-transform: capitalize;
  color: #838694;
  transition: all .3s;
}

.price-btn a {
  color: #444444;
  border: 2px solid #efefef;
}

.single-price-area:hover::after {
  background: #222222;
}

.single-price-area:hover .price-header h2 span.price {
  color: #ff2f00;
}

.single-price-area:hover .price-header:after {
  background: #ff2f00;
}

.single-price-area:hover .price-header h2,
.single-price-area:hover .price-item-list li,
.single-price-area:hover .price-header h4 {
  color: #ffffff;
}

.single-price-area:hover .price-btn a {
  color: #fff;
  border-color: #fff;
}

/* testimonial area css */
.testimonial-content {
  margin-left: 30px;
}

.single-testimonial-img-content-area {
  margin-top: 30px;
}

.testimonial-content h3 {
  font-size: 24px;
  font-weight: 700;
  text-transform: capitalize;
}

.testimonial-content h4 {
  font-size: 18px;
  text-transform: capitalize;
  font-weight: 500;
}

.all-testimonial-area.owl-theme .owl-dots .owl-dot span {
  display: inline-block;
  height: 30px;
  width: 15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin: -2px 0;
  border-radius: 0;
  background: #222222;
  position: relative;
}

.all-testimonial-area.owl-theme .owl-dots .owl-dot span:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 3px solid #fff;
  border-right: 15px solid transparent;
}

.all-testimonial-area.owl-theme .owl-dots .owl-dot span:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 5px solid #fff;
  border-left: 16px solid transparent;
}

.all-testimonial-area.owl-theme .owl-dots .owl-dot.active span {
  display: inline-block;
  height: 30px;
  width: 15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 0;
  background: #ff2f00;
  position: relative;
}

.all-testimonial-area.owl-theme .owl-dots .owl-dot.active span:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 3px solid #fff;
  border-right: 15px solid transparent;
}

.all-testimonial-area.owl-theme .owl-dots .owl-dot.active span:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 5px solid #fff;
  border-left: 16px solid transparent;
}

.all-testimonial-area.owl-theme .owl-nav.disabled+.owl-dots {
  position: absolute;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
}

.all-testimonial-area.owl-theme .owl-dots .owl-dot {
  display: block;
  line-height: 1;
}

.all-testimonial-area.owl-theme .owl-dots .owl-dot:last-child {
  margin-bottom: 0;
}

.testimonial-style-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.testimonial-style-bg img {
  height: 655px;
}

.bittu-video-area {
  position: relative;
}

a.popup-video {
  width: 150px;
  height: 450px;
  background: #222222;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-40%) skew(-15deg, 0deg);
  position: absolute;
  top: 60%;
  left: 150px;
  color: #fff;
}

a.popup-video svg {
  transform: skew(15deg);
}

/* blog area css */
.bittu-single-blog-wrape {
  padding: 15px;
}

.blog-details-content>img,
.bittu-single-blog-wrape>img {
  width: 100%;
}

.single-blog-content {
  padding: 20px;
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(199, 199, 199, 0.5);
}

.post-title {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-transform: capitalize;
  cursor: pointer;
}

.bittu-single-blog-wrape:hover .post-title {
  color: #ff2f00;
}

.single-post-info {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e1e1e1;
  padding-top: 20px;
  margin-top: 20px;
}

.single-post-info li {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #444444;
  text-transform: capitalize;
  transition: all .3s;
}

.single-post-info li:hover,
.single-post-info li:hover a {
  color: #ff2f00;
  cursor: pointer;
}

.bittu-all-blog-list.owl-theme .owl-dots .owl-dot span {
  background: #fff none repeat scroll 0 0;
  border-radius: 30%;
  display: inline-block;
  height: 20px;
  width: 20px;
  opacity: 1;
  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transition: all .3s;
  transition: all .3s;
  margin: 0 4px;
  border-radius: 50%;
  border: 4px solid #ff2f00;
  opacity: .5;
}

.bittu-all-blog-list.owl-theme .owl-dots .owl-dot.active span {
  background: #fff;
  border: medium none;
  opacity: 1;
  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #ff2f00;
}

.bittu-all-blog-list.owl-theme .owl-nav.disabled+.owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -45px;
  margin-top: 0;
}

.blog-details-content h6,
.blog-details-content h5,
.blog-details-content h5,
.blog-details-content h4,
.blog-details-content h3,
.blog-details-content h2,
.blog-details-content h1 {
  margin-bottom: 15px;
  font-weight: 600;
  line-height: 1.5;
}

/* breadcrumb area css */

.breadcrumb-bg {
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
  height: 450px;
  background-image: url(assets/img/breadcrumb/1.jpg);
  background-color: #111111;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.breadcrumb-bg:before {
  content: '';
  left: 0px;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(71deg, rgba(0, 0, 0, 1) 0%, rgba(255, 74, 84, 0) 100%);
  background: -webkit-linear-gradient(71deg, rgba(0, 0, 0, 1) 0%, rgba(255, 74, 84, 0) 100%);
  background: linear-gradient(71deg, rgba(0, 0, 0, 1) 0%, rgba(255, 74, 84, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#ff4a54", GradientType=1);
}

.bittu-breadcrumb-content h2 {
  color: #fff;
  font-size: 70px;
  font-weight: 500;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.bittu-breadcrumb-content .breadcrumb {
  background: inherit;
  padding: 0;
  margin: 0;
}

.breadcrumb .breadcrumb-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}

.bittu-breadcrumb-content .breadcrumb .breadcrumb-item,
.bittu-breadcrumb-content .breadcrumb-item.active a,
.bittu-breadcrumb-content .breadcrumb .breadcrumb-item.active {
  color: #fff;
  text-transform: capitalize;
}

.bittu-breadcrumb-content .breadcrumb .breadcrumb-item a {
  color: #ff5100;
  text-transform: capitalize;
}

.bittu-breadcrumb-content .breadcrumb-item+.breadcrumb-item::before {
  color: #fff;
  content: '/';
  font-size: 30px;
  line-height: 32px;
}

/* blog details area css */

.bittu-blog-details-wraper {
  border: 1px solid #f1f1f1;
  padding: 20px;
}

.blog-details-content .blog-date {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  transition: all .3s;
  margin-top: 35px;
}

.blog-details-content .post-title {
  display: block;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 26px;
  margin: 20px 0;
  transition: all .3s;
}

.blog-details-content h3 {
  font-size: 30px;
  font-weight: 600;
  text-transform: capitalize;
}

.blog-details-content figure img {
  margin: 15px 0;
}

.blog-details-content h6,
.blog-details-content h5,
.blog-details-content h5,
.blog-details-content h4,
.blog-details-content h3,
.blog-details-content h2,
.blog-details-content h1 {
  margin-bottom: 15px;
}

/* Blog Quote Area Css Style */

blockquote,
blockquote.wp-block-quote {
  background: #ffffff;
  border-left: 6px solid #ff4a54;
  padding: 35px !important;
  box-shadow: 0px 0px 30px 0px rgba(26, 43, 60, 0.15);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  margin: 40px 0;
  z-index: 1;
}

blockquote:before,
blockquote.wp-block-quote:before {
  content: "\f10d";
  position: absolute;
  top: -20%;
  left: 5%;
  font-family: "FontAwesome";
  color: #ff4a54;
  font-size: 150px;
  line-height: 1;
  opacity: .1;
  z-index: -1;
}

blockquote p,
blockquote.wp-block-quote p {
  color: #1a2b3c;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  font-style: italic;
}

blockquote cite,
blockquote.wp-block-quote cite {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  padding-left: 15px;
  margin-top: 30px;
  display: block;
}

blockquote cite:before,
blockquote.wp-block-quote cite:before {
  position: absolute;
  content: '';
  bottom: 0;
  width: 10px;
  height: 2px;
  background: #ff4a54;
  margin: 0 auto;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Blog tags Area Css Style */

.blog-post-tag span {
  font-size: 20px;
  font-weight: 600;
  display: block;
  margin-bottom: 17px;
  color: #1a2b3c;
  text-transform: capitalize;
}

.blog-post-tag {
  background: #fff;
  padding: 0;
  padding-top: 0;
  width: 100%;
  overflow: hidden;
  padding-bottom: 0;
  padding-top: 30px;
}

.blog-post-tag>a {
  color: #1a2b3c;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  border: 1px solid #e5e5e5;
  padding: 10px 24px;
  margin-right: 5px;
  transition: .3s;
  border-radius: 0;
  margin-bottom: 10px;
}

.blog-post-tag>a:hover {
  color: #fff;
  background: #ff4a54;
  border-color: #ff4a54;
}

/* Blog Comments Area Css Style */

.post-heading {
  margin-bottom: 30px;
}

.post-heading h3 {
  background: #f8f8f8;
  padding: 10px 10px 10px 20px;
  display: inline-block;
  margin-bottom: 40px;
  font-size: 28px;
  font-weight: 600;
  text-transform: capitalize;
  color: #1a2b3c;
  line-height: 1;
  position: relative;
}

.post-heading h3:before {
  content: "";
  position: absolute;
  left: -4px;
  width: 10px;
  top: 0;
  bottom: 0;
  background: #ff2f00;
  transform: skew(-10deg);
}

.latest-comments>ul {
  padding: 0;
  margin: 0;
}

.latest-comments ul {
  list-style: none;
}

.comments-box {
  margin-bottom: 30px;
  border-bottom: 1px solid #e7eaf0;
  padding-bottom: 30px;
}

.comments-avatar {
  float: left;
  width: 100px;
}

.comments-avatar img {
  border-radius: 50%;
}

.comments-text {
  overflow: hidden;
  padding-left: 30px;
}

.avatar-name-date {
  overflow: hidden;
}

.avatar-name-date>h5 {
  font-size: 18px;
  font-weight: 500;
  text-transform: capitalize;
  color: #1a2b3c;
  font-family: 'Kanit', sans-serif;
  line-height: 1;
}

.avatar-name-date span {
  text-transform: capitalize;
  font-weight: 400;
  font-size: 14px;
  margin: 10px 0 12px;
  display: block;
  color: #333333;
  font-family: 'Kanit', sans-serif;
  line-height: 1;
}

.comments-text>p {
  margin-bottom: 20px;
  color: #878991;
  font-size: 17px;
}

.comments-text>a {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  color: #1a2b3c;
  font-family: 'Poppins', sans-serif;
}

.comments-reply {
  padding-left: 70px;
}

/* Blog Comments Form Area Css Style */

.post-comments-form-area {
  margin: 40px 0 0 0;
}

.post-comments-form-area .post-comments-form {
  background: #f7faff;
  padding: 50px;
}

.post-comments-form input.form-control {
  box-shadow: none;
  color: #777777;
  height: 50px;
  margin-bottom: 30px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  padding: 5px 20px;
  transition: all .3s;
}

.post-comments-form textarea.form-control {
  height: 133px;
  box-shadow: none;
  color: #777777;
  margin-bottom: 30px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  padding: 15px 20px;
  transition: all .3s;
}

.post-comments-form textarea.form-control:focus,
.post-comments-form input.form-control:focus {
  box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
  outline: none;
  border: 1px solid #ff2f00;
}

/* footer area css */

.footer-bg {
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
  position: relative;
  background-image: url(assets/img/footer/bg.jpg);
  background-color: #1a2b3c;
  background-repeat: no-repeat;
  z-index: 1;
}

.footer-bg:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(0 0 0 / 90%);
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bittu-subscribe-form input {
  width: 100%;
  height: 70px;
  background: transparent;
  padding: 0 20px;
  border-radius: 0;
  font-size: 18px;
  color: #30323d;
  border: 1px solid #595959;
}

.bittu-subscribe-form input[type="email"] {
  color: #595959;
  font-size: 20px;
}

.bittu-subscribe-form button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.footer-subscribe {}

.footer-subscribe h4 {
  font-size: 18px;
  color: #fff;
  text-transform: capitalize;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 50px;
}

.bittu-subscribe-form input {
  width: 100%;
  height: 70px;
  background: transparent;
  padding: 0 20px;
  border-radius: 0;
  font-size: 18px;
  color: #30323d;
  border: 1px solid #595959;
}

.bittu-subscribe-form input[type="email"] {
  color: #ffffff;
  font-size: 20px;
}

.bittu-subscribe-form button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 70px;
  height: 70px;
  border-radius: 0;
  border: 1px solid #595959;
  background-color: #ff2f00;
  transition: all .3s;
}

.bittu-subscribe-form button span svg {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  transform: rotate(-45deg);
  fill: #fff;
}

/* google map area css */
#bittu-google-map {
  width: 100%;
  height: 530px;
}

/* Contact Form Area Css Style */

.bittu-contact-form-area {
  padding: 70px 50px;
  background: #f7faff;
  box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.14);
  border-radius: 10px;
}

.bittu-contact-form input.form-control {
  box-shadow: none;
  color: #777777;
  height: 50px;
  margin-bottom: 30px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  padding: 5px 20px;
  transition: all .3s;
}

.bittu-contact-form textarea.form-control:focus,
.bittu-contact-form input.form-control:focus {
  box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
  outline: none;
  border: 1px solid #ff2f00;
}

.bittu-contact-form textarea.form-control {
  height: 133px;
  box-shadow: none;
  color: #777777;
  margin-bottom: 30px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  padding: 15px 20px;
  transition: all .3s;
}

p.form-message {
  font-size: 15px;
}