: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 {
   margin: 0 2px -5px 0;
   width: 60px;
   height: 35px;
}

.title-footer {
   font-size: 1.5rem;
   font-weight: 600;
   color: #dddddd; letter-spacing: -1px; text-decoration: none;
}
.paint-footer {
   margin-left: 5px;
   width: 60px;
   height: 35px;
}


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

section {
   padding: 50px 15px;
}

.content {
   max-width: 1200px;
   display: block;
   margin: 0 auto;
}

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

.bold {
   font-weight: 700;
}

h2 {
   font-size: 2.25rem;
   color: #0077b6;
   margin: 5px 0 10px;
}

hr {
   width: 300px; height: 1px; color: #eee; background-color: #c0c0c0; border: 0 none; margin: 20px auto;
}
.cube {
   width: 15px; height: 15px; color: #eee; background-color: #0077b6; 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: #c0c0c0; border: 0 none; margin: 20px auto;
   }
}

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

.center {
   text-align: center;
}

.home {
   text-decoration: none;
}


/* Modern Reset & Base Styles */
/* 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 .5rem; 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: #0077b6; 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.5rem;
}

/* 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 {
   padding: 90px 15px;
   background-color: #0077b6;
   /*
   /* background-image: linear-gradient(to bottom, 
   /*   transparent 0%,      /* Start transparent at the top 
   /*   transparent 50%,      /* Remain transparent until this point
   /*   rgba(51,51,51, .7) 100%      /* Transition to solid white by the bottom ), url("../../assets/images/tiscar-murals-backyard-beach-boat.jpg");
   */
   background-image: url("../../assets/images/tiscar-murals-backyard-beach-boat.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;
   color: #FFFFFF;
}

@media screen and (min-width: 1024px) {
.banner {
   background-position: center center; 
}
}

.banner .banner--content {
   max-width: 1400px;
   height: auto;
   display: block;
   margin: 0 auto;


   /*  background: url("../assets/svg/palette.svg"); */
   background-repeat: no-repeat;
   background-position: top right;
   background-size: contain;
}

.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 {
      font-size: 4.375rem;
   }
}

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

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

.promo .content h2 span.blue {
   color: #0077b6;
   font-weight: 700;
}

.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;
   }
}

#about .content h2 {
   text-align: center;
   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;
   }
}

#about .about-container-left {
   -ms-flex-preferred-size: 40%;
   flex-basis: 40%;
   background: #ecf8fe;
   padding: 30px 15px;
}

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

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

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

#about .about-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) {
   #about .about-container-right img {
      -ms-flex-item-align: auto;
      -ms-grid-row-align: auto;
      align-self: auto;
   }
}

#murals {
   background-color: #fff; /* #ebebeb; */
}

#murals .murals--content {
   display: block;
}

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

#murals .murals--content .left {
   -ms-flex-preferred-size: 30%;
   flex-basis: 30%;
   text-align: center;
   padding: 0 0 30px 0;
}

#murals .murals--content .left h2 {
      font-size: 2.25rem;
      color: #0077b6;
      text-align: center;
}
#murals .murals--content .left h2 p {
      text-align: center;
   }

@media screen and (min-width: 1024px) {
   #murals .murals--content .left {
      text-align: left;
   }
   #murals .murals--content .left h2 {
      font-size: 4.375rem;
      color: #0077b6;
      text-align: left;
   }   
   #murals .murals--content .left h2 p {
      text-align: left;
   }
}

#murals .murals--content .right {
   -ms-flex-preferred-size: 65%;
   flex-basis: 65%;
   display: block;
}

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

#murals .murals--content .right .item {
   -ms-flex-preferred-size: 32%;
   flex-basis: 32%;
   text-align: center;
   padding: 30px 15px;
   margin-bottom: 30px;
   -o-border-image: linear-gradient(45deg, #c0c0c0 0%, #c0c0c0 100%);
   border-image: linear-gradient(45deg, #c0c0c0 0%, #c0c0c0 100%);
   border-image-slice: 9;
   border: 1px solid #c0c0c0;
   border-radius: 20px;
   background-color: #ecf8fe;
}
#murals .murals--content .right .item h3 {
   font-size: 1.5rem;
}

@media screen and (min-width: 1024px) {
   #murals .murals--content .right .item {
      margin-bottom: 0;
   }
   #murals .murals--content .right .item h3 {
      font-size: 1.2rem;
   }
}

#murals .murals--content .right .item img {
   max-width: 80%;
   height: auto;
   display: block;
   border: 1px solid #ccc; /* Optional: Adds a border for visual clarity */
   background-color: #fff;
   padding: 10px; 
   margin: 0 auto 20px auto;
}

#gallery {
   background-color: #f0f0f0;
}

#gallery h2 {
   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(250px, 1fr));
    gap: 20px; /* Adds space between grid items */
    justify-content: center; /* Centers the grid within its parent container on larger screens */
    max-width: 900px; /* 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: auto;
    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 #ccc; /* Optional: Adds a border for visual clarity */
    background-color: #fff;
    padding: 10px;
}

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

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

#testimonials .testimonials--content {
   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: 15px;
   background: #f7f3e8;
   border: 1px solid #c0c0c0;
   border-radius: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* The shadow effect */
}


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

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

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


#pricing {
   background-color: #d9f0fc;
}

#pricing .pricing--content {
   display: block;
   max-width: 1600px;
   margin: 0 auto;
}

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

#pricing .pricing--content .item {
   /** -ms-flex-preferred-size: 32%;
       flex-basis: 32%;
   **/
   
   max-width: 80%;
   text-align: center;
   margin: 0 auto;
   border: 1px solid #bababa;
   background-color: #ecf8fe;
   border-radius: 20px;
   padding: 20px 30px 30px 30px;
   margin-bottom: 30px;
}

@media screen and (min-width: 1024px) {
   #pricing .pricing--content .item {
      max-width: 1600px;
      text-align: center;
      margin: 0 auto;
   }
}

#pricing .pricing--content .item .price {
   text-align: center;
   font-size: 1.5rem;
   color: #0077b6;
   font-weight: 700;
}

#pricing .pricing--content .item img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 0 auto;
   border: 1px solid #ccc; /* Optional: Adds a border for visual clarity */
   background-color: #fff;
   padding: 10px;   
}

#pricing .pricing--content .item .description {
   text-align: center;
   font-style: normal;
   min-height: 60px;
   display: block;
   margin: 20px 0 10px 0;
}

#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-detail, #contact address {
   max-width: 800px;
   font-size: 2rem;
   display: block;
   margin: 0 auto;
}

.text a, .type a {
   color: #0077b6;
   text-decoration: none;
   font-style: normal;
   line-height: 2;
   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: #0077b6;
   text-decoration: none;
}

.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;
}

.site-footer {
   background-color: #000;
   padding: 50px 15px 30px;
}

.site-footer .site-footer--content {
   max-width: 1600px;
   display: block;
   margin: 0 auto;
   color: #FFF;
   border-bottom: 1px solid #000000;
}

.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: #E0E0E0;
}

.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;

   }
}

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

   }
}

.site-footer .site-footer--content a {
   color: #E0E0E0;
   text-decoration: none;
}

.site-footer .copyright-notice {
   padding-top: 20px;
   text-align: left;
   color: #9A9A9A;
   border-top: 0px solid #FFF;
}


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

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

button {
   cursor: pointer;
}

.spacer {
   margin: 0 2px;
}