/*
Theme Name: Tattoo4businessgroup
Theme URI: https://wordpress.org/themes/ttoobg/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ttoobg
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
         :root {
         --primary-gold: #f3e392;
         --dark-bg: #000000;
         }
         body, html {
         margin: 0; padding: 0;
         background-color: var(--dark-bg);
         font-family: 'Arial', sans-serif;
         overflow-x: hidden;
         }
         button{
         font-size: 13px !important;
         line-height: 15px !important;
         font-weight: 600 !important;
         font-family: 'Barlow', sans-serif !important;
         }
         h1, h2, h3, h4, h5, h6,button,nav a {
         font-family: 'Anton', sans-serif;
         }
         nav a{
            font-weight: 300 !important;
         }
         p,span,a,li {
         font-family: 'Barlow', sans-serif;
         }
         .btn-close{display: none;}
         /* NAVIGATION OVERRIDES */
         .navbar { z-index: 100; padding: 20px 0; }
         .navbar-brand { font-size: 1.8rem; letter-spacing: 2px; display: flex; align-items: center; }
         .navbar-brand img { height: 30px; margin-right: 10px; }
         .nav-link { 
         color: #fff !important; 
         font-size: 14px; 
         font-weight: 600; 
         margin: 0 10px;
         position: relative;
         }
         
         .btn-book-nav {
         background-color: var(--primary-gold);
         border-radius: 50px;
         padding: 10px 30px;
         font-weight: bold;
         color: #000;
         text-decoration: none;
         transition: 0.3s;
         }
         /* SLIDER ENGINE */
         .slider-container {
         position: relative;
         width: 100%;
         height: 100vh;
         background: #000;
         }
         .hero-slider {
         position: absolute;
         top: 0; left: 0;
         width: 100%; height: 100%;
         display: none; /* Hidden by default */
         }
         .hero-slider.active { display: block; }
         .slice-wrapper {
         position: absolute;
         width: 100%; height: 100%;
         display: flex;
         z-index: 1;
         }
         /* Individual Slice Styling */
         .slice {
         height: 100%;
         flex: 1;
         background-repeat: no-repeat;
         /* Force background to be screen size regardless of slice width */
         background-size: cover; 
         /* Alternatively, use 100vw 100vh for stricter alignment */
         background-size: 100vw 200vh; 
         background-position: center;
         transform: translateY(-100%);
         transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
         }
         .hero-slider.animating .slice {
         transform: translateY(0);
         }
         /* CONTENT STYLING */
         .hero-content {
         position: relative;
         z-index: 10;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         color: white;
         opacity: 0;
         transform: translateY(30px);
         transition: all 0.8s ease 0.8s;
         }
         .hero-slider.animating .hero-content {
         opacity: 1;
         transform: translateY(0);
         }
         .hero-title {
         font-size: 70px;
         font-weight: 400;
         line-height: 75px;
         margin: 20px 0;
         }
         .welcome-text { color: var(--primary-gold); font-weight: 600; letter-spacing: 1px; }
         .hero-desc { max-width: 500px; color: rgba(255,255,255,0.8); margin-bottom: 30px; }
         .btn-main {
          margin-top: 30px;
         background-color: var(--primary-gold);
         color: #000;
         border: none;
         padding: 18px 45px;
         font-weight: 400;
         letter-spacing:2px;
         border-radius: 50px;
         width: fit-content;
         text-transform: uppercase;
         font-family: 'anton', sans-serif;
         }
         .btn-main:hover {
         background-color: #fff !important;
         color: #000 !important;
         }
         .services-section {
         padding: 80px 0;
         }
         .service-card {
         margin-bottom: 30px;
         transition: transform 0.3s ease;
         }
         .service-card:hover {
         transform: translateY(-5px);
         }
         .service-image-wrapper {
         width: 100%;
         aspect-ratio: 1 / 1; /* Keeps images perfectly square */
         overflow: hidden;
         margin-bottom: 20px;
         }
         /* 1. Ensure the wrapper clips the expanding image */
         .service-image-wrapper {
         width: 100%;
         aspect-ratio: 1 / 1; 
         overflow: hidden; /* This is vital: it hides the parts of the image that scale out */
         margin-bottom: 20px;
         background-color: #1a1a1a; /* Placeholder color while image loads */
         }
         /* 2. Set the base state of the image */
         .service-image-wrapper img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         /* Smooth transition for the transform property */
         transition: transform 0.5s ease-in-out; 
         }
         /* 3. The Hover State */
         /* When the user hovers over the CARD, the IMAGE inside zooms in */
         .service-card:hover .service-image-wrapper img {
         transform: scale(1.15); /* Zooms the image by 15% */
         }
         .service-title {
         font-size: 25px !important;
         font-weight: 400;
         margin-bottom: 12px;
         text-transform: capitalize;
         color: #fff;
         }
         .service-desc {
         font-size: 0.95rem;
         color: var(--text-muted);
         line-height: 1.6;
         display: -webkit-box;
         -webkit-line-clamp: 2; /* Truncates text to match your screenshot */
         -webkit-box-orient: vertical;
         overflow: hidden;
         color: #fff;
         }
         /* Gallery Grid Layout */
         .portfolio-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         grid-auto-rows: 250px;
         gap: 15px;
         }
         /* Image Span Logic to match your screenshot layout */
         .item-tall { grid-row: span 2; }
         .item-wide { grid-column: span 1; }
         /* Portfolio Item Container */
         .portfolio-item {
         position: relative;
         overflow: hidden;
         background: #111;
         }
         .portfolio-item img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.6s ease;
         }
         /* The Black Hover Section */
         .hover-overlay {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 40%; /* Adjust based on how much black area you want */
         background-color: rgba(0, 0, 0, 0.9);
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 20px;
         /* Animation: Starts hidden below the item */
         transform: translateY(100%);
         transition: transform 0.4s ease-out;
         }
         .hover-overlay h4 {
         color: #fff;
         margin: 0;
         font-weight: 800;
         font-size: 1.5rem;
         text-transform: capitalize;
         }
         .hover-overlay p {
         color: var(--bs-warning);
         margin: 5px 0 0;
         font-size: 0.85rem;
         text-transform: uppercase;
         letter-spacing: 1px;
         }
         /* Hover Actions */
         .portfolio-item:hover img {
         transform: scale(1.1);
         }
         .portfolio-item:hover .hover-overlay {
         transform: translateY(0);
         }
