@charset "UTF-8";
:root {
  /* Backgrounds */
  --color-bg-dark: #0D0D0D;
  --color-bg-light: #1A1A1A;

  /* Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #CCCCCC;

  /* Accents (from your logo) */
  --color-yellow: #FFD54F;
  --color-orange: #FF7043;
  --color-pink: #EC407A;
  --color-purple: #AB47BC;
  --color-red: #E53935;
  --color-gold:#e8cc64;

  /* Gradient */
  --color-gradient: linear-gradient(
    #90deg,
    #FFD54F,
    #FF7043,
    #EC407A,
    #AB47BC,
    #E53935
  );
}
/*01. Google Font Import*/
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
/*02. Default CSS*/
html,
body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  line-height: 25px;
  font-weight: 400;
  position: relative;
  z-index: 1;
  background: #fff;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  color: #0A0A0A;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  margin: 0;
  letter-spacing: -1px;
}

a {
  text-decoration: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  color: #0A0A0A;
}
a:hover {
  color: #1B1E22;
}

p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  position: relative;
  color: #868686;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  p {
    font-size: 15px;
    line-height: 25px;
  }
}
@media (max-width: 767px) {
  p {
    font-size: 15px;
    line-height: 25px;
    margin: 0;
  }
}

.p-xl {
  font-size: 24px;
  font-weight: 400;
  line-height: 38px;
  color: #3F3F3F;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .p-xl {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .p-xl {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 767px) {
  .p-xl {
    font-size: 16px;
    line-height: 1.5;
  }
}

