:root {
  /* Base */
  --studio-black: #1C1E21;
  --warm-graphite: #2A2D31;

  /* Text */
  --off-white: #EDEDED;
  --muted-grey: #9A9FA6;
  --soft-line-grey: #3A3D42;

  /* Accent */
  --amber: #E0A11B;
  --amber-dark: #B88214;

  /* Optional institutional */
  --deep-teal: #0F4C5C;
  --muted-teal: #3E6F7A;
}
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--muted-grey);
  background-color: var(--studio-black);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: var(--off-white);
  letter-spacing: -0.02em;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
a,
.main-color {
  color: var(--amber);
}

a:hover,
a:focus {
  color: var(--amber-dark);
}

::selection {
  background: var(--amber);
  color: #000;
}
.bg-dark {
  background-color: var(--studio-black);
}

.bg-grey {
  background-color: var(--warm-graphite);
  border-color: var(--soft-line-grey);
}

.section {
  background-color: transparent;
}
#nav {
  background: var(--studio-black);
  border-bottom: 1px solid var(--soft-line-grey);
}

#nav.fixed-nav {
  background: var(--studio-black) !important;
}

.main-nav > li > a {
  color: var(--off-white);
  font-weight: 500;
}

.main-nav > li > a:hover,
.main-nav > li.active > a {
  color: var(--amber);
}

.main-nav > li > a:after {
  background-color: var(--amber);
}
.bg-img .overlay {
  background: linear-gradient(
    90deg,
    rgba(28,30,33,0.83) 0%,
    rgba(28,30,33,0.68) 45%,
    rgba(28,30,33,0.52) 100%
  );
}
@media (max-width: 767px) {
  .bg-img .overlay {
    background: rgba(28,30,33,0.8);
  }
}


.home-content h1 {
  color: var(--off-white);
  letter-spacing: -0.03em;
}

.home-content p {
  color: var(--muted-grey);
}
.about,
.service {
  background: transparent;
  border: 1px solid var(--soft-line-grey);
}

.about i,
.service i {
  color: var(--amber);
}

.about:after,
.service:after {
  background-color: var(--warm-graphite);
}

.about:hover h3,
.service:hover h3 {
  color: var(--off-white);
}
.work .overlay {
  background: var(--studio-black);
}

.work .work-content span {
  color: var(--amber);
}

.work .work-link a {
  background-color: var(--amber);
}

.work .work-link a:hover {
  background-color: var(--amber-dark);
}
.pricing {
  background: transparent;
  border: 1px solid var(--soft-line-grey);
}

.pricing::after {
  background-color: var(--warm-graphite);
}

.pricing .price {
  border-color: var(--amber);
}

.pricing .price h3 {
  color: var(--off-white);
}

.pricing .duration {
  color: var(--muted-grey);
}

.pricing:hover .price-title {
  color: var(--amber);
}
.main-btn {
  background: var(--amber);
  color: #000;
  font-weight: 600;
}

.main-btn:hover {
  background: var(--amber-dark);
  color: #000;
}

.outline-btn {
  border-color: var(--amber);
  color: var(--amber) !important;
}

.outline-btn:hover {
  background: var(--amber);
  color: #000 !important;
}
#footer {
  background: var(--studio-black);
  border-top: 1px solid var(--soft-line-grey);
}

.footer-follow li a {
  background-color: var(--warm-graphite);
  color: var(--off-white);
}

.footer-follow li a:hover {
  background-color: var(--amber);
  color: #000;
}
/*------------------------------------*\
	Portfolio
\*------------------------------------*/

.work {
    position: relative;
    padding: 20px;
}

.work>img {
  width: 100%;
}


.work .work-content h3 {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 1;
    color: var(--amber);
    margin-bottom: 10px;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.work .work-content span {
    display: block;
    text-transform: uppercase;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 1;
    color: var(--off-white);
    margin-bottom: 5px;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.work .work-link {
    text-align: center;
    margin-top: 20px;
    opacity: 1;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
}


.work:hover .work-link {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    opacity: 1;
}