/*--------------------------------------------------------------
  Magic Rendering Custom Styles - Blue & Green Theme
---------------------------------------------------------------*/

/* Primary Blue: #2E86AB (Professional blue)
   Secondary Green: #06A77D (Fresh green)
   Accent Blue: #1A5F7A (Dark blue)
   Light Green: #A8DADC (Soft accent)
*/

/* Override primary theme color to blue */
.theme-btn,
.banner-btn,
.btn-primary,
.elementor-button,
.slider_new .elementor-slide-button {
    background: #2E86AB !important;
    border-color: #2E86AB !important;
}

.theme-btn:hover,
.banner-btn:hover,
.btn-primary:hover {
    background: #1A5F7A !important;
    border-color: #1A5F7A !important;
}

/* Secondary green accents */
.get_guote .elementor-button,
.call a,
a:hover,
.elementor-heading-title:hover {
    color: #06A77D !important;
}

/* Links and interactive elements */
a {
    color: #2E86AB;
}

a:hover {
    color: #06A77D;
}

/* Blog and content cards */
.blog-list-item:hover,
.service-item:hover {
    border-color: #2E86AB !important;
}

/* Icons and bullets */
.icon-box i,
.feature-icon,
ul.footer_list li:before {
    color: #06A77D !important;
}

/* Buttons and CTAs */
.btn-border-primary {
    border-color: #2E86AB !important;
    color: #2E86AB !important;
}

.btn-border-primary:hover {
    background: #2E86AB !important;
    color: #fff !important;
}

/* Navigation active states */
.menu-item.active a,
.menu-item:hover a {
    color: #06A77D !important;
}

/* Pagination */
.pagination a:hover,
.pagination a.active {
    background: #2E86AB !important;
    border-color: #2E86AB !important;
    color: #fff !important;
}

/* Form elements focus */
input:focus,
textarea:focus,
select:focus {
    border-color: #2E86AB !important;
    box-shadow: 0 0 0 0.2rem rgba(46, 134, 171, 0.25) !important;
}

/* Section headings and titles */
.section-title:after,
.heading-border:after {
    background: #06A77D !important;
}

/* Background colors */
.bg-primary {
    background-color: #2E86AB !important;
}

.bg-secondary {
    background-color: #06A77D !important;
}

/* Border colors */
.border-primary {
    border-color: #2E86AB !important;
}

.border-secondary {
    border-color: #06A77D !important;
}

/* Text colors */
.text-primary {
    color: #2E86AB !important;
}

.text-secondary {
    color: #06A77D !important;
}

/* Counter and stats */
.counter-box,
.stats-item {
    border-left: 3px solid #06A77D !important;
}

/* Gallery items */
.gallery-item:hover .gallery-overlay {
    background: rgba(46, 134, 171, 0.9) !important;
}

/* Testimonial cards */
.testimonial-card {
    border-top: 3px solid #06A77D !important;
}

/* Footer */
.footer {
    background: #1A5F7A !important;
}

/* Social media icons */
.social-icon:hover {
    background: #06A77D !important;
    color: #fff !important;
}

/* Slider overlay */
.slider-overlay {
    background: linear-gradient(135deg, rgba(46, 134, 171, 0.8) 0%, rgba(6, 167, 125, 0.8) 100%) !important;
}

/* Service boxes */
.service-box:hover {
    box-shadow: 0 10px 30px rgba(46, 134, 171, 0.3) !important;
}

/* Blog date badge */
.blog-date {
    background: #06A77D !important;
}

/* Responsive mobile menu */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        color: #2E86AB !important;
    }
}

/* ===== PAGE CONTENT WIDTH - MATCH HEADER ===== */
.service-page-wrapper .container,
.page-content-wrapper .container,
.about-page-wrapper .container,
.testimonials-page-wrapper .container,
.contact-page-wrapper .container {
    max-width: 1200px !important;
    width: 100% !important;
}

.service-intro,
.service-section,
.service-cta,
.faq-section,
.about-intro-section,
.why-choose-section,
.services-overview,
.commitment-section,
.contact-cta {
    max-width: 100% !important;
}

