/*
Theme Name:     CA Mechanical
Template:       blocksy
Version:        1.0.0
Author: VinCero Solutions
Author URI: https://www.vincero.solutions
*/

/* Global */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.wave-overlay {
    width: 100%;
    height: 360px;
    overflow: hidden;
    position: relative;
    margin-top: -1px; /* prevents gap */
}

.wave-overlay svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Overwrites */
.page .entry-content > .alignfull {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
}

/* ACF Blocks */

/* Parallax Hero */
.alignfull.acf-parallax-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    left: 0;
    right: 0;
}

.acf-hero-swiper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.acf-parallax-hero {
    position: relative;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.acf-parallax-hero .overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.5;
    z-index: 1;
}

.hero-logo-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
}

.hero-logo {
    max-width: 510px;
    width: 90%;
    height: auto;
}
  
/* Two Column w/ Image */
.two-column-image {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 400px;
}

.tci-left, .tci-right {
    flex: 1 1 50%;
    position: relative;
}

.tci-left {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.tci-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.5;
    z-index: 1;
}

.tci-headline {
    position: relative;
    z-index: 2;
    font-size: 3rem;
    text-align: center;
    padding: 1rem;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);

}

.tci-right {
    padding: 2rem;
    display: flex;
    align-items: center;
}

.tci-content {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .two-column-image {
        flex-direction: column;
    }

    .tci-left, .tci-right {
        flex: 1 1 100%;
    }

    .tci-headline {
        font-size: 2rem;
    }

    .tci-right {
        padding: 1rem;
    }
}

/* Our Services */
.our-services-section .os-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.our-services-section .os-left {
    flex: 1 1 40%;
    background-size: cover;
    background-position: center;
    min-height: 500px;
}

