/* =============================================
   Site-Wide Improvements — Star Events
   Covers: stats, CTA sections, story panels,
   improved about page, consistent typography
   ============================================= */

/* Ensure footer uses the brand gradient on every page,
   regardless of stylesheet load order (index.html loads
   style.css before general.css, which would otherwise let
   .dark-bg's solid #151515 override the gradient). */
footer.footer.dark-bg,
footer.footer {
    background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%) !important;
}

/* Header logo: render larger without changing header height.
   The header is 90px tall, the menu-logo container is 80px.
   The default logo image was capped to 40px which made it
   visually small AND triggered an aggressive 73x downscale
   from the source PNG, causing softness. 70px both sharpens
   the render and gives the brand more presence. */
/* Header: slightly taller than the original 90px so the logo can
   be visibly bigger without overflowing. */
#header,
#header.modern-header {
    height: 110px !important;
}

/* The mega-menu library adds 10px top/bottom padding to the logo's
   anchor — strip it so the logo's height is only the image itself. */
#header .mega-menu .menu-logo > li > a,
#header.modern-header .mega-menu .menu-logo > li > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Header logo: bigger at 65px desktop / 65px mobile so the brand has
   real presence. The source PNG is 360x248 so the logo still renders
   crisply at these sizes (no blur). */
#header #logo_img,
#header .mega-menu .menu-logo img,
#header.modern-header .mega-menu .menu-logo img,
#header .mega-menu .menu-logo > li > a img {
    height: 65px !important;
    max-height: 65px !important;
    width: auto !important;
}

@media (max-width: 991px) {
    #header,
    #header.modern-header {
        height: 100px !important;
    }
    #header #logo_img,
    #header .mega-menu .menu-logo img {
        height: 65px !important;
        max-height: 65px !important;
        width: auto !important;
    }
}

/* Same load-order issue: ensure the styled circular social
   icons (white-on-translucent, 45px) win over general.css's
   plain 32px transparent variant on every page. */
footer.footer .social-icons li a,
.footer .social-icons li a {
    width: 45px !important;
    height: 45px !important;
    line-height: 45px !important;
    font-size: 16px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    transition: 0.3s;
}
footer.footer .social-icons.color-hover .social-facebook a:hover,
.footer .social-icons.color-hover .social-facebook a:hover {
    background: #1877f2 !important;
}
footer.footer .social-icons.color-hover .social-youtube a:hover,
.footer .social-icons.color-hover .social-youtube a:hover {
    background: #ff0000 !important;
}
footer.footer .social-icons.color-hover .social-instagram a:hover,
.footer .social-icons.color-hover .social-instagram a:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

/* ------------------------------------------
   STAT COUNTERS (used on index + about pages)
   ------------------------------------------ */
.stats-section {
    background: #04b1ad;
    padding: 50px 0;
}

.stats-section .stat-item {
    text-align: center;
    padding: 20px 10px;
}

.stats-section .stat-number {
    font-size: 52px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    display: block;
    font-family: 'Roboto', sans-serif;
}

.stats-section .stat-suffix {
    font-size: 36px;
    font-weight: 900;
    color: rgba(255,255,255,0.85);
}

.stats-section .stat-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 8px;
    display: block;
}

.stats-section .stat-divider {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.4);
    margin: 10px auto;
}

/* ------------------------------------------
   EVENT STORY SECTION
   ------------------------------------------ */
.event-story-section {
    background: #f8f9fa;
    padding: 50px 0;
    border-top: 3px solid #04b1ad;
}

.event-story-section .story-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px 25px;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-top: 4px solid #04b1ad;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-story-section .story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.event-story-section .story-card .story-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #04b1ad, #02a5a1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.event-story-section .story-card .story-icon i {
    color: #fff;
    font-size: 20px;
}

.event-story-section .story-card h5 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #04b1ad;
    margin-bottom: 10px;
}

.event-story-section .story-card p {
    color: #555;
    line-height: 1.7;
    font-size: 15px;
    margin: 0;
}

/* ------------------------------------------
   CTA SECTION (bottom of project pages)
   ------------------------------------------ */
.project-cta-section {
    background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
    padding: 60px 0;
    text-align: center;
}

.project-cta-section h3 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}