/* Adjust inner content max-width */
.service-section,
.faq-item,
.commitment-item {
    max-width: 100% !important;
}

.page-header,
.service-page-header,
.about-header,
.testimonials-header,
.contact-header {
    max-width: 100% !important;
}
/* Remove blue footer backgrounds */
.bg__cat--1,
.bg__cat--2,
.bg__cat--3 {
    background: transparent !important;
}

.footer__top {
    background: #2c3e50 !important;
}

.htc__contact__address {
    background: transparent !important;
}

.footer .foo,
.footer.foo {
    background: transparent !important;
}

.footer__widget {
    background: transparent !important;
}

/* Copyright section background */
.copyright {
    background: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.bg__theme {
    background: transparent !important;
}

/* ===== FOOTER INSTAGRAM GRID ===== */
.footer__instagram {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 240px !important;
}

.footer__instagram li {
    margin: 0 !important;
    padding: 0 !important;
    width: 70px !important;
    height: 70px !important;
}

.footer__instagram li a {
    display: block;
    width: 70px !important;
    height: 70px !important;
    overflow: hidden;
    border-radius: 4px;
}

.footer__instagram li a img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer__instagram li a:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Lightbox cursor */
.footer-lightbox {
    cursor: zoom-in;
}

/* ===== CONTACT ADDRESS BAR FIX ===== */
.htc__contact__wrap {
    display: flex !important;
    justify-content: space-around !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}

.htc__contact__address .ht__address__inner {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    padding: 0 15px !important;
}

.htc__contact__address .ht__address__details {
    flex: 1 !important;
}

.htc__contact__address .ht__address__details p {
    margin: 0 0 5px 0 !important;
    white-space: nowrap !important;
}

.htc__contact__address .ht__address__details p a {
    white-space: nowrap !important;
}

@media (max-width: 991px) {
    .htc__contact__wrap {
        flex-wrap: wrap !important;
    }

    .htc__contact__address .ht__address__inner {
        flex: 0 0 50% !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 576px) {
    .htc__contact__address .ht__address__inner {
        flex: 0 0 100% !important;
    }
}

/* ===== CONTACT PAGE ADDRESS CONTAINER ===== */
.htc__address__container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 30px !important;
}

.htc__address__container .ct__address {
    display: flex !important;
    align-items: flex-start !important;
    flex: 1 !important;
}

.htc__address__container .ct__address .ct__details p {
    white-space: nowrap !important;
    margin: 0 !important;
}

.htc__address__container .ct__address .ct__details p a {
    white-space: nowrap !important;
}

@media (max-width: 991px) {
    .htc__address__container {
        flex-wrap: wrap !important;
    }

    .htc__address__container .ct__address {
        flex: 0 0 48% !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 576px) {
    .htc__address__container .ct__address {
        flex: 0 0 100% !important;
    }
}

/* ===== LATEST PROJECTS GRID FIX ===== */
.h1__project {
    display: flex;
    align-items: stretch;
}

.h1__project .col-lg-5 {
    display: flex;
}

.h1__project .project__large {
    height: 100%;
    width: 100%;
}

.h1__project .project__large .project__thumb {
    height: 100%;
    min-height: 580px;
}

.h1__project .project__large .project__thumb a {
    display: block;
    height: 100%;
}

.h1__project .project__large .project__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h1__project .col-lg-7 .row {
    height: 100%;
}

.h1__project .col-lg-6 {
    margin-bottom: 15px;
}

.h1__project .col-lg-6 .project__thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .h1__project .project__large .project__thumb {
        min-height: 300px;
    }
}

/* ===== OUR SERVICES LEFT IMAGE FIX ===== */
.htc__service__area .service__section__wrap > .row {
    display: flex !important;
    align-items: stretch !important;
}

.htc__service__area .col-lg-5 {
    display: flex !important;
}

.htc__service__area .col-lg-5 .service__thumb {
    height: 100% !important;
    width: 100% !important;
}

.htc__service__area .col-lg-5 .service__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: 500px !important;
}

