:root {
   --clr-blue-dark: #0077b6; /* dark blue */
   --clr-blue-light: #d9f0fc; /* light blue */
   --clr-blue-teal: #00b4d8; /* teal blue */
   --clr-blue-teal-light: #90e0ef; /* light teal blue */
   --clr-gray-dark: #4a4a4a; /* gray dark */
   --clr-gray-light: #ebebeb; /* gray dark */

} 

html {
   line-height: 1.4;
   scroll-behavior: smooth;
}

* {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

body {
   margin: 0;
   padding-top: 60px;
   /* font-family: 'Oxygen', sans-serif; */
   font-family: system-ui, sans-serif;
   position: relative;
   overflow-x: hidden;

}

.logo {
   display: flex; align-items: center; justify-content: space-between;
}

.title {
   font-size: 1.5rem;
   color: #3c3c3c; letter-spacing: -1px; text-decoration: none;
}
.paint {
   transform: rotateY(180deg);
   margin: 0 0 -5px 10px;
   width: 60px;
   height: 35px;
}

@media screen and (min-width: 1024px) {
   .title {
      font-size: 2rem;
   }
   .paint {
      width: 75px;
      height: 44px;
   }
}

section {
   padding: 25px 0;
}

.content {
   max-width: 100vw;
   display: block;
   margin: 0 auto;
}

p {
   font-size: 1.125rem;
   /* margin: 5px 0 10px; */
}

.bold {
   font-weight: 700;
}

h1 {
   margin-bottom: 7px;
} 

h2 {
   font-size: 2.25rem;
   margin: 5px 0 10px;
}

img {
   max-width: 100%;
   height: auto;
}

.center {
   text-align: center;
}

.home {
   text-decoration: none;
}


/* Navbar Layout */

.navbar {
   position: fixed; top: 0; width: 100%; height: 60px;
   background: #fff; border-bottom: 1px solid #ddd;
   display: flex; justify-content: space-between; align-items: center;
   padding: 0 3%; box-sizing: border-box; z-index: 1000;
}

/* Nav Menu (Desktop by default) */
.nav-menu { display: flex; list-style: none; gap: 1.5rem; margin: 0; }
.nav-link { text-decoration: none; text-transform: uppercase; color: #3c3c3c; font-size: 1.2rem; font-weight: 500; }

/* Toggle Button (Mobile Only) */
.nav-toggle {
   display: none; background: none; border: none; font-size: 2.5rem;
   cursor: pointer; padding: 0;
}

/* Mobile Responsive View (< 1024px) */
@media (max-width: 1024px) {
   .nav-toggle { display: block; }
   .nav-menu {
       position: fixed; top: 60px; right: -100%; width: 250px; height: 100vh;
       background: #f8f8f8; flex-direction: column; padding: 2rem;
       transition: right 0.3s ease; box-shadow: -2px 0 5px rgba(0,0,0,0.1);
   }
   .nav-link { font-size: 1.5rem; }
   /* Show menu when 'active' class is added */
   .nav-menu.active { right: 0; }
}

/* Banner */

.banner {
   padding: 285px 15px;
   background-color: #000;
   background-image: url("../../assets/images/tiscar-murals-backyard-desert-roadrunner.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   text-align: center;
   color: #FFFFFF;
}

@media screen and (min-width: 1024px) {
.banner {
   background-position: center center; 
   display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: 500px; /* Example: Centers within the viewport height */
    position: relative; /* Needed for positioning context if you have other elements */

   }
}
/*
.banner .banner--content {
   max-width: 1400px;
   height: auto;
   display: block;
   margin: 0 auto;
   background-repeat: no-repeat;
   background-position: top right;
   background-size: contain;
}
*/

/* Define the animation */
@keyframes fadeInUp {
    /* Starting state (0%) */
    0% {
        opacity: 0;
        transform: translateY(20px); /* Starts 20 pixels below its final position */
    }
    /* Ending state (100%) */
    100% {
        opacity: 1;
        transform: translateY(0); /* Ends at its original position */
    }
}

/* Apply the animation to the element */
.fade-up-element {
   margin-top: -200px;
    animation-name: fadeInUp;
    animation-duration: 1.2s; /* How long the animation takes */
    animation-timing-function: ease-out; /* The speed curve of the animation */
    animation-fill-mode: forwards; /* Ensures the element stays in its final state */
    /* Add optional delay or iteration count as needed */
}

.banner .fade-up-element h2 {
   font-size: 2rem;
   letter-spacing: -1px;
   font-weight: 300;
   color: #fff;
   text-shadow: 0 1px 2px #444;
}

.banner .fade-up-element h2 span.blue {
   /* color: #0077b6; #88d4fc; */
   font-weight: 700;
}

/* 
.banner .banner--content .name {
   font-size: 1.5rem;
   color: #fff;
   text-transform: uppercase;
   text-shadow: 0 1px 2px #000;
}

.banner .banner--content .designation {
   color: rgba(255, 255, 255, 0.7);
   text-transform: uppercase;
   font-family: 'Oxygen', sans-serif;
   font-weight: 700;
   font-size: 2.2rem;
   margin: 0;
}
 */
@media screen and (min-width: 1024px) {
   .banner .banner--content .designation {
      
   }
   
   .banner .fade-up-element h2 {
      font-size: 4.375rem;
   }
   
   
}


/* Promo */

.promo {
   background-color: #000;
   text-align: center;
}

.promo .content h2 {
   font-size: 2rem;
   font-weight: 300;
   color: #f0f0f0;
   text-shadow: 0 1px 2px #444;
}



.promo .content p {
   margin-top: -10px;
   color: #444;
   font-size: 1.2rem;
}

.promo .content .tagline {
   margin-top: 1rem;
   font-size: 1rem;
   color: #444;
}

@media screen and (min-width: 1024px) {
   .promo .content .tagline {
      font-size: 1.5rem;
   }
}

@media screen and (min-width: 1024px) {
.promo .content h2 {
      font-size: 3rem;
   }
   .promo .content p {
      font-size: 2rem;
   }
}

/* Murals */

#murals {
   scroll-margin-top: 50px;
   background-color: #000;
   border: 1px solid #000;
}

#murals h2 {
   color: #f0f0f0;
   text-align: center;
   display: block;
   margin: 0 auto 30px auto;
}

/* Lightbox Grid */

.grid-container {
   display: grid; /* Initialize as a grid container */
   /* Creates as many columns as will fit, each at a minimum of 250px. 
      Use 'auto-fill' to allow items to wrap to new lines as space runs out. */
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 10px; /* Adds space between grid items */
   justify-content: center; /* Centers the grid within its parent container on larger screens */
   max-width: 560px; /* Optional: Sets a max width for the entire grid to limit to roughly 3 columns on very large screens */
   margin: 0 auto; /* Centers the grid container itself on the page */
}
      
@media screen and (min-width: 1024px) {
   .grid-container {
      display: grid; /* Initialize as a grid container */
      /* Creates as many columns as will fit, each at a minimum of 250px. 
         Use 'auto-fill' to allow items to wrap to new lines as space runs out. */
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
      gap: 20px; /* Adds space between grid items */
      justify-content: center; /* Centers the grid within its parent container on larger screens */
      max-width: 1280px; /* Optional: Sets a max width for the entire grid to limit to roughly 3 columns on very large screens */
      margin: 0 auto; /* Centers the grid container itself on the page */
      }
}


.grid-item {
    display: flex; /* Use flexbox to center content inside each grid item */
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically (if item heights vary) */
    text-align: center; /* Fallback for older browsers/better compatibility */
}

.grid-item img {
    width: 100%;
    max-width: 100%; /* Ensures images are responsive and stay within their containers */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Helps with centering and removes default image bottom margin issues */
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically (if item heights vary) */
    text-align: center; /* Fallback for older browsers/better compatibility */
    border: 1px solid #000;
    background-color: transparent;
    padding: 0px;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

.grid-item img:hover {
    opacity: 1;
    border: 1px solid #f0f0f0;
}

.murals-image-link, a.murals-example-image {
  font-style: normal;
}

/* Disable Links for Lightbox Grid on small Mobile devices 
 
@media screen and (max-width: 560px) {
  .murals-image-link, a.murals-example-image {
    pointer-events: none;
    cursor: default;
  }
}
*/
 
 



/* About */


#about {
   scroll-margin-top: 50px;
   padding: 100px 0 0 0;
   background-color: #000;
   border: 1px solid #000;
}

#about .content h2 {
   color: #f0f0f0;
   text-align: left;
   margin: 0 auto 30px auto;
}