/* DESKTOP: black links when scrolled */
@media (min-width: 992px) {
  .navbar.navbar-scrolled .nav-link {
    color: #000 !important;
  }
}

/* MOBILE: keep links white when scrolled */
@media (max-width: 991.98px) {
  .navbar.navbar-scrolled .nav-link {
    color: #fff !important;
  }
}
         /* Responsive adjustments */
         @media (max-width: 992px) {
         .btn-close{display: block;}
          .btn-book-nav{
               display: none;
            }
            .hero-title{
                font-size: 30px;
                line-height: 30px;
            }
         .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
         }
         
        
         @media (max-width: 576px) {
         .portfolio-grid { grid-template-columns: 1fr; }
         }
         .process-section {
         padding: 100px 0;
         }
         .sub-title {
         color: var(--primary-gold);
         font-size: 14px;
         font-weight: 600;
         margin-bottom: 10px;
         }
         .main-title {
         font-size: 58px;
         font-weight: 400;
         margin-bottom: 25px;
         color: #fff;
         }
         .description {
         color: #ffffff;
         max-width: 500px;
         line-height: 1.6;
         margin-bottom: 30px;
         }
         .check-list {
         list-style: none;
         padding: 0;
         color: #fff;
         }
         .check-list li {
         margin-bottom: 15px;
         display: flex;
         align-items: center;
         }
         .check-list li i {
         color: var(--primary-gold);
         margin-right: 15px;
         font-size: 12px;
         }
         /* ACCORDION STYLING */
         .process-accordion {
         border-top: 1px solid #333;
         }
         .accordion-item {
         background: transparent;
         border: none;
         color: #fff;
         border-bottom: 1px solid #333;
         }
         .accordion-header-custom {
         padding: 30px 0;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: space-between;
         transition: 0.3s;
         }
         .header-content {
         display: flex;
         align-items: center;
         }
         .dot-icon {
         width: 20px;
         height: 20px;
         border: 2px solid var(--primary-gold);
         border-radius: 50%;
         margin-right: 20px;
         position: relative;
         }
         .accordion-item.active .dot-icon::after {
         content: "";
         position: absolute;
         top: 50%; left: 50%;
         transform: translate(-50%, -50%);
         width: 4px; height: 4px;
         background: var(--primary-gold);
         border-radius: 50%;
         }
         .accordion-title {
         font-size: 28px;
         font-weight: 400;
         margin: 0;
         }
         .status-icon {
         color: var(--primary-gold);
         font-size: 1.2rem;
         }
         .accordion-body-custom {
         display: none;
         padding-bottom: 30px;
         padding-left: 32px;
         color: #ffffff;
         line-height: 1.6;
         max-width: 500px;
         }
         /* Counter Section Styling */
         .counter-section {
         padding: 50px 0;
         background-color: #111111;
         color: #ffffff;
         text-align: center;
         }
         .counter-box {
         padding: 20px;
         }
         .counter-number {
         font-size: 58px; /* Matches the bold, large impact in screenshot */
         font-weight: 800;
         line-height: 1;
         margin-bottom: 10px;
         display: block;
         }
         .counter-label {
         font-size: 14px;
         font-weight: 700;
         font-family: 'Barlow', sans-serif;
         text-transform: capitalize;
         letter-spacing: 1px;
         color: #ffffff;
         }
         /* Responsive adjustments */
         @media (max-width: 768px) {
         .counter-number {
         font-size: 3.5rem;
         }
         }
         .services-alternating {
         padding: 100px 0;
         }
         /* Container for each service row */
         .service-row {
         display: flex;
         align-items: center;
         }
         .service-row:last-child {
         margin-bottom: 0;
         }
         /* Image Styling */
         .service-image-container img {
         width: 100%;
         height: auto;
         display: block;
         object-fit: cover;
         }
         /* Text Content Styling */
         .service-text-content {
         padding: 0 10%;
         }
         .service-title {
         font-size: 3.5rem;
         font-weight: 400;
         margin-bottom: 20px;
         line-height: 1.1;
         }
         .service-description {
         color: #ffffff;
         font-size: 1rem;
         line-height: 1.6;
         margin-bottom: 30px;
         font-weight: 600;
         }
         /* Button Styling to match screenshots */
         .btn-read-more {
         background-color: var(--primary-gold);
         color: #000000;
         border: none;
         padding: 12px 35px;
         font-weight: 800;
         font-size: 14px;
         text-transform: uppercase;
         letter-spacing: 1px;
         border-radius: 50px;
         text-decoration: none;
         display: inline-block;
         transition: 0.3s;
         }
         .btn-read-more:hover {
         background-color: #ffffff;
         color: #000000;
         }
         /* Mobile Adjustments */
         @media (max-width: 768px) {
         .service-title {
         font-size: 2.5rem;
         }
         .service-text-content {
         padding: 40px 15px;
         text-align: center !important;
         }
         .service-row {
         margin-bottom: 40px;
         }
         }
         /* Masonry Grid Logic */
         .masonry-wrapper {
         display: grid;
         grid-template-columns: repeat(3, 1fr); /* 3 column layout on desktop */
         grid-auto-rows: 250px; /* Base height for grid rows */
         gap: 15px; /* Spacing between images */
         }
         .masonry-item {
         position: relative;
         overflow: hidden;
         border-radius: 4px; /* Subtle rounding as seen in images */
         }
         .masonry-item img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: filter 0.3s ease;
         }
         /* Spanning rules to match the provided layout */
         .item-large {
         grid-row: span 2;
         grid-column: span 1;
         }
         .item-wide {
         grid-column: span 2;
         }
         .item-tall {
         grid-row: span 2;
         }
         /* Hover Effect */
         .masonry-item:hover img {
         filter: brightness(70%);
         }
         /* Responsive: 2 columns on tablets */
         @media (max-width: 992px) {
         .masonry-wrapper {
         grid-template-columns: repeat(2, 1fr);
         }
         .item-wide {
         grid-column: span 1;
         }
         }
         /* Responsive: 1 column on mobile */
         @media (max-width: 576px) {
         .masonry-wrapper {
         grid-template-columns: 1fr;
         grid-auto-rows: 300px;
         }
         .item-large, .item-wide, .item-tall {
         grid-row: span 1;
         grid-column: span 1;
         }
         }
         /* Section Styles */
         .bg-black { background-color: #000 !important; }
         .text-gold { color: #f3e392 !important; }
         .sub-title {
         font-size: 14px;
         text-transform: uppercase;
         font-weight: 700;
         letter-spacing: 1px;
         }
         .main-title {
         font-size: 3.5rem;
         font-weight: 400;
         text-transform: capitalize;
         }
         /* Card Styles */
         .artist-card {
         text-align: left; /* Aligned left as per reference */
         }
         .artist-img-wrapper {
         position: relative;
         overflow: hidden;
         aspect-ratio: 1 / 1; /* Ensures square images */
         }
         .artist-img-wrapper img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
         }
         .artist-card:hover img {
         transform: scale(1.05); /* Subtle zoom on hover */
         }
         .artist-name {
         font-size: 1.5rem;
         font-weight: 400;
         margin-bottom: 5px;
         }
         .artist-role {
         font-size: 0.9rem;
         font-weight: 600;
         text-transform: capitalize;
         }
         /* Mobile adjustments */
         @media (max-width: 768px) {
         .main-title { font-size: 2.5rem; }
         }
         /* Blog Card Styles */
         .blog-img-wrapper {
         position: relative;
         overflow: hidden;
         aspect-ratio: 4 / 3; /* Matches the landscape-to-square proportions in image */
         }
         .blog-img-wrapper img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
         }
         .blog-card:hover img {
         transform: scale(1.1);
         }
         .blog-date {
         font-size: 13px;
         font-weight: 700;
         }
         .blog-heading {
         font-size: 1.4rem;
         font-weight: 400;
         line-height: 1.3;
         }
         .blog-excerpt {
         font-size: 0.95rem;
         line-height: 1.6;
         color: #a0a0a0 !important;
         }
         /* Mobile adjustments */
         @media (max-width: 768px) {
         .main-title { font-size: 2.5rem; }
         .blog-heading { font-size: 1.2rem; }
         }
         /* Input field styling */
         .subscribe-form input::placeholder {
         color: #333;
         font-weight: 600;
         text-transform: uppercase;
         font-size: 12px;
         }
         .footer-heading {
         font-size: 1.25rem;
         text-transform: capitalize;
         }
         .quick-links a:hover {
         color: #f3e392 !important;
         transition: 0.3s;
         }
         footer a{
         color:white;
         text-decoration: none;
         }
    .single-banner{
        padding-top: 200px;
        padding-bottom: 150px;
    }
    .single-banner h1{
        font-size: 70px;
        font-weight: 400;
        color: #fff;
        text-transform: capitalize;
    }
    .contact-section {
  display: flex;
  min-height: 100vh;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.contact-image {
  flex: 1;
  background-image: url("https://tattoo.signage4businessgroup.com.au/wp-content/uploads/2026/01/contact-img.jpg");
  background-size: cover;
  background-position: center;
}

.contact-form {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 60px;
}

.contact-form form {
  width: 100%;
  max-width: 420px;
}

.contact-form label {
  display: block;
  margin-bottom: 40px;
}

.contact-form span {
  display: block;
  font-size: 15px;
  letter-spacing: 1px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.navbar-nav .nav-link {
  position: relative;
  padding-bottom: 6px;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #f5e58a; /* accent color */
  transition: all 0.35s ease;
  transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px dotted #777;
  color: #fff;
  padding: 8px 0;
  font-size: 15px;
  outline: none;
}

.contact-form textarea {
  resize: none;
}

.contact-form button {
  margin-top: 20px;
  padding: 14px 34px;
  border-radius: 999px;
  border: none;
  background: #f5e58a;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245,229,138,0.4);
}

/* Responsive */
@media (max-width: 900px) {
  .single-banner h1{
      font-size: 40px;
  }
  .accordion-title,.artist-name{
    font-size: 20px;
  }
  .counter-number,.service-title{
    font-size: 25px !important;
  }
  .hover-overlay h4 {
    color: #fff;
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    text-transform: capitalize;
}
  .main-title{
    font-size: 30px;
  }
  .contact-section {
    flex-direction: column;
  }

  .contact-image {
    height: 300px;
  }
}
.css-hero-slider {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Slides */
.css-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  animation: cssSlideShow 18s infinite;
}

/* Background images */
.slide-1 { background-image: url("https://tattoo.signage4businessgroup.com.au/wp-content/uploads/2026/01/tattoo-img-01.jpg"); }
.slide-2 { background-image: url("https://tattoo.signage4businessgroup.com.au/wp-content/uploads/2026/01/tattoo-img-02.jpg"); animation-delay: 6s; }
.slide-3 { background-image: url("https://tattoo.signage4businessgroup.com.au/wp-content/uploads/2026/01/tattoo-img-03.jpg"); animation-delay: 12s; }

/* Content */
.css-slide-content {
  position: absolute;
  left: 10%;
  bottom: 25%;
  color: #fff;
  max-width: 600px;
}

.css-slide-content h1 {
  font-size: 70px;
  font-family: "Anton", sans-serif;
}

.css-slide-content p {
  letter-spacing: 2px;
  margin-bottom: 10px;
}

/* Animation */
@keyframes cssSlideShow {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  5% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  35% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 0;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .css-slide-content h1 {
    font-size: 36px;
  }

  .css-slide-content {
    left: 5%;
    bottom: 20%;
  }
}
/* =========================
   MOBILE SLIDE MENU (RIGHT → LEFT)
   ========================= */
@media (max-width: 991.98px) {

  .navbar-collapse {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #000;
    padding: 70px 20px 20px;
    transition: right 0.35s ease-in-out;
    z-index: 1050;
  }
.btn-close {
    z-index: 1100;
  }
  .navbar-toggler{
        background: #f3e392;
  }
  /* When menu is opened */
  .navbar-collapse.show {
    right: 0;
  }

  /* Stack menu items vertically */
  .navbar-nav {
    flex-direction: column;
    gap: 15px;
  }

  .nav-link {
    font-size: 18px;
    color: #fff;
  }

  /* Center logo on mobile */
  .navbar-brand {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
  }

  /* Hide right button on mobile (optional) */
  .btn-book-nav {
    display: none;
  }
}
/* Default navbar (top, transparent) */
.navbar {
  transition: all 0.3s ease;
}

/* When scrolled */
.navbar.navbar-scrolled {
  position: fixed !important;
  top: 0;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  z-index: 999;
}
/* Default logo (white) */
.navbar-brand img {
  max-height: 55px;
  transition: filter 0.3s ease;
}

/* When navbar is scrolled (white background) */
.navbar-scrolled .navbar-brand img {
  filter: brightness(0) invert(0);
}

/* Change link colors on white background */

.navbar.navbar-scrolled .navbar-toggler i {
  color: #000 !important;
}

/* Optional: adjust logo size on scroll */
.navbar.navbar-scrolled .navbar-brand img {
  max-height: 45px;
}