/* This stylesheet is meant for custom styles, on top of the Bone Template */

/* Custom header height - 70% on desktop and 80% on other platforms */
body .hero.fs {
  height: 70vh !important;
  min-height: 400px;
}

/* Responsive adjustments for mobile and tablet */
@media screen and (max-width: 768px) {
  body .hero.fs {
    height: 80vh !important;
    min-height: 350px;
    padding-top: 80px;
  }
}

@media screen and (max-width: 480px) {
  body .hero.fs {
    height: 80vh!important;
    min-height: 300px;
    padding-top: 70px;
  }
}

/* Ensure slider height matches hero height */
.slider.fs {
  height: 80vh !important;
}

.slider.fs .hero, .slider.fs ul.slides {
  height: 80vh !important;
}

/* Responsive slider adjustments */
@media screen and (max-width: 768px) {
  .slider.fs {
    height: 80vh !important;
  }
  
  .slider.fs .hero, .slider.fs ul.slides {
    height: 80vh !important;
  }
}

@media screen and (max-width: 480px) {
  .slider.fs {
    height: 80vh !important;
  }
  
  .slider.fs .hero, .slider.fs ul.slides {
    height: 80vh!important;
  }
}

/* Brand logo in footer*/

footer .copyright {
  margin-top: -30px;
}

@media screen and (max-width: 768px) {
  footer .copyright  {
    margin-top: -10px;
  }
}

@media screen and (max-width: 480px) {
  footer .copyright  {
    margin-top: -10px;
  }
}

@media screen and (max-width: 480px) {
  section.content h1, section .content h1, header .content h1 {
    margin-top: 50px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 768px) {
  section.content h1, section .content h1, header .content h1 {
    margin-top: 50px;
    margin-bottom: 10px;
  }
}
/* Fabric background overlay */
.hero.fs .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 1;
  opacity: 80%;
}

.hero.fs .container {
  position: relative;
  z-index: 2;
}

.hero.fs .bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.088);
  z-index: 1;
}

.hero.fs .container {
  position: relative;
  z-index: 2;
}