#about .about-container {
   display: block;
}


@media screen and (min-width: 1024px) {
   #about .about-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
   }
}


hr {
   width: 300px; height: 1px; color: #eee; background-color: #999; border: 0 none; margin: 20px auto;
}
.cube {
   width: 15px; height: 15px; color: #eee; background-color: #88d4fc; border: 0 none; margin: 20px auto;
}

@media screen and (min-width: 1024px) {
   h2 {
      font-size: 4.375rem;
      font-weight: 700;
   }
   hr {
      width: 400px; height: 1px; color: #eee; background-color: #999; border: 0 none; margin: 20px auto;
   }
}



#about .about-container-right {
   color: #f0f0f0;
   -ms-flex-preferred-size: 50%;
   flex-basis: 50%;
   background: #000;
   padding: 30px;
}

.link-color {
   color: #88d4fc; 
   font-style: normal;
   text-decoration: underline;
}

#about .about-container-right li {
   font-style: italic;
   line-height: 1.9;
}

#about .about-container-left {
   -ms-flex-preferred-size: 50%;
   flex-basis: 50%;
   background: #F2F3F8;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

#about .about-container-left img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   -ms-flex-item-align: start;
   align-self: flex-start;
}

@media screen and (min-width: 1200px) {
   #about .about-container-left img {
      -ms-flex-item-align: auto;
      -ms-grid-row-align: auto;
      align-self: auto;
   }
}