.our-services-section .os-right {
    flex: 1 1 60%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.our-services-section .os-title {
    margin-bottom: 1.5em;
    display: table;
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.our-services-section .os-title::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px; /* space below the text */
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 0.5rem;
    background-color: var(--wp--preset--color--palette-color-3);
}

.our-services-section .os-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.our-services-section .os-service {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.our-services-section .os-icon [class^="fa-"] {
    font-size: 2em;
    color: var(--wp--preset--color--palette-color-2);
}

.our-services-section .os-content h3 {
    color: var(--wp--preset--color--palette-color-1);
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

@media screen and (max-width: 1024px) {
    .our-services-section .os-wrapper {
        flex-direction: column;
    }

    .our-services-section .os-left,
    .our-services-section .os-right {
        flex: 1 1 100%;
    }

    .our-services-section .os-services-grid {
        grid-template-columns: 1fr;
    }

    .our-services-section .os-title {
        font-size: 2rem;
    }
}

/* Stats */
.stats-container {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 20px;
    align-items: start;
    color: #fff;
    padding: 80px 40px
}

.stat-item.title {
    padding: 20px;
    text-align: center;
}

.stat-item.title h2 {
    display: inline-block;
    position: relative;
}

.stat-item.title h2::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px; /* space below the text */
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 0.5rem;
    background-color: white;
}

.stat-item h2, .stat-item h3 {
    color: #fff;
}

.stat-item [class^="fa-"] {
    font-size: 2.8em
}

.repeater-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-item.repeater {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.stat-item.repeater ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: table;
}

.stat-item.repeater ul li {
    display: flex;
    align-items: center;
    gap: 0.5em
}

.stat-item.repeater ul li::before {
    content: '•'; 
    font-size: 1.2em;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    .stats-container {
        grid-template-columns: 1fr;
    }

    .repeater-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Industries Served */
.industries-served {
    background-size: cover;
    background-position: center;
    padding: 4rem 0rem;
    text-align: center;
}

.industries-served .container {
    max-width: 1200px;
    margin: 1.5rem auto 0;
}

.industries-image {
    height: 500px; /* Adjust as needed */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.industries-served h2,
.industries-served h3 {
  display: inline-block;
  position: relative;
}

.industries-served h2::after,
.industries-served h3::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px; /* space below the text */
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 0.5rem;
    background-color: var(--wp--preset--color--palette-color-3);
}

.industry-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.industry-box {
    background: var(--wp--preset--color--palette-color-5);;
    color: #333;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 1.5rem;
    width: 200px;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.industry-box i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.industry-box p {
    margin: 0;
}

.logo-marquee {
    overflow: hidden;
    width: 100%;
    margin-top: 2rem;
}

.logo-track {
    display: flex;
    width: max-content;
    min-width: 100%;
    animation: scroll-marquee 20s linear infinite;
    gap: 2rem;
}

.logo-item {
    flex: 0 0 auto;
}

.logo-item img {
    max-height: 60px;
    width: auto;
    display: block;
}

@keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .industry-boxes {
        flex-direction: column;
        align-items: center;
    }
}

/* Contact Us */
.contact-us-block {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 0;
    margin-block-end: 0!important;
}

.contact-us-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 2rem;
}

.contact-us-left,
.contact-us-right {
    flex: 1 1 500px;
}

.contact-map iframe {
    width: 100%;
    height: 300px;
    border: 0;
}

.contact-details {
    margin-top: 1.5rem;
    font-size: 1rem;
    color: #333;
}

.contact-details p {
    margin-bottom: 1rem;
}

.contact-details a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .contact-us-container {
        flex-direction: column;
    }
    .contact-us-block.alignfull {
        width: var(--theme-block-width)!important;
        max-width: var(--wp--style--global--content-size)!important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .contact-us-block .wave-overlay {
        display:none;
    }
}

/* Container & layout */
.forminator-field {
    position: relative;
    margin-bottom: 1rem;
  }
  
  /* Input and textarea base styling */
.forminator-input,
.forminator-textarea {
  /* border: 2px solid #a0a0a0 !important; */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-radius: 4px;
  padding: 20px 12px 6px;
  width: 100%;
  font-size: 16px;
  transition: all 0.2s ease;
  /* box-shadow: none; */
  outline: none;
  border-radius: 8px;
}

/* Force consistent focus style for both inputs and textareas */
.forminator-input:focus,
.forminator-textarea:focus {
  border:none;
  border-bottom: 2px solid var(--wp--preset--color--palette-color-2) !important;
  outline: none !important;
  box-shadow: none !important;
}

  
  /* Label as floating overlay */
  .forminator-label {
    position: absolute;
    top: 7px;
    left: 12px;
    font-size: 16px;
    color: #777;
    transition: all 0.2s ease;
    background: transparent;
    z-index: 2;
    pointer-events: none;
  }
  .forminator-field-textarea .forminator-label {
    top: 15px;
  }
  
/* Base floating label behavior */
.forminator-field.focused .forminator-label,
.forminator-field.filled .forminator-label {
  top: -20px;
  left: 0;
  font-size: 12px;
  color: var(--wp--preset--color--palette-color-2);
}


  
  /* Error message */
  .forminator-error-message {
    color: var(--wp--preset--color--palette-color-4);
    font-size: 12px;
    margin-top: 4px;
  }
  
  /* Submit button */
  .forminator-button-submit {
    background-color: #6200ee;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .forminator-button-submit:hover {
    background-color: #3700b3;
  }
/* Reduce spacing between Forminator fields */
.forminator-row {
    margin-bottom: 12px !important; /* Adjust as needed */
  }
  
  
  /* Tweak label and input padding */
  .forminator-label {
    margin-bottom: 4px;
  }
  
  /* If you're using columns/rows (e.g. grid with map on left, form on right) */
  .your-form-container-class {
    display: flex;
    align-items: flex-start; /* aligns top */
    gap: 40px; /* optional spacing between map and form */
  }
  
  /* Optional: tighten up error message spacing
  .forminator-error-message {
    margin-top: 4px;
    margin-bottom: 8px;
  }   */

  /* Error message box styling */
.forminator-error-message {
    background-color: #fdecea; /* softer red background */
    color: var(--wp--preset--color--palette-color-24);             /* Material red for text */
    border-left: 4px solid var(--wp--preset--color--palette-color-4);
    padding: 8px 12px;
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(211, 47, 47, 0.1);
  }
  
  /* Optional: input red underline on error */
  .forminator-has_error .forminator-input,
  .forminator-has_error .forminator-textarea {
    border-bottom: 2px solid #d32f2f !important;
  }