/* Service items centering */
.top-line .row {
  margin-top: 30px;
  margin-bottom: -40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-line .service {
  flex: 0 0 auto;
  margin: 0 20px;
}

/* Reduce top and bottom margins for services section */
.top-line {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

@media screen and (max-width: 768px) {
  .top-line .row {
    flex-direction: column;
  }
  
  .top-line .service {
    margin: 10px 0;
  }
  
  .top-line {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* Social Media Icons - Minimal styling to maintain original alignment */
.social li a:hover {
  text-decoration: none;
  color: inherit;
}

/* Ensure FontAwesome icons are visible without changing layout */
.social li a:before {
  font-family: FontAwesome;
  margin-right: 22px;
}

/* Hero title animation */
.hero.fs .content h1.lg {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1.2s ease-out 0.5s forwards;
}

/* Hero text animation */
.hero.fs .content h3,
.hero.fs .content h4 {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1.2s ease-out 0.8s forwards;
}

/* Make h3 background transparent in hero section */
.hero.fs .content h3 {
  background-color: transparent !important;
  background: transparent !important;
}

/* Make h3 background transparent on mobile and tablet */
@media screen and (max-width: 1024px) {
  .hero.fs .content,
  .hero.fs .content h3 {
    background-color: transparent !important;
    background: transparent !important;
  }
  
  .hero.fs section,
  .hero.fs .container {
    background-color: transparent !important;
    background: transparent !important;
  }
  
  /* Make hero h1 background transparent on projects page (mobile/tablet) */
  .hero.dark .content,
  .hero.dark .content h1,
  .hero.dark .content h1.lg {
    background-color: transparent !important;
    background: transparent !important;
  }
  
  .hero.dark section,
  .hero.dark .container {
    background-color: transparent !important;
    background: transparent !important;
  }
  
  /* Center h1 in hero sections */
  .hero.dark .content {
    text-align: center !important;
  }
  
  .hero.dark .content h1.lg {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  .hero.fs .content,
  .hero.fs .content h3 {
    background-color: transparent !important;
    background: transparent !important;
  }
  
  .hero.fs section,
  .hero.fs .container {
    background-color: transparent !important;
    background: transparent !important;
  }
  
  /* Make hero h1 background transparent on projects page (mobile/tablet) */
  .hero.dark .content,
  .hero.dark .content h1,
  .hero.dark .content h1.lg {
    background-color: transparent !important;
    background: transparent !important;
  }
  
  .hero.dark section,
  .hero.dark .container {
    background-color: transparent !important;
    background: transparent !important;
  }
  
  /* Center h1 in hero sections */
  .hero.dark .content {
    text-align: center !important;
  }
  
  .hero.dark .content h1.lg {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* About page header styling */
header .container {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Full width background on larger monitors */
@media screen and (min-width: 1200px) {
  header .container {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    position: relative !important;
  }
  
  /* Keep logo and menu in original positions */
  header .brand {
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }
  
  header .menu {
    position: relative !important;
    right: auto !important;
    transform: none !important;
    margin-right: 275px;
    }
  }


/* Mobile/Tablet: Desktop hover effect adapted for scroll */
@media screen and (max-width: 1024px) {
  .grid .grid-item .caption {
    background: rgba(0, 0, 0, 0.6) !important;
    transition: all .4s !important;
    overflow: hidden !important;
    top: 50px !important;           /* Hidden below */
    opacity: 0 !important;          /* Invisible */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }
  
  .grid .grid-item .caption .type {
    opacity: 0 !important;
    transform: translateX(-10px) !important;  /* Hidden to the left */
    transition: all .3s .3s !important;
    position: absolute !important;
    left: 40px !important;
    right: 40px !important;
    top: 40px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    color: #fff !important;
    text-transform: uppercase !important;
  }
  
  .grid .grid-item .caption .description {
    position: absolute !important;
    left: 40px !important;
    right: 40px !important;
    bottom: 40px !important;
    color: #fff !important;
  }
  
  .grid .grid-item .caption .description h4,
  .grid .grid-item .caption .description p {
    opacity: 0 !important;
    transform: translateY(10px) !important;   /* Hidden below */
  }
  
  .grid .grid-item .caption .description h4 {
    transition: all .3s !important;
  }
  
  .grid .grid-item .caption .description p {
    transition: all .3s !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  /* Scroll-triggered animation (replaces hover) */
  .grid .grid-item .caption.show {
    top: 0 !important;               /* Covers entire picture */
    opacity: 1 !important;          /* Becomes visible */
  }
  
  .grid .grid-item .caption.show .type {
    opacity: 1 !important;
    transform: translateX(0) !important;      /* Slides in from left */
  }
  
  .grid .grid-item .caption.show .description h4,
  .grid .grid-item .caption.show .description p {
    opacity: 1 !important;
    transform: translateY(0) !important;      /* Slides up */
  }
  
  .grid .grid-item .caption.show .description h4 {
    transition: opacity .5s .2s, transform .3s .1s !important;  /* Delayed animation */
  }
  
  .grid .grid-item .caption.show .description p {
    transition: opacity .5s .4s, transform .3s .3s !important;   /* More delayed */
  }
}

/* Logo sizing - Make 18Stories logo bigger */
header .brand img,
.brand img,
a.brand img,
header .container .brand img {
  max-height: 150px !important;
  height: 150px !important;
  min-height: 150px !important;
  width: auto !important;
  border-radius: 5px;
  opacity: 100% !important;
}

/* Ensure header brand logos fit well across devices */
header .brand img.dark-brand,
header .brand img.light-brand,
.brand img.dark-brand,
.brand img.light-brand,
a.brand img.dark-brand,
a.brand img.light-brand,
header .container .brand img.dark-brand,
header .container .brand img.light-brand {
  max-height: 150px !important;
  height: 150px !important;
  min-height: 150px !important;
  width: auto !important;
}

/* Responsive logo sizing */
@media screen and (max-width: 768px) {
  header .brand img,
  .brand img,
  a.brand img {
    max-height: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
  }
  
  header .brand img.dark-brand,
  header .brand img.light-brand,
  .brand img.dark-brand,
  .brand img.light-brand {
    max-height: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
  }
}

/* Footer logo sizing */
footer .copyright img.dark-brand,
footer .copyright img.light-brand {
  max-height: 28px !important;
  width: auto !important;
}

/* More link styling */
a[href="about.html"] {
  color: #000 !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease !important;
}

a[href="about.html"]:hover {
  opacity: 0.4 !important;
  text-decoration: none !important;
}

a[href="about.html"]:visited {
  color: #000 !important;
  text-decoration: none !important;
}

/* Bio link styling */
a[href*="bio-"] {
  text-decoration: none !important;
}

a[href*="bio-"] h3 {
  color: #000 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

a[href*="bio-"]:hover {
  text-decoration: none !important;
}

a[href*="bio-"]:hover h3 {
  opacity: 0.3 !important;
  text-decoration: none !important;
}

a[href*="bio-"]:visited {
  text-decoration: none !important;
}

a[href*="bio-"]:visited h3 {
  color: #000 !important;
  text-decoration: none !important;
}

/* Mobile copyright visibility */
@media screen and (max-width: 768px) {
  .nav-container .copyright {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Footer social icons fix */
footer .social li a {
  color: #2E2E2E !important;
  font-family: FontAwesome !important;
  font-size: 20px !important;
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

footer .social li a:hover {
  opacity: 0.7 !important;
  color: #2E2E2E !important;
  text-decoration: none !important;
}

footer .social li a:visited {
  text-decoration: none !important;
}

/* Light beige background for all pages - all devices */
body {
  background-color: #f7f4ea!important;
}

/* Footer background to match page on all pages */
footer {
  background-color: #f7f4ea !important;
}

/* Sections and containers - beige background */
section {
  background-color: #f7f4ea !important;
}

section.content,
section .content {
  background-color: #f7f4ea00 !important;
}

#wrapper {
  background-color: #f7f4ea !important;
}

/* Ensure beige background on responsive versions */
@media screen and (max-width: 992px) {
  body {
    background-color: #f7f4ea !important;
  }
  
  footer {
    background-color: #f7f4ea !important;
  }
  
  section {
    background-color: #f7f4ea !important;
  }
  
  section.content,
  section .content {
    background-color: #f7f4ea !important;
  }
  
  #wrapper {
    background-color: #f7f4ea !important;
  }
}

@media screen and (max-width: 768px) {
  body {
    background-color: #f7f4ea !important;
  }
  
  footer {
    background-color: #f7f4ea !important;
  }
  
  section {
    background-color: #f7f4ea !important;
  }
  
  section.content,
  section .content {
    background-color: #f7f4ea !important;
  }
  
  #wrapper {
    background-color: #f7f4ea !important;
  }
}

/* Global font weight override - all devices */
* {
  font-weight: 200 !important;
}

/* Global heading weight override */
h1, h2, h3, h4, h5, h6 {
  font-weight: 200 !important;
}

/* Body text weight */
body, body p, body span, body div, body a {
  font-weight: 200 !important;
}

/* Desktop default paragraph size */
body p {
  font-size: 18px !important;
}

/* Responsive paragraph sizing */
@media screen and (max-width: 992px) {
  body p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}

@media screen and (max-width: 768px) {
  body p {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }
}

/* Email link styling */
a[href^="mailto:"] {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 200 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Remove hover underline on desktop */
a[href^="mailto:"]:hover {
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Remove blue color and underline on mobile/touch devices */
a[href^="mailto:"]:active,
a[href^="mailto:"]:focus,
a[href^="mailto:"]:visited {
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Phone link styling */
a[href^="tel:"] {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 200 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Remove underline on mobile/responsive versions */
@media screen and (max-width: 992px) {
  a[href^="tel:"] {
    text-decoration: none !important;
  }
  
  a[href^="tel:"]:active,
  a[href^="tel:"]:focus,
  a[href^="tel:"]:visited {
    color: inherit !important;
    text-decoration: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Reverse hover effect - show overlay by default, hide on hover (desktop only) */
@media screen and (min-width: 992px) {
  /* Apply to all grid items, including those wrapped in links */
  .grid .grid-item .caption,
  .grid a.grid-item .caption {
    top: 25px !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    transition: all .4s !important;
  }
  
  .grid .grid-item .caption .type,
  .grid a.grid-item .caption .type {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: all .3s .3s !important;
  }
  
  .grid .grid-item .caption .description h4,
  .grid .grid-item .caption .description p,
  .grid .grid-item .caption .inner h4,
  .grid .grid-item .caption .inner p,
  .grid a.grid-item .caption .description h4,
  .grid a.grid-item .caption .description p,
  .grid a.grid-item .caption .inner h4,
  .grid a.grid-item .caption .inner p {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all .3s !important;
  }
  
  .grid .grid-item:hover .caption,
  .grid a.grid-item:hover .caption,
  .grid a:hover .grid-item .caption {
    top: 50px !important;
    opacity: 0 !important;
  }
  
  .grid .grid-item:hover .caption .type,
  .grid a.grid-item:hover .caption .type,
  .grid a:hover .grid-item .caption .type {
    opacity: 0 !important;
    transform: translateX(-10px) !important;
  }
  
  .grid .grid-item:hover .caption .description h4,
  .grid .grid-item:hover .caption .description p,
  .grid .grid-item:hover .caption .inner h4,
  .grid .grid-item:hover .caption .inner p,
  .grid a.grid-item:hover .caption .description h4,
  .grid a.grid-item:hover .caption .description p,
  .grid a.grid-item:hover .caption .inner h4,
  .grid a.grid-item:hover .caption .inner p,
  .grid a:hover .grid-item .caption .description h4,
  .grid a:hover .grid-item .caption .description p,
  .grid a:hover .grid-item .caption .inner h4,
  .grid a:hover .grid-item .caption .inner p {
    opacity: 0 !important;
    transform: translateY(10px) !important;
  }
}

/* Lighten the dark overlay on background images */
.hero.dark {
  background: rgba(46, 46, 46, 0.3) !important;
}

.bg.faded {
  opacity: 0.6 !important;
}