#about .about--content .item a {
   padding: 10px 20px;
   font-weight: 700;
   text-transform: uppercase;
   border: 1px solid #222;
   text-decoration: none;
   color: #FFF;
   background: #0077b6;
}



/* Pricing */

#pricing {
   scroll-margin-top: 50px;
   padding: 0 0 0 0;
   background-color: #000;
   border: 1px solid #000;
}

#pricing .content h2 {
   color: #f0f0f0;
   text-align: left;
   margin: 0 auto 30px auto;
}

#pricing .pricing-container {
   display: block;
}

@media screen and (min-width: 1024px) {
   #pricing .pricing-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
   }
}

#pricing .pricing-container-left {
   color: #f0f0f0;
   -ms-flex-preferred-size: 50%;
   flex-basis: 50%;
   background: #000;
   padding: 30px;
}

.contact a {
   color: #222;
   font-style: normal;
   text-decoration: none;
   font-weight: 700;
   font-size: 1rem;
}

#pricing .pricing-container-left li {
   font-style: italic;
   line-height: 1.9;
}

#pricing .pricing-container-right {
   -ms-flex-preferred-size: 50%;
   flex-basis: 50%;
   background: #F2F3F8;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

#pricing .pricing-container-right img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   -ms-flex-item-align: start;
   align-self: flex-start;
}

@media screen and (min-width: 1200px) {
   #pricing .pricing-container-right img {
      -ms-flex-item-align: auto;
      -ms-grid-row-align: auto;
      align-self: auto;
   }
}

#pricing .pricing--content .item a {
   padding: 10px 20px;
   font-weight: 700;
   text-transform: uppercase;
   border: 1px solid #222;
   text-decoration: none;
   color: #FFF;
   background: #0077b6;
}


/* Contact */

#contact {
   scroll-margin-top: 50px;
   padding: 50px 0 75px 0;
   background-color: #000;
   color: #f0f0f0;
   border: 1px solid #000;
}

#contact .contact-detail, #contact address {
   max-width: 800px;
   font-size: 2rem;
   display: block;
   margin: 0 auto;
}

.text a, .type a {
   color: #88d4fc;
   /* color: #0077b6; */
   text-decoration: none;
   font-style: normal;
   line-height: 1.5;
   font-weight: 700;
   font-size: 1.75rem;
}