.project-cta-section p {
    color: rgba(255,255,255,0.75);
    font-size: 16px;
    margin-bottom: 30px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.project-cta-section .cta-btn-primary {
    display: inline-block;
    background: #04b1ad;
    color: #fff;
    padding: 14px 40px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    margin: 0 8px 10px;
    transition: background 0.3s ease, transform 0.2s ease;
}

.project-cta-section .cta-btn-primary:hover {
    background: #02a5a1;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.project-cta-section .cta-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #fff;
    padding: 12px 38px;
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.5);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    margin: 0 8px 10px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.project-cta-section .cta-btn-secondary:hover {
    border-color: #04b1ad;
    background: rgba(4,177,173,0.15);
    color: #fff;
    text-decoration: none;
}

/* ------------------------------------------
   ABOUT PAGE IMPROVEMENTS
   ------------------------------------------ */

/* Company timeline */
.timeline-section {
    padding: 50px 0;
    background: #fff;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
    position: relative;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-year {
    min-width: 90px;
    font-size: 22px;
    font-weight: 900;
    color: #04b1ad;
    font-family: 'Roboto', sans-serif;
    line-height: 1;
    padding-top: 3px;
}

.timeline-dot {
    width: 14px;
    height: 14px;
    background: #04b1ad;
    border-radius: 50%;
    margin: 5px 20px 0;
    flex-shrink: 0;
    position: relative;
}

.timeline-dot::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 21px);
    background: rgba(4,177,173,0.2);
}

.timeline-item:last-child .timeline-dot::after {
    display: none;
}

.timeline-content h5 {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.timeline-content p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Values grid on about page */
.values-section {
    background: #f8f9fa;
    padding: 50px 0;
}

.value-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    height: 100%;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
    margin-bottom: 30px;
}

.value-card:hover {
    transform: translateY(-5px);
}

.value-card .value-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #04b1ad, #02a5a1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.value-card .value-icon i {
    color: #fff;
    font-size: 24px;
}

.value-card h5 {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.value-card p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ------------------------------------------
   HOMEPAGE IMPROVEMENTS
   ------------------------------------------ */

/* Process steps on homepage */
.process-section {
    padding: 60px 0;
    background: #fff;
}

.process-step {
    text-align: center;
    padding: 20px 15px;
    position: relative;
}

.process-step .step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #04b1ad, #02a5a1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

.process-step h5 {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.process-step p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Arrow connector between steps */
.process-step::after {
    content: '\f054';
    font-family: 'FontAwesome';
    position: absolute;
    right: -10px;
    top: 30px;
    color: rgba(4,177,173,0.4);
    font-size: 18px;
}

.process-step:last-child::after {
    display: none;
}

/* ------------------------------------------
   FOOTER IMPROVEMENTS
   ------------------------------------------ */

/* Replace broken newsletter with social CTA */
.footer-social-cta p {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.footer-contact-btn {
    display: inline-block;
    background: #04b1ad;
    color: #fff;
    padding: 10px 25px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.footer-contact-btn:hover {
    background: #02a5a1;
    color: #fff;
    text-decoration: none;
}

/* ------------------------------------------
   GLOBAL CONSISTENCY FIXES
   ------------------------------------------ */

/* Consistent section heading sizes */
.section-title h2.title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
}

.section-title h4.title {
    font-size: 18px;
    font-weight: 700;
}

/* Gallery caption on hover */
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(4,177,173,0.9);
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

/* Smooth transitions on interactive elements */
a, button {
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* ------------------------------------------
   CATEGORY PAGE CTA BUTTON FIX
   Force white text visible on teal/dark gradient bg
   ------------------------------------------ */
.page-section-ptb a.button.animated.border.transparent.middle-fill,
.page-section-ptb a.button.animated.border.transparent.middle-fill span {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.page-section-ptb a.button.animated.border.transparent.middle-fill:hover {
    color: #2c3e50 !important;
    background: #ffffff !important;
}

/* ------------------------------------------
   CONTACT FORM ENHANCEMENTS
   ------------------------------------------ */
.submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #2c3e50;
    color: #fff;
    border: none;
    padding: 14px 35px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    margin-top: 10px;
}

.submit-btn:hover {
    background: #04b1ad;
    transform: translateY(-2px);
}

/* ------------------------------------------
   TESTIMONIALS SECTION
   ------------------------------------------ */
.testimonials-section {
    background: #f8f9fa;
    padding: 60px 0;
}

.testimonial-card {
    background: #fff;
    border-radius: 12px;
    padding: 35px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-left: 4px solid #04b1ad;
    height: 100%;
    position: relative;
}

.testimonial-card .quote-icon {
    font-size: 60px;
    line-height: 1;
    color: #04b1ad;
    opacity: 0.15;
    position: absolute;
    top: 15px;
    right: 20px;
    font-family: Georgia, serif;
    font-weight: 900;
}

.testimonial-card p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-card .testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

.testimonial-card .author-avatar {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #04b1ad, #2c3e50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.testimonial-card .author-info strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
}

.testimonial-card .author-info span {
    font-size: 13px;
    color: #04b1ad;
}

/* ── Category Page: uniform card image height ── */
.project-info {
    position: relative;
    overflow: hidden;
}

.project-info img {
    width: 100% !important;
    height: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
    display: block !important;
}