/* ============================================================
INDUSTRY GALLERY STYLES
============================================================ */

/* Floating WhatsApp Button (initially hidden, slides in on hover) */
.whats-app-button {
position: absolute;
right: -100px;
top: 10%;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
background: var(--navy-blue);
color: var(--theme-color-white);
z-index: 999;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
cursor: pointer;
transition: all 0.4s ease !important;
opacity: 0;
visibility: hidden;
}

/* Paragraph width inside CTA placeholder */
#paragraph-cta-section-placeholder p {
max-width: 60%;
}

/* General section container */
.left-right-section {
min-width: 70%;
margin-left: auto;
margin-right: auto;
max-width: 80%;
}

/* Text layout below section headers */
.left-right-section-bottom {
margin-top: 20px !important;
max-width: fit-content;
text-align: left;
margin-right: auto;
}

.left-right-section-bottom p {
max-width: 60% !important;
}

/* Removes top margin from CTA buttons */
.cta-section a {
margin-top: 0 !important;
}

/* Main inner wrapper for heading + CTA alignment */
.left-right-section-inner {
display: flex;
justify-content: space-between;
}

/* Left-aligned heading */
.left-right-section-inner h2 {
width: 70% !important;
text-align: left !important;
padding-right: 100px;
}

/* Right-aligned CTA area */
.left-right-section-inner .cta-section {
width: 50% !important;
display: flex;
justify-content: end;
align-items: center;
}

/* WhatsApp button slide-in animation on hover */
.project-image-4:hover .whats-app-button {
right: 0;
opacity: 1;
visibility: visible;
}

/* WhatsApp hover styles */
.whats-app-button:hover {
background: var(--theme-color-white);
color: var(--navy-blue);
}

.whats-app-button:hover i {
color: var(--navy-blue);
}

.whats-app-button i {
font-size: 24px;
color: var(--theme-color-white);
}

/* Hidden elements until tablet breakpoint */
.for-lower-then-tab {
display: none !important;
}

/* ============================================================
GENERAL SPACING + IMAGE STYLES
============================================================ */

.paragraph-section {
margin-top: 120px;
text-align: center;
}

.project-image-4 {
height: min(520px, 70vh);
}

.project-image-4 img {
object-fit: cover;
}

/* ============================================================
RESPONSIVE (TABLET & BELOW)
============================================================ */

@media (max-width: 991.98px) {

/* Reduce spacing on tablet */
.paragraph-section {
margin-top: 80px;
text-align: left;
max-width: 100%;
margin-left: 0 !important;
}

.cta-section {
width: fit-content !important;
margin-top: 40px !important;
}

/* Stack heading + CTA vertically */
.left-right-section-inner {
flex-direction: column;
align-items: left;
}

/* Show tablet-specific elements */
.for-lower-then-tab {
display: block !important;
}

/* Hide desktop-specific elements */
.for-more-then-tab {
display: none !important;
}

/* Full-width headings on tablet */
.left-right-section-inner h2 {
width: 100% !important;
padding-right: 0;
}
}

/* ============================================================
SECTION HEADINGS (SERVICE DETAIL)
============================================================ */

#service-detail-overview-placeholder h3,
.our-serivices-section h3,
#service-detail-faqs-placeholder h3 {
font-size: var(--main-heading) !important;
color: var(--navy-blue) !important;
}

/* Lower title inside industry images */
.project-image-4 .title2 {
font-size: 16px;
font-weight: 500;
color: #fff;
text-align: left !important;
}

/* Hidden content that slides up on hover */
.industries-image-content {
position: absolute;
left: 30px;
right: 50px;
bottom: -50px;
display: flex;
flex-direction: column;
gap: 10px !important;
transition: all 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
}

/* Slide-up animation on hover */
.project-image-4:hover .industries-image-content {
bottom: 30px;
opacity: 1;
visibility: visible;
}

/* ============================================================
RESPONSIVE (1024px)
============================================================ */

@media (max-width: 1024px) {
.left-right-section-bottom p {
max-width: 90% !important;
}
}

/* ============================================================
RESPONSIVE (1250px - Make elements always visible)
============================================================ */

@media (max-width: 1250px) {

/* Adjust paragraph width for smaller screens */
#paragraph-cta-section-placeholder p {
min-width: 100% !important;
}

/* Show inner content permanently (no hover needed) */
.project-image-4 .industries-image-content {
background: linear-gradient(
to top,
#EFA500 0%,
rgba(239, 165, 0, 1) 8%,
rgba(242, 175, 30, 0.95) 18%,
rgba(245, 185, 40, 0.88) 28%,
rgba(248, 195, 50, 0.78) 38%,
rgba(250, 205, 70, 0.68) 48%,
rgba(252, 210, 80, 0.55) 58%,
rgba(253, 215, 87, 0.42) 68%,
rgba(254, 219, 93, 0.28) 78%,
rgba(254, 219, 93, 0.15) 88%,
rgba(254, 219, 93, 0.05) 96%,
rgba(254, 219, 93, 0) 100%
);
width: 100%;
left: 0;
bottom: 0 !important;
padding: 25px 30px;
opacity: 1;
visibility: visible;
}

/* WhatsApp button always visible on tablets */
.project-image-4 .whats-app-button {
right: 0;
opacity: 1;
visibility: visible;
}
}