@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@font-face {
  font-family: "NeueHaasDisplayLight";
  src: url("/fonts/ascari/NeueHaasDisplayLight.ttf") format("truetype");
}
@font-face {
  font-family: "NeueHaasDisplayMedium";
  src: url("/fonts/ascari/NeueHaasDisplayMediu.ttf") format("truetype");
}
@font-face {
  font-family: "NeueHaasDisplayRoman";
  src: url("/fonts/ascari/NeueHaasDisplayRoman.ttf") format("truetype");
}
@font-face {
  font-family: "NeueHaasDisplayBold";
  src: url("/fonts/ascari/NeueHaasDisplayBold.ttf") format("truetype");
}
@font-face {
  font-family: "Timeless";
  src: url("/fonts/ascari/Timeless.ttf") format("truetype");
}
@font-face {
  font-family: "TimelessBold";
  src: url("/fonts/ascari/Timeless-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "FactorA";
  src: url("/fonts/ascari/FactorA-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "FactorALight";
  src: url("/fonts/ascari/FactorALight-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "GothamBook";
  src: url("/fonts/ascari/Gotham-Book.otf") format("opentype");
}
@font-face {
  font-family: "DreamAvenue";
  src: url("/fonts/Dream-Avenue.ttf") format("opentype");
}
@font-face {
  font-family: "Alex Brush";
  src: url("/fonts/alex-brush/AlexBrush-Regular.woff2") format("woff2"), url("/fonts/alex-brush/AlexBrush-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cooper Hewitt";
  src: url("/fonts/cooper-hewitt/CooperHewitt-Bold.woff") format("woff");
}
@font-face {
  font-family: "Telegraf";
  src: url("/fonts/telegraf/PPTelegraf-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Telegraf";
  src: url("/fonts/telegraf/PPTelegraf-Ultrabold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/*Global Styling*/
.position-absolute {
  position: absolute;
}

@media (max-width: 767px) {
  .m-none {
    display: none !important;
  }
}
@media (max-width: 576px) {
  .m-none {
    display: none !important;
  }
}
@media (max-width: 424px) {
  .m-none {
    display: none !important;
  }
}
input#rememberMe {
  border: none;
}

@media (max-width: 992px) {
  .home-titles {
    right: 10% !important;
  }
  .home-titles h1 {
    font-size: 2.2rem;
  }
}
@media (max-width: 767px) {
  .home-titles {
    right: 10% !important;
  }
  .home-titles h1 {
    font-size: 2.2rem;
  }
}
@media (max-width: 576px) {
  .home-titles {
    right: 10% !important;
  }
  .home-titles h1 {
    font-size: 2.2rem;
  }
}
@media (max-width: 424px) {
  .home-titles {
    right: 10% !important;
  }
  .home-titles h1 {
    font-size: 2.2rem;
  }
}
.home-titles {
  bottom: 10%;
  right: 25%;
}

.font-cooper-hewitt {
  font-family: "Cooper Hewitt" !important;
}

.font-alex-brush {
  font-family: "Alex Brush" !important;
}

.font-telegraf {
  font-family: "Telegraf" !important;
}

.color-grayish-brown {
  color: #8a8077 !important;
}

body {
  font-size: 15px;
  color: #808080;
  font-family: "Telegraf" !important;
  font-weight: normal;
  overflow-x: hidden;
  direction: ltr;
}

::selection {
  background: rgba(214, 229, 236, 0.5) !important;
  color: #fff;
}

.gradient-bg {
  -webkit-background-size: 200% auto;
  background-size: 200% auto;
  background-image: -webkit-gradient(linear, left top, right top, from(#050506), color-stop(51%, #545454), to(#050506));
  background-image: -webkit-linear-gradient(left, #050506 0%, #545454 51%, #050506 100%);
  background-image: -moz-linear-gradient(left, #050506 0%, #545454 51%, #050506 100%);
  background-image: -o-linear-gradient(left, #050506 0%, #545454 51%, #050506 100%);
  background-image: linear-gradient(to right, #050506 0%, #545454 51%, #050506 100%);
}

.section-contact {
  background-color: #231f20 !important;
  color: white;
  padding: 4rem 1rem;
}
.section-contact h2 {
  font-size: 2rem;
  letter-spacing: 0.1rem;
  font-weight: bold;
  margin-bottom: 2rem;
}
.section-contact .contact-info {
  font-size: 0.95rem;
  line-height: 1.6;
}
.section-contact .contact-form input,
.section-contact .contact-form select {
  background: transparent;
  border: none;
  border-bottom: 1px solid white;
  border-radius: 0;
  color: white;
}
.section-contact .contact-form input:focus,
.section-contact .contact-form select:focus {
  background: transparent;
  color: white;
  box-shadow: none;
}
.section-contact .contact-form input::placeholder,
.section-contact .contact-form select::placeholder {
  color: white !important;
  opacity: 1;
}
.section-contact .contact-form select {
  color: white;
}
.section-contact .contact-form select option {
  color: black;
}
.section-contact .contact-form button {
  margin-top: 1rem;
  padding: 0.6rem 2rem;
  background-color: #fff;
  color: #000;
  border: none;
  font-weight: 500;
}
.section-contact .contact-form button:hover {
  background-color: #ddd;
}
@media (max-width: 768px) {
  .section-contact .contact-info,
  .section-contact .contact-form {
    text-align: center;
  }
  .section-contact .contact-form .row > div {
    padding-right: 0;
    padding-left: 0;
  }
}

.section-about .about-box {
  width: 265.2px;
}
.section-about .about-box .image {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.section-project .left {
  position: relative;
}
.section-project .left .image-wrapper {
  position: relative;
}
.section-project .left .image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}
.section-project .left .image-wrapper .project-title {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 2rem;
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}
.section-project .left .image-wrapper .project-title em {
  font-weight: 400;
}
.section-project .left .image-wrapper .project-title strong {
  font-weight: 700;
}
.section-project .right {
  color: rgb(0, 0, 0);
}
.section-project .right .logo {
  margin-bottom: 1rem;
}
.section-project .right .logo img {
  width: 200px;
}
.section-project .right p {
  margin-bottom: 1.5rem;
}
.section-project .right .price-range {
  font-size: 2em;
  font-weight: 400;
  font-style: normal;
}

.highlight-project img {
  width: 100%;
  height: auto;
}

footer {
  font-size: 0.875rem;
}

h1,
h3,
h5 {
  word-break: break-word;
}

/*scroll bar styling*/
::-webkit-scrollbar-track {
  background-color: #515252;
}

::-webkit-scrollbar {
  width: 7px;
  background-color: white;
}

::-webkit-scrollbar-thumb {
  background: white;
}

::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 100px 20px white;
}