.type a {
   font-weight: 400;
   font-size: 1.25rem;
}

#contact address {
   margin-top: 60px;
}

#contact address a {
   color: #88d4fc;
   text-decoration: none;
}


/* Testimonials */

#testimonials {
   scroll-margin-top: 50px;
   padding: 0 0 75px 0;
   background-color: #000;
   border: 1px solid #000;
}

#testimonials h2 {
   color: #f0f0f0;
   max-width: 1200px;
   display: block;
   margin: 0 auto 30px auto;
}

#testimonials .testimonials--content {
   max-width: 1200px;
   display: block;
}

@media screen and (min-width: 1024px) {
   #testimonials .testimonials--content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
   }
}

#testimonials .testimonials--content .item {
   -ms-flex-preferred-size: 40%;
   flex-basis: 40%;
   margin: 15px 20px;
}

figure {
   margin: 0;
}

blockquote {
   margin: 0;
   padding: 0px 15px;
   background-color: #d3d7da;
   border: 1px solid #c0c0c0;
   border-radius: 15px;
  /*  box-shadow: 0 3px 16px 0 rgba(240, 240, 240, 0.9); The shadow effect */
}

blockquote p::before {
   content: '\201C';
}

blockquote p::after {
   content: '\201D';
}

figcaption {
   color: #d3d7da;
   margin: 15px 0 0 0;
   text-align: right;
}



/* Footer */

.site-footer {
   background-color: #000;
   padding: 25px 0px;
}

.site-footer .site-footer--content {
   max-width: 1600px;
   display: block;
   margin: 0 auto;
   color: #000;
   border: 1px solid #000;
}
/* 
.footer-title {
   font-size: 1.5rem;
   font-weight: 600;
   color: #3c3c3c; letter-spacing: -1px; text-decoration: none;
}
.footer-paint {
   transform: rotateY(180deg);
   margin-left: 5px;
   width: 60px;
   height: 35px;
}

.mission {
      display: none;
   }
   
@media screen and (min-width: 1024px) {
   .site-footer .site-footer--content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
   }
   .mission {
      display: block;
   }
}

.site-footer .site-footer--content .footer-left {
   -ms-flex-preferred-size: 55%;
   flex-basis: 55%;
}

.site-footer .site-footer--content .footer-left p {
   font-size: 1rem;
   line-height: 1.2;
   color: #444;
}

.site-footer .site-footer--content .footer-right {
   -ms-flex-preferred-size: 40%;
   flex-basis: 40%;
   text-align: left;
   line-height: 1.2;
   padding-top: 20px;

}

@media screen and (min-width: 1024px) {
   .site-footer .site-footer--content .footer-right {
      margin-top: 30px;
      -ms-flex-preferred-size: 40%;
      flex-basis: 40%;
      text-align: right;

   }
}

.site-footer .site-footer--content a {
   color: #444;
   text-decoration: none;
}
*/

.site-footer .copyright-notice p {
   font-size: 1rem;
   padding: 20px 0px 20px 20px;
   text-align: center;
   color: #9A9A9A;
   border: 1px solid #000;
}

@media screen and (min-width: 1024px) {
   .site-footer .copyright-notice p {
      font-size: 1.2rem;
      text-align: center;
      margin: 30px 0;
   }
}

/* Social */

.social-share {
   display: none;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   position: fixed;
   top: 50vh;
   left: 0;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

@media screen and (min-width: 1024px) {
   .social-share {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
   }
}

.social-share a {
   width: 50px;
   height: 50px;
   background-color: #DEF0FF;
   border: 1px solid #7f53ac;
   -webkit-transition: background-color 0.8s ease-in;
   transition: background-color 0.8s ease-in;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.social-share a img {
   width: 30px;
   height: auto;
   -ms-flex-item-align: center;
   -ms-grid-row-align: center;
   align-self: center;
}

.social-share a:hover {
   background-color: #7f53ac;
}

/* Misc */

#myElement {
   /* Initial state: visible */
   display: block;
   border: 1px solid black;
   padding: 10px;
}

button {
   cursor: pointer;
}

.spacer {
   margin: 0 2px;
}