button,
input,
textarea,
a:hover,
a:focus,
a:visited {
  text-decoration: none;
  outline: none;
  outline-width: 0 !important;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

img {
  display: inline-block;
  max-width: 100%;
}

i,
span,
a {
  display: inline-block;
}

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

table,
th,
tr,
td {
  border: 1px solid #ddd;
}

th,
tr,
td {
  padding: 10px;
}

hr {
  border-top: 1px solid #777;
}

.fix {
  overflow: hidden;
}

/*Section Padding CSS*/
.section-padding {
  padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-padding {
    padding: 100px 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-padding {
    padding: 90px 30px;
  }
}
@media (max-width: 767px) {
  .section-padding {
    padding: 60px 10px;
  }
}
@media only screen and (min-width: 540px) and (max-width: 767px) {
  .section-padding {
    padding: 40px 10px;
  }
}

/*Section Title */
.section-title {
  position: relative;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .section-title {
    margin-bottom: 10px;
  }
}
.section-title small {
	font-weight: 500;
  display: block;
  font-size: 24px;
  margin-bottom: 15px;
}
.section-title h1 {
  font-size: 80px;
  font-weight: 400;
  line-height: 90px;
  letter-spacing: -2px;
  color: #0A0A0A;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-title h1 {
    font-size: 60px;
    line-height: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title h1 {
    font-size: 50px;
    line-height: 60px;
  }
}
@media (max-width: 767px) {
  .section-title h1 {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 0px;
  }
}
@media only screen and (min-width: 540px) and (max-width: 767px) {
  .section-title h1 {
    font-size: 40px;
    line-height: 50px;
  }
}

@media (max-width: 767px) {
  .green-bg .section-title h1 {
    font-size: 30px;
    line-height: 40px;
  }
}

.section-title h2 {
  text-transform: uppercase;
  font-size: 60px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: -1px;
  color: #1D1E21;
}
.section-title h2.about {font-size:42px;}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-title h2 {
    font-size: 40px;
    line-height: 50px;
    margin: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title h2 {
    font-size: 40px;
    line-height: 50px;
    margin: 0;
  }
}
@media (max-width: 767px) {
  .section-title h2 {
    font-size: 30px;
    line-height: 40px;
    margin: 15px 0;
  }
}
@media only screen and (min-width: 540px) and (max-width: 767px) {
  .section-title h2 {
    font-size: 40px;
    line-height: 50px;
    margin: 15px 0;
  }
}

.section-title.text-up h2 {
  text-transform: uppercase;
  font-size: 80px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1;
  display: inline-block;
}
@media (max-width: 767px) {
  .section-title.text-up h2 {
    font-size: 50px;
    margin: 15px 0;
  }
}

.section-title.text-up h2 span {
  position: absolute;
  top: -10px;
  right: -20px;
  font-size: 18px;
  font-weight: 400;
}

.section-title.text-low h2 {
  position: relative;
  display: inline-block;
}

.section-title.text-low h2 span {
  position: absolute;
  bottom: 15px;
  right: -25px;
  font-size: 18px;
  font-weight: 400;
}

.section-title h3 {
  font-size: 30px;
  line-height: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-title h3 {
    font-size: 30px;
    line-height: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title h3 {
    font-size: 36px;
    line-height: 40px;
  }
}
@media (max-width: 767px) {
  .section-title h3 {
    font-size: 24px;
    line-height: 30px;
  }
}

.section-title h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  margin-bottom: 20px;
  color: #1D1E21;
  background:var(--color-gold);
  display: inline-block;
  padding: 7px 10px;
}
.section-title h6.painting {font-weight: 500;font-size: 27px;}
.section-title p {
  margin: 0;
}

.section-title span {
  color: #1D1E21;
  font-weight: 300;
  letter-spacing: -3px;
}

.section-title span i {
  color: #ddd;
  font-size: 80px;
}
@media (max-width: 767px) {
  .section-title span i {
    font-size: 40px;
  }
}

.section-title img {
  border-radius: 50px;
  height: 55px;
  position: relative;
  bottom: 5px;
}
@media (max-width: 767px) {
  .section-title img {
    display: none;
  }
}

/* Button Style*/
.theme-btn, .white-btn, .primary-btn {
  display: inline-flex;
  background: #1D1E21;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 18px 30px;
  border: 1px solid #1D1E21;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .theme-btn, .white-btn, .primary-btn {
    padding: 15px 32px;
  }
}
.theme-btn:hover, .white-btn:hover, .primary-btn:hover {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #fff;
}

.primary-btn {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #fff;
}
.primary-btn:hover {
  background: #fff;
  color: #0A0A0A;
  border-color: #0A0A0A;
}

.white-btn {
  background: #fff;
  border-color: #fff;
  color: #333;
}
.white-btn:hover {
  background: #1D1E21;
  color: #fff;
  border-color: #1D1E21;
}
/*Form Style CSS*/
input,
textarea,
select {
  width: 100%;
  background: transparent;
  border: 1px solid #ddd;
  padding: 13px 20px;
  font-size: 14px;
  letter-spacing: 1px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

textarea {
  height: 200px;
}

input[type=submit],
button[type=submit] {
  background: #1D1E21;
  border-color: #1D1E21;
  border-radius: 0;
  display: inline-block;
  color: #fff;
  width: 30%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
@media (max-width: 767px) {
  input[type=submit],
  button[type=submit] {
    width: 100%;
  }
}

input[type=submit]:hover,
button[type=submit]:hover {
  background: #0A0A0A;
  color: #fff;
}

input::placeholder,
textarea::placeholder {
  font-size: 15px;
  font-weight: 400;
}

input.form-control {
  padding: 12px 20px;
  line-height: 1.2;
}

/*Bootstrap Customize CSS*/
@media (max-width: 767px) {
  .container-fluid {
    padding: 0 10px;
  }
}

.container {
  max-width: 1230px;
}

.btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none;
}

/*Bacground Color & Overlay CSS*/
.theme-bg {
  background: #1D1E21;
}

.dark-bg {
  background: #0A0A0A;
}

.gray-bg {
  background: #F5F5F7;
}

.white-bg {
  background: #fff !important;
}

.bg-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

.overlay, .overlay-5, .overlay-4, .overlay-3, .overlay-2 {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #0A0A0A;
  opacity: 0.1;
  top: 0;
  left: 0;
  z-index: -1;
}

.overlay-2 {
  opacity: 0.2;
}

.overlay-3 {
  opacity: 0.3;
}

.overlay-4 {
  opacity: 0.4;
}

.overlay-5 {
  opacity: 0.5;
}

.overlay.active, .active.overlay-2, .active.overlay-3, .active.overlay-4, .active.overlay-5 {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  content: "";
  background-color: #000;
  z-index: 99;
  opacity: 0.5;
  visibility: visible;
}

.text-dark {
  color: #181818 !important;
}

.text-white {
  color: #fff !important;
}

.fix {
  overflow: hidden;
}

.separator {
  display: block;
  background-color: #ddd;
  width: 30px;
  height: 3px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.b-none {
  border: none !important;
}

/* clears the ‘X’ from Chrome */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

/* Read More Link  */
.read_more_link {
  position: relative;
  display: inline-block;
  top: auto;
  left: auto;
  height: auto;
  width: auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: #181818;
  z-index: 1;
  overflow: hidden;
}

.read_more_link .link_text {
  position: relative;
  margin-right: 0;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
  text-indent: -110px;
  visibility: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: visibility 0.4s ease, margin-right 0.4s ease-out, text-indent 0.5s ease-out, opacity 0.4s ease;
  will-change: visibility, margin-right, text-indent, opacity;
}

.read_more_link .link_icon i {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  font-size: 24px;
  line-height: 34px;
  text-align: center;
}

.project-list-content:hover .read_more_link .link_text {
  opacity: 1;
  text-indent: 0;
  margin-right: 6px;
  visibility: visible;
  transition: visibility 0.4s ease, margin-right 0.3s ease-out, text-indent 0.4s ease-out, opacity 0.4s ease;
}

.link-text {
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: #333 !important;
}

.link-text:hover {
  transform-style: preserve-3d;
  transform: translate3d(0%, 5px, 0px);
}

.link-text i {
  font-weight: 500;
  margin-left: 5px;
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .link-text {
    font-size: 16px;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-right {
  0% {
    transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

@keyframes img-anim-top {
  0% {
    transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-bottom {
  animation: img-anim-bottom 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

@keyframes img-anim-bottom {
  0% {
    transform: translateY(5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
/*Margin & Padding*/
.pt-0{padding-top:0}
.pb-0{padding-bottom:0}
.pt-10{padding-top:10px}
.pb-10{padding-bottom:10px}
.pt-15{padding-top:15px}
.pb-15{padding-bottom:15px}
.pt-20{padding-top:20px}
.pb-20{padding-bottom:20px}
.pt-25{padding-top:25px}
.pb-25{padding-bottom:25px}
.pt-30{padding-top:30px}
.pb-30{padding-bottom:30px}
.pt-35{padding-top:35px}
.pb-35{padding-bottom:35px}
.pt-40{padding-top:40px}
.pb-40{padding-bottom:40px}
.pt-45{padding-top:45px}
.pb-45{padding-bottom:45px}
.pt-50{padding-top:50px}
.pb-50{padding-bottom:50px}
.pt-55{padding-top:55px}
.pb-55{padding-bottom:55px}
.pt-60{padding-top:60px}
.pb-60{padding-bottom:60px}
.pt-65{padding-top:65px}
.pb-65{padding-bottom:65px}
.pt-70{padding-top:70px}
.pb-70{padding-bottom:70px}
.pt-75{padding-top:75px}
.pb-75{padding-bottom:75px}
.pt-80{padding-top:80px}
.pb-80{padding-bottom:80px}
.pt-85{padding-top:85px}
.pb-85{padding-bottom:85px}
.pt-90{padding-top:90px}
.pb-90{padding-bottom:90px}
.pt-95{padding-top:95px}
.pb-95{padding-bottom:95px}
.pt-100{padding-top:100px}
.pb-100{padding-bottom:100px}
.pt-110{padding-top:110px}
.pb-110{padding-bottom:110px}
.pt-120{padding-top:120px}
.pb-120{padding-bottom:120px}
.pt-130{padding-top:130px}
.pb-130{padding-bottom:130px}
.pt-140{padding-top:140px}
.pb-140{padding-bottom:140px}
.pt-150{padding-top:150px}
.pb-150{padding-bottom:150px}
.pt-160{padding-top:160px}
.pb-160{padding-bottom:160px}
.pt-170{padding-top:170px}
.pb-170{padding-bottom:170px}
.pt-180{padding-top:180px}
.pb-180{padding-bottom:180px}
.pt-190{padding-top:190px}
.pb-190{padding-bottom:190px}
.pt-200{padding-top:200px}
.pb-200{padding-bottom:200px}
.pt-300{padding-top:300px}
.pb-300{padding-bottom:300px}
.pt-400{padding-top:400px}
.pb-400{padding-bottom:400px}
.pl-10{padding-left:10px}
.pr-10{padding-right:10px}
.pl-15{padding-left:15px}
.pr-15{padding-right:15px}
.pl-20{padding-left:20px}
.pr-20{padding-right:20px}
.pl-25{padding-left:25px}
.pr-25{padding-right:25px}
.pl-30{padding-left:30px}
.pr-30{padding-right:30px}
.pl-35{padding-left:35px}
.pr-35{padding-right:35px}
.pl-40{padding-left:40px}
.pr-40{padding-right:40px}
.pl-45{padding-left:45px}
.pr-45{padding-right:45px}
.pl-50{padding-left:50px}
.pr-50{padding-right:50px}
.pl-55{padding-left:55px}
.pr-55{padding-right:55px}
.pl-60{padding-left:60px}
.pr-60{padding-right:60px}
.pl-65{padding-left:65px}
.pr-65{padding-right:65px}
.pl-70{padding-left:70px}
.pr-70{padding-right:70px}
.pl-75{padding-left:75px}
.pr-75{padding-right:75px}
.pl-80{padding-left:80px}
.pr-80{padding-right:80px}
.pl-85{padding-left:85px}
.pr-85{padding-right:85px}
.pl-90{padding-left:90px}
.pr-90{padding-right:90px}
.pl-95{padding-left:95px}
.pr-95{padding-right:95px}
.pl-100{padding-left:100px}
.pr-100{padding-right:100px}
.pl-150{padding-left:150px}
.pr-150{padding-right:150px}
.pl-200{padding-left:200px}
.pr-200{padding-right:200px}
.pl-250{padding-left:250px}
.pr-250{padding-right:250px}
.pl-300{padding-left:300px}
.pr-300{padding-right:300px}
.pl-350{padding-left:350px}
.pr-350{padding-right:350px}
.pl-400{padding-left:400px}
.pr-400{padding-right:400px}
.pl-450{padding-left:450px}
.pr-450{padding-right:450px}
.pl-500{padding-left:500px}
.pr-500{padding-right:500px}
.mt-10{margin-top:10px}
.mb-10{margin-bottom:10px}
.mt-15{margin-top:15px}
.mb-15{margin-bottom:15px}
.mt-20{margin-top:20px}
.mb-20{margin-bottom:20px}
.mt-25{margin-top:25px}
.mb-25{margin-bottom:25px}
.mt-30{margin-top:30px}
.mb-30{margin-bottom:30px}
.mt-35{margin-top:35px}
.mb-35{margin-bottom:35px}
.mt-40{margin-top:40px}
.mb-40{margin-bottom:40px}
.mt-45{margin-top:45px}
.mb-45{margin-bottom:45px}
.mt-50{margin-top:50px}
.mb-50{margin-bottom:50px}
.mt-55{margin-top:55px}
.mb-55{margin-bottom:55px}
.mt-60{margin-top:60px}
.mb-60{margin-bottom:60px}
.mt-65{margin-top:65px}
.mb-65{margin-bottom:65px}
.mt-70{margin-top:70px}
.mb-70{margin-bottom:70px}
.mt-75{margin-top:75px}
.mb-75{margin-bottom:75px}
.mt-80{margin-top:80px}
.mb-80{margin-bottom:80px}
.mt-85{margin-top:85px}
.mb-85{margin-bottom:85px}
.mt-90{margin-top:90px}
.mb-90{margin-bottom:90px}
.mt-95{margin-top:95px}
.mb-95{margin-bottom:95px}
.mt-100{margin-top:100px}.mb-100{margin-bottom:100px}.mt-110{margin-top:110px}.mb-110{margin-bottom:110px}.mt-120{margin-top:120px}.mb-120{margin-bottom:120px}.mt-130{margin-top:130px}.mb-130{margin-bottom:130px}.mt-140{margin-top:140px}.mb-140{margin-bottom:140px}.mt-150{margin-top:150px}.mb-150{margin-bottom:150px}.mt-160{margin-top:160px}.mb-160{margin-bottom:160px}.mt-170{margin-top:170px}.mb-170{margin-bottom:170px}.mt-180{margin-top:180px}.mb-180{margin-bottom:180px}.mt-190{margin-top:190px}.mb-190{margin-bottom:190px}.mt-200{margin-top:200px}.mb-200{margin-bottom:200px}.mt-250{margin-top:250px}.mb-250{margin-bottom:250px}.mt-300{margin-top:300px}.mb-300{margin-bottom:300px}.mt-350{margin-top:350px}.mb-350{margin-bottom:350px}.mt-400{margin-top:400px}.mb-400{margin-bottom:400px}.mt-450{margin-top:450px}.mb-450{margin-bottom:450px}.mt-500{margin-top:500px}.mb-500{margin-bottom:500px}.ml-10{margin-left:10px}.mr-10{margin-right:10px}.ml-15{margin-left:15px}.mr-15{margin-right:15px}.ml-20{margin-left:20px}.mr-20{margin-right:20px}.ml-25{margin-left:25px}.mr-25{margin-right:25px}.ml-30{margin-left:30px}.mr-30{margin-right:30px}.ml-35{margin-left:35px}.mr-35{margin-right:35px}.ml-40{margin-left:40px}.mr-40{margin-right:40px}.ml-45{margin-left:45px}.mr-45{margin-right:45px}.ml-50{margin-left:50px}.mr-50{margin-right:50px}.ml-55{margin-left:55px}.mr-55{margin-right:55px}.ml-60{margin-left:60px}.mr-60{margin-right:60px}.ml-65{margin-left:65px}.mr-65{margin-right:65px}.ml-70{margin-left:70px}.mr-70{margin-right:70px}.ml-75{margin-left:75px}.mr-75{margin-right:75px}.ml-80{margin-left:80px}.mr-80{margin-right:80px}.ml-85{margin-left:85px}.mr-85{margin-right:85px}.ml-90{margin-left:90px}.mr-90{margin-right:90px}.ml-95{margin-left:95px}.mr-95{margin-right:95px}.ml-100{margin-left:100px}.mr-100{margin-right:100px}.ml-150{margin-left:150px}
.mr-150{margin-right:150px}
.ml-200{margin-left:200px}
.mr-200{margin-right:200px}
.ml-250{margin-left:250px}
.mr-250{margin-right:250px}
.ml-300{margin-left:300px}
.mr-300{margin-right:300px}
.ml-350{margin-left:350px}
.mr-350{margin-right:350px}
.ml-400{margin-left:400px}
.mr-400{margin-right:400px}
.ml-450{margin-left:450px}
.mr-450{margin-right:450px}
.ml-500{margin-left:500px}
.mr-500{margin-right:500px}
.mtm-30{margin-top:-30px}
/*Preloader*/
#loader {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1000;
  -webkit-transition: 0.3s ease opacity;
  transition: 0.3s ease opacity;
}

#loader:before, #loader:after {
  content: "";
  width: 80px;
  height: 80px;
  border: 2px solid #1D1E21;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation-name: loaderCircleAnim;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#loader:after {
  animation-delay: 1s;
}

@keyframes loaderCircleAnim {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  10% {
    width: 10px;
    height: 10px;
    opacity: 1;
  }
  80% {
    width: 60px;
    height: 60px;
    opacity: 0.1;
  }
  100% {
    width: 70px;
    height: 70px;
    opacity: 0;
  }
}
/*Mouse Cursor */
.mouseCursor {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translateZ(0);
  visibility: hidden;
  text-align: center;
}
@media (max-width: 767px) {
  .mouseCursor {
    display: none;
  }
}

.cursor-outer {
  margin-left: -20px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  transition: all 0.08s ease-out;
}

.cursor-inner {
  margin-left: -3px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: #1D1E21;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  margin: 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-inner span {
  color: #444;
  line-height: 80px;
  opacity: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}

.cursor-inner.cursor-big span {
  opacity: 1;
}

.mouseCursor.cursor-big {
  width: 80px;
  height: 80px;
}

.mouseCursor.cursor-big.cursor-outer {
  display: none;
}

.tp-cursor-point-area {
  cursor: none;
}

/* 14. Header Area CSS */
.header-area .navigation {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  background: #fff;
}
.header-area .logo {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-family: "Space Grotesk", sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #1D1E21;
}

.header-area.absolute-header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.header-area.absolute-header .navigation {
  background: inherit;
}

.header-area.absolute-header .logo {
  color: #fff;
}

.header-area.absolute-header .main-menu ul > li > a {
  color: #fff;
}

.header-area.absolute-header .main-menu ul li a:before {
  background: #fff;
}

.header-area.absolute-header .main-menu ul li.active:before {
  background: #fff;
}

.header-area.absolute-header .search-trigger i {
  color: #fff;
}

.header-area.absolute-header .contact-number .title h4 {
  color: #fff;
}

.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  opacity: 1;
  visibility: visible;
  width: 100%;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  animation: 0.5s ease-in-out 0s normal none 1 running fadeInDown;
  z-index: 999;
}

.absolute-header .header-sticky {
  background: #000;
}

/* 15. Main Menu */
.main-menu ul {
  line-height: 1;
}
.main-menu ul > li {
  display: inline-block;
  line-height: 1;
  margin: 0 20px;
  position: relative;
}
.main-menu ul > li > a {
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1;
  padding: 35px 0;
  overflow: hidden;
  color: #868686;
}
.main-menu ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-menu ul > li > ul {
  position: absolute;
  top: 100%;
  width: 235px;
  background-color: #0A0A0A;
  left: 0;
  z-index: 999;
  box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.15);
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.5s ease-in-out;
  padding: 15px 0px;
  text-align: start;
}
.main-menu ul > li > ul li {
  display: block;
  margin-right: 0;
}
.main-menu ul > li > ul li a {
  display: block;
  color: #868686 !important;
  padding: 12px 25px;
  font-size: 15px;
  font-weight: 400;
}
.main-menu ul > li > ul li a:hover {
  color: #fff !important;
}
.main-menu ul > li > ul li a i {
  transform: rotate(-45deg);
  font-size: 15px;
  position: absolute;
  right: 20px;
  bottom: 11px;
  transition: 0.3s;
}
.main-menu ul > li > ul li a:hover i {
  transform: rotate(0);
}
.main-menu ul > li > ul ul {
  left: 100%;
  top: 0;
}

.main-menu ul li {
  position: relative;
}
.main-menu ul li a.navlink:before {
  position: absolute;
  content: "";
  bottom: 30px;
  left: 0;
  width: 0%;
  height: 2px;
  background:var(--color-gradient);
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease 0s;
}
.main-menu ul li a.navlink:hover:before {
  visibility: visible;
  opacity: 1;
  width: 100%;
}

.main-menu ul li.active {
  position: relative;
}

.main-menu ul li.active a {
  color: #0A0A0A;
}

.main-menu ul li.active:before {
  position: absolute;
  content: "";
  bottom: 30px;
  left: 0;
  width: 100%;
  height: 2px;
  background:var(--color-gradient);
}

.main-menu ul > li > ul li a.active {
  color: #fff !important;
  position: relative;
  padding-left: 50px;
}

.main-menu ul > li > ul li a.active:before {
  position: absolute;
  content: "";
  bottom: 50%;
  left: 25px;
  width: 16px;
  height: 2px;
  background: #fff;
  margin-bottom: -1px;
  transition: 0.2s ease-out;
}

/*Mobile Menu */
.mobile-nav {
  position: fixed;
  right: -380px;
  top: 0;
  width: 320px;
  height: 100vh;
  scroll-behavior: smooth;
  overflow-y: scroll;
  transition: right 0.5s ease-in;
  background-color: #0A0A0A;
  padding: 20px;
  z-index: 9999;
  box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.15);
}
.mobile-nav.show {
  right: 0px;
}
.mobile-nav .close-nav {
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: 30px;
  font-size: 30px;
  position: absolute;
  left: 20px;
  top: 10px;
}
.mobile-nav .sidebar-nav {
  margin-top: 60px;
}
.mobile-nav .sidebar-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: transparent;
}
.mobile-nav .sidebar-nav .metismenu {
  display: flex;
  flex-direction: column;
}
.mobile-nav .sidebar-nav .metismenu > li {
  position: relative;
  display: flex;
  flex-direction: column;
}
.mobile-nav .sidebar-nav .metismenu a {
  position: relative;
  display: block;
  padding: 10px 15px;
  transition: all 0.3s ease-out;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  outline-width: 0;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #2a2d36;
}
.mobile-nav .sidebar-nav .metismenu ul li {
  display: block;
}
.mobile-nav .sidebar-nav .metismenu ul a {
  padding: 10px 15px 10px 35px;
  position: relative;
}
.mobile-nav .sidebar-nav .metismenu ul a:hover {
  padding-left: 40px;
}
.mobile-nav .sidebar-nav .metismenu ul a:hover::before {
  background-color: #fff;
}
.mobile-nav .sidebar-nav .metismenu ul a::before {
  position: absolute;
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  content: "";
  top: 50%;
  transition: all 0.3s ease-in-out;
  transform: translateY(-50%);
}
.mobile-nav .sidebar-nav .metismenu ul ul {
  list-style-type: circle !important;
}
.mobile-nav .sidebar-nav .metismenu ul ul a {
  padding: 10px 15px 10px 45px;
}
.mobile-nav .sidebar-nav .metismenu a:hover,
.mobile-nav .sidebar-nav .metismenu a:focus,
.mobile-nav .sidebar-nav .metismenu a:active {
  text-decoration: none;
  color: #f8f9fa;
  background: #0A0A0A;
}

.header-area .container {
  background: #fff;
}

.header-area.absolute-header .container {
  background: transparent;
}

#hamburger {
  color: #171717;
  font-size: 32px;
  line-height: 1;
  text-align: right;
  display: none;
}
#hamburger i {
  cursor: pointer;
}
@media (max-width: 1199px) {
  #hamburger {
    display: block;
  }
}

.dark-bg #hamburger i {
  color: #fff;
}

.absolute-header #hamburger i {
  color: #fff;
}

.action-bar {
  margin-top: 60px;
  padding-left: 20px;
}

.action-bar a {
  color: #fff;
  display: block;
  margin-top: 12px;
  font-size: 15px;
}

.action-bar a i {
  margin-right: 10px;
}

.action-bar .theme-btn, .action-bar .primary-btn, .action-bar .white-btn {
  margin-top: 30px;
  display: inline-block;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 90px;
}

.header-right .search-trigger i {
  font-size: 20px;
  margin-right: 40px;
  position: relative;
  top: 2px;
}
.header-right .search-trigger i:hover {
  cursor: pointer;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .header-right .search-trigger i {
    display: none;
  }
}

.contact-number {
  align-items: center;
  gap: 15px;
  margin-right: 30px;
}
.contact-number .icon i {
  font-size: 24px;
  background: #eee;
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.contact-number .title h4 {
  font-size: 22px;
  font-weight: 500;
}

.social-area a i {
  font-size: 22px;
  color: #fff;
  margin-right: 20px;
}


.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (max-width: 767px) {
  .header-btn {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .menu-trigger {
    display: none;
  }
}
@media (max-width: 767px) {
  .menu-trigger {
    display: none;
  }
}

/*Off Canvas Menu CSS */
.menu-trigger span {
  background-color: #333;
  display: block;
  height: 1px;
  margin: 8px auto;
  margin-left: 5px;
  width: 30px;
  transition: all 0.1s;
}

.menu-trigger span:nth-child(2) {
  margin-left: 0px;
}

.menu-trigger:hover span:nth-child(2) {
  margin-left: 5px;
}

.header-area.absolute-header .menu-trigger span {
  background: #fff;
}

.menu-trigger span:nth-child(2) {
  margin-left: 0px;
}

.off-canvas-menu {
  position: fixed;
  top: 0;
  right: -320px;
  background: #fff;
  box-shadow: -6px -3px 16px -8px rgba(0, 0, 0, 0.25);
  width: 350px;
  padding: 50px;
  height: 100%;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.off-canvas-menu.show-off-canvas-menu {
  right: 0;
  opacity: 1;
  visibility: visible;
}

.off-canvas-menu p {
  font-size: 16px;
  font-weight: 400;
  color: #b4afaf;
  position: absolute;
  bottom: 15px;
  opacity: 0.5;
}

.menu-close {
  position: absolute;
  right: 25px;
  top: 25px;
  color: #777;
  padding: 7px;
  cursor: pointer;
  font-size: 30px;
  font-weight: 300;
}

.menu-close:hover {
  color: #333;
}

.extra-info {
  background: #0A0A0A none repeat scroll 0 0;
  height: 100%;
  padding: 40px;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
  width: 400px;
  z-index: 999;
  overflow-y: scroll;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
}

.extra-info.active {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.close-icon {
  margin-top: 0;
  text-align: right;
}

.close-icon > button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 0 none;
  cursor: pointer;
  font-size: 20px;
  padding: 0;
}

.close-icon > button i {
  color: #fff;
  font-size: 30px;
}

.side-info {
  padding-top: 10px;
}

.contact-list h4 {
  color: #fff;
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 20px;
}

.contact-list p {
  color: #fff;
  font-size: 15px;
  line-height: 25px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.contact-list p i {
  float: left;
  margin-top: 6px;
  width: 25px;
}

.contact-list p span {
  display: block;
  overflow: hidden;
}

.offcanvas-overlay {
  position: fixed;
  background: #000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.offcanvas-overlay.active {
  opacity: 0.5;
  visibility: visible;
}

.extra-info .site-logo-2 {
  width: 220px;
  text-align: center;
  margin-top: 20px;
}

.social-area-wrap a i {
  font-size: 16px;
}

.social-area-wrap a {
  width: 40px;
  height: 40px;
  background: #222;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.social-area-wrap a:hover {
  opacity: 0.5;
}

/*Hero Area */
.hero-section {
  background: #07203D;
  height:760px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  z-index: 1;
  padding-top:60px;
}
.hero-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background:#07203D14;
  opacity: 0.65;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-section .hero-content {
  max-width:100%;
}

.hero-section .hero-content .title {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #ffffff;
  margin-top: 15px;
	font-weight: 600;
	text-shadow: 0px 1px 2px rgba(23, 0, 0, 1);
}
.hero-section .hero-content .text {
 font-size: 21px;
  line-height: 28px;
  color: #ffffff;
  margin-top: 15px;
  font-weight: 500;
	text-shadow: 0px 1px 2px rgba(23, 0, 0, 1);
}

@media only screen and (max-width: 1199px) {
  .hero-section {
    height: 710px;
  }
  .hero-section .hero-content .title {
    font-size: 58px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-section {
    height: 650px;
  }
  .hero-section .hero-content .title {
    font-size: 44px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-section {
    height: 580px;
  }
  .hero-section .hero-content .title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 449px) {
  .hero-section {
    height:290px;
  }
	.hero-section .hero-content .hero-btn-wrap {
  margin-bottom: 65px;
}
  .hero-section .hero-content .title {
    font-size: 30px;
  }
  .hero-section .hero-content .text {
    font-size: 16px;
  }
}
.hero-section .hero-content .hero-btn-wrap {
  display:inline-block;
  margin-top: 25px;
}

/*About CSS  */
.about-img-wrapper {
  padding-left: 60px;
}
.about-img-wrapper.artist { padding-left:0;padding-right:60px;}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-img-wrapper {
    padding-left: 0;
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .about-img-wrapper {
    padding-left: 0;
    margin-top: 60px;
  }
}

#about-page .about-content-wrap {
  padding-right: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #about-page .about-content-wrap {
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  #about-page .about-content-wrap {
    padding-right: 0;
    margin-top: 20px;
  }
}
#about-page .about-content-wrap h5 {
  line-height: 1.4;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #about-page .about-img-wrap {
    margin-top: 30px;
  }
}
#about-page .about-img-wrap img {
  filter: grayscale(1);
}
#about-page .about-content-wrap.obverse {
  padding: 80px 80px 0 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #about-page .about-content-wrap.obverse {
    padding: 0;
    padding-left: 10px;
  }
}
#about-page .about-content-wrap.reverse {
  padding: 120px 130px 0 0;
}
/*Project CSS  */
#project-1 .single-project-item {
  margin-bottom: 30px;
}
#project-1 .project-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #project-1 .project-info {
    flex-direction: column;
    align-items: start;
  }
}
@media (max-width: 767px) {
  #project-1 .project-info {
    flex-direction: column;
    align-items: start;
  }
}
#project-1 .project-title h5 {
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  text-decoration-color: #ddd;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #project-1 .project-meta {
    margin-top: 10px;
  }
}
@media (max-width: 767px) {
  #project-1 .project-meta {
    margin-top: 10px;
  }
}
#project-1 .project-meta span {
  display: block;
  font-size: 15px;
}
#project-1 .project-img img {
  width: 100%;
  object-fit: cover;
  transition: all 0.35s ease-in-out;
}
#project-1 .project-img img:hover {
  transform: scale(1.07);
}