/* ===== HEADER LOGO CLICKABLE FIX ===== */
.logo {
    position: relative;
    z-index: 100;
}

.logo a {
    display: block;
    position: relative;
    z-index: 101;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.logo a img {
    pointer-events: auto !important;
}

/* ===== ABOUT SECTION OVERLAPPING IMAGES ===== */
.about__images__wrapper {
    position: relative;
    min-height: 500px;
    padding: 30px;
}

.about__image__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    z-index: 1;
}

.about__image__front {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    z-index: 2;
}

.about__image__back img,
.about__image__front img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.about__content .section__title {
    text-align: left;
}

.about__content .title__line {
    text-align: left;
}

.about__content .title__line::after {
    left: 0;
    transform: none;
}

@media (max-width: 991px) {
    .about__images__wrapper {
        min-height: 400px;
        margin-bottom: 40px;
    }

    .about__content {
        text-align: center;
    }

    .about__content .section__title,
    .about__content .title__line {
        text-align: center;
    }

    .about__content .title__line::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 576px) {
    .about__images__wrapper {
        min-height: 350px;
    }

    .about__image__back,
    .about__image__front {
        width: 80%;
    }
}

/* ===== MOBILE FOOTER STYLES ===== */
@media (max-width: 768px) {
    .htc__footer__area .footer__top {
        padding: 40px 0 !important;
    }

    .htc__footer__wrap {
        display: block !important;
    }

    .htc__footer__wrap > div {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin-bottom: 35px !important;
    }

    .htc__footer__wrap > div:last-child {
        margin-bottom: 0 !important;
    }

    /* Titles */
    .footer__widget .ft__title {
        font-size: 16px !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
        border-bottom: 2px solid rgba(255,255,255,0.2) !important;
    }

    /* About text */
    .ft__details p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }

    /* Quick Links - horizontal layout */
    .footer__link {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 20px !important;
    }

    .footer__link .ft__menu {
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer__link .ft__menu li {
        margin-bottom: 8px !important;
        list-style: none !important;
    }

    .footer__link .ft__menu li a {
        font-size: 13px !important;
        color: rgba(255,255,255,0.8) !important;
    }

    /* Instagram - compact 6 images in row */
    .footer__instagram {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-width: none !important;
    }

    .footer__instagram li {
        width: calc(33.33% - 4px) !important;
        height: auto !important;
        aspect-ratio: 1 !important;
    }

    .footer__instagram li a {
        width: 100% !important;
        height: 100% !important;
    }

    .footer__instagram li a img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Inquiry - same grid layout */
    .footer.foo .footer__link {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    /* Copyright */
    .copyright {
        padding: 15px 0 !important;
    }

    .copyright__inner p {
        font-size: 11px !important;
        text-align: center !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .htc__footer__area .footer__top {
        padding: 30px 0 !important;
    }

    .htc__footer__wrap > div {
        margin-bottom: 25px !important;
    }

    .footer__widget .ft__title {
        font-size: 14px !important;
    }

    .ft__details p,
    .footer__link .ft__menu li a {
        font-size: 12px !important;
    }

    .footer__instagram li {
        width: calc(33.33% - 4px) !important;
    }
}

/* ===== COUNTER SECTION STYLES ===== */
.htc__counterup__wrap {
    position: relative;
}

.htc__counterup__wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.htc__counterup__wrap .funfact {
    position: relative;
    z-index: 1;
}

.htc__counterup__wrap .fact__count,
.htc__counterup__wrap .count,
.htc__counterup__wrap .fact__title h2 {
    color: #fff !important;
}

/* ===== MOBILE COUNTER GRADIENT ===== */
@media (max-width: 768px) {
    .htc__counterup__wrap {
        background: linear-gradient(135deg, #74b9ff 0%, #a29bfe 50%, #dfe6e9 100%) !important;
        border-radius: 12px;
    }

    .htc__counterup__wrap::before {
        display: none;
    }

    .htc__counterup__wrap .fact__count,
    .htc__counterup__wrap .count,
    .htc__counterup__wrap .fact__title h2 {
        color: #2d3436 !important;
    }
}