.project-list-content .section-title h2 {
  font-size: 45px;
  letter-spacing: 0;
}

.project-list-content {
  padding-left: 60px;
  max-width: calc(100% - 80px);
}
.project-list-content.right {
  padding-right: 60px;
	padding-left: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-list-content {
    padding-left: 0;
    margin-top: 30px;
    max-width: calc(100% - 40px);
  }
}

/*Counter CSS*/
.single-counter-box {
  text-align: center;
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .single-counter-box {
    text-align: center;
  }
}
.single-counter-box p.counter-number {
  font-size: 70px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #171717;
  border-bottom: 1px solid #ddd;
  display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .single-counter-box p.counter-number {
    font-size: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-counter-box p.counter-number {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .single-counter-box p.counter-number {
    font-size: 40px;
  }
}
.single-counter-box p.counter-number span {
  font-size: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .single-counter-box p.counter-number span {
    font-size: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-counter-box p.counter-number span {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .single-counter-box p.counter-number span {
    font-size: 40px;
  }
}
.single-counter-box span {
  font-size: 40px;
  margin-left: 10px;
}
@media (max-width: 767px) {
  .single-counter-box span {
    margin-left: 0;
  }
}
.single-counter-box h6 {
  font-size: 18px;
  font-weight: 400;
  color: #7f7f7f;
}
@media (max-width: 767px) {
  .single-counter-box h6 {
    font-size: 17px;
    margin-top: 10px;
  }
}

p.counter-number span.operator {
  font-size: 30px !important;
  color: #555;
}

/*CTA CSS  */
.cta-img-area {
  position: relative;
  z-index: 1;
  height: 500px;
  background:var(--color-gradient);	
  /*background-size: cover;
  background-position: center;
  background-attachment: fixed;*/
}
@media (max-width: 767px) {
  .cta-img-area {
    height: 350px;
  }
}
.cta-img-area .cta-inner {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cta-img-area h2 {
  font-size: 65px;
  font-weight: 400;
  line-height: 75px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta-img-area h2 {
    font-size: 60px;
    line-height: 70px;
  }
  .cta-img-area h2 br {
    display: none;
  }
}
@media (max-width: 767px) {
  .cta-img-area h2 {
    font-size: 35px;
    line-height: 45px;
  }
  .cta-img-area h2 br {
    display: none;
  }
}



/* 31. Footer Area CSS  */
.footer-area {
  background: #0A0A0A;
  color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-area {
    padding: 100px 50px;
  }
}
@media (max-width: 767px) {
  .footer-area {
    padding: 50px 30px;
    margin-top: 0;
  }
}
.footer-area .logo {
  height: 90px;
  display: flex;
  align-items: center;
  padding-right: 30px;
  font-size: 26px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.footer-area h5 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 20px 0;
}
.footer-area p {
  margin-top: 5px;
  color: #868686;
}
.footer-area ul li a {
  font-size: 15px;
  display: block;
  color: #868686;
  padding: 10px 0;
  position: relative;
}
@media (max-width: 767px) {
  .footer-area ul li a {
    padding: 6px 0;
  }
}
.footer-area ul li a:hover {
  opacity: 0.5;
}

.footer-up {
  padding:36px 0;
}
.footer-up .social-area i {
  color: #eee;
  font-size: 20px;
  margin-right: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-up {
    padding-bottom: 0;
    padding-top: 0;
  }
}
@media (max-width: 767px) {
  .footer-up {
    padding: 0;
  }
}

.footer-bottom {
  font-size: 14px;
  font-weight: 400;
  padding:21px 0 21px;
  background: #0A0A0A;
  border-top: 1px solid #222;
}
.footer-bottom a {color:var(--color-gold);font-size: 14px;}
.footer-bottom p {
  margin: 0;
  font-size: 14px;
  color: #fff;
}
@media (max-width: 767px) {
  .footer-bottom {
    text-align: center;
  }
}

.company-email {
  margin-bottom: 15px;
}
.company-email p {
  margin: 0;
}

.company-email a {
  color: #f6f6f6;
  font-size: 18px;
  font-weight: 400;
  text-decoration: underline;
}
.company-email a:hover {
  color: #fff;
}

.phone-number {
  margin-bottom: 15px;
}
.phone-number p {
  margin: 0;
}

.phone-number a {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

.footer-two ul li a {
  color: #fff;
}

@media (max-width: 767px) {
  .footer-area p br {
    display: none;
  }
}

/*Breadcrumb*/

.breadcrumb-bg.about-bg {
  background-image: url("../images/about-bg01.jpg");
}
.breadcrumb-bg.portfolio-bg {
  background-image: url("../images/painting-portfolio-sub.jpg");
	 background-position: center top;
}
.breadcrumb-bg.contact-bg {
  background-image: url("../images/contact-bg01.jpg");
	 background-position: center center;
}

.breadcrumb-bg {
  height:528px;
  background-size: cover;
  background-position: center center;
  background-color: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.breadcrumb-bg .breadcrumb-title {
  position: relative;
  z-index: 999;
}
.breadcrumb-bg .breadcrumb-title h1 {
  font-size: 65px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: #fff;
  margin: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-bg .breadcrumb-title h1 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 540px) and (max-width: 767px) {
	
.breadcrumb-bg {
	height:122px;}
  .breadcrumb-bg .breadcrumb-title h1 {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
	.breadcrumb-bg {
	height:122px;}
  .breadcrumb-bg .breadcrumb-title h1 {
    font-size: 40px;
  }
}

.breadcrumb {
  margin-bottom: 0;
}

.breadcrumb-item a {
  color: #a39d9d;
  font-size: 17px;
}

.breadcrumb-item.active {
  color: #333;
  font-size: 17px;
  font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #a39d9d !important;
}

.breadcrumb-bg h4 {
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 15px;
}

.breadcrumb-bg.white-bg {
  padding-top: 60px;
}
.breadcrumb-bg.white-bg h1 {
  font-size: 60px;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.breadcrumb-bg.white-bg i {
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
}

/* 33. Contact CSS  */
.contact-section .section-title h1 {
  font-size: 90px;
  font-weight: 500;
  line-height: 100px;
}
.contact-section .section-title i {
  transform: rotate(-45deg);
  position: relative;
  top: 10px;
}
.contact-section .contact-text {
  text-align: justify;
}
.contact-section .subimit-form-wrap form {
  margin-top: 50px;
}
.contact-section .subimit-form-wrap input,
.contact-section .subimit-form-wrap textarea {
  border: none;
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}
.contact-section .subimit-form-wrap textarea {
  height:120px;
}
.contact-section input[type=submit] {
  border: 1px solid #ddd;
  width: 160px;
}
.contact-section iframe {
  max-width: calc(100% - 40px);
  height: 600px;
  filter: grayscale(1);
  position: relative;
  z-index: -1;
}
@media (max-width: 767px) {
  .contact-section iframe {
    max-width: calc(100% - 0px);
  }
}
.contact-section .single-contact-info {
  border-bottom: 1px solid #ddd;
}
.contact-section .single-contact-info p {
  margin: 0;
}
.contact-section .single-contact-info h4 {
  margin: 0 0 15px;
}
@media (max-width: 767px) {
  .contact-section .single-contact-info h4 {
    font-size: 18px;
  }
}
.contact-section .social-area {
  margin-top: 30px;
}
.contact-section .social-area a {
  background: #9F9F9D;
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.contact-section .social-area a i {
  font-size: 14px;
  margin-right: 0;
}
.contact-section .contact-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
@media (max-width: 767px) {
  .contact-section .contact-info {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .contact-section img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }
}


/*Testimonials Section Start Here*/
.testimonials-con {padding:60px 0}
.testimonials-con .white-box {padding:45px 49px;background-color:#f8f3ed;box-shadow: 0 9px 56px rgb(0 0 0 / 4%);border-radius: 25px;min-height: 320px;}
.testimonials-con .owl-carousel .owl-stage-outer {padding-top: 30px;padding-bottom: 30px;}
.testimonials-con .owl-carousel .owl-item .white-box img {width: auto;margin-bottom: 18px;}
.testimonials-con .owl-carousel .owl-item .white-box p {line-height:25px;margin-bottom:21px;}
.testimonials-con .testimonial-detail {gap: 16px;}
.testimonials-con .owl-carousel .owl-item .white-box .testimonial-detail .name-outer ul {margin-bottom: 11px;}
.testimonials-con .owl-carousel .owl-item .white-box .testimonial-detail .name-outer ul,
.testimonials-con .owl-carousel .owl-item .white-box .testimonial-detail .name-outer li {line-height:14px;}
.testimonials-con .owl-carousel .owl-item .white-box .testimonial-detail .name-outer ul li i {font-size: 13px;color:#ffc045;}
.testimonials-con .owl-dots {margin-top: 18px;text-align: center;}
.testimonials-con .owl-dots button {border: none;outline: none;box-shadow: none;text-align: center;margin: 0 auto;}
.testimonials-con .owl-dots button:focus, .testimonials-con .owl-dots button:focus-visible {border: none;outline: none;box-shadow: none;}
.testimonials-con .owl-dots button.active span {background:var(--jh-primary); /* fallback orange */color: var(--jh-primary);width: 18px;height: 18px;}
.testimonials-con .owl-dots button span {background: #e3d6d2;width: 13px;height: 13px;display: block;margin-right: 5px;margin-left: 5px;cursor: pointer;margin-bottom: 0;border-radius: 100%;}

/*WhatsChat Start Here*/
#whatsapp-button {
    position: fixed;
    right:40px;
    bottom:30px;
    z-index: 9999;
    animation: bounce 1s infinite;
}

#whatsapp-button img {
    width:55px;
    height:55px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: #25D366;
    padding: 10px;
}
 /* Floating Call Button Styling */
  .floating-call-button {
    position: fixed;
    bottom:110px;
    right:40px;
    background-color:var(--tna-secondary);
    padding: 15px;
    border-radius: 50%;
    color:var(--tna-white);
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1000;
  }

  .floating-call-button:hover {
    background-color:var(--tna-secondary);
	color:var(--tna-white);  
    cursor: pointer;
  }
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
/*WhatsChat Button*/