:root {
    --brand:#087b83;
    --brand-dark:#07545c;
    --accent:#12a6a1;
    --ink:#12252b;
    --muted:#63777c;
    --surface:#f5f9fa;
    --border:#dce8e9;
    --white:#fff;
    --shadow:0 18px 50px rgba(18,37,43,.10)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.65
}
a {
    text-decoration:none
}
.text-brand {
    color:var(--brand)!important
}
.bg-brand {
    background:var(--brand)!important
}
.btn-brand {
    background:var(--brand);
    color:#fff;
    border:1px solid var(--brand);
    padding:.75rem 1.2rem;
    border-radius:.75rem;
    font-weight:700
}
.btn-brand:hover {
    background:var(--brand-dark);
    color:#fff;
    transform:translateY(-1px)
}
.btn-outline-brand {
    border:1px solid var(--brand);
    color:var(--brand);
    padding:.75rem 1.2rem;
    border-radius:.75rem;
    font-weight:700
}
.btn-outline-brand:hover {
    background:var(--brand);
    color:#fff
}
.topbar {
    background:#073f45;
    color:#d7f4f2;
    font-size:.86rem
}
.topbar a {
    color:#fff
}
.navbar {
    background:rgba(255,255,255,.97);
    box-shadow:0 5px 25px rgba(0,0,0,.06)
}
.navbar-brand img {
    height:58px;
    width:auto
}
.nav-link {
    font-weight:650;
    color:#263d42!important;
    margin:0 .25rem
}
.nav-link:hover,.nav-link.active {
    color:var(--brand)!important
}
.hero {
    min-height:650px;
    display:flex;
    align-items:center;
    background:radial-gradient(circle at 85% 15%,rgba(18,166,161,.18),transparent 30%),linear-gradient(135deg,#f8fcfc,#eef8f8);
    position:relative;
    overflow:hidden
}
.hero:before {
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    border:70px solid rgba(8,123,131,.06);
    right:-120px;
    bottom:-140px
}
.hero h1 {
    font-size:clamp(2.45rem,5vw,4.7rem);
    line-height:1.05;
    font-weight:850;
    letter-spacing:-.04em
}
.hero p {
    font-size:1.12rem;
    color:var(--muted);
    max-width:650px
}
.hero-visual {
    background:#fff;
    border-radius:2rem;
    padding:1.8rem;
    box-shadow:var(--shadow);
    transform:rotate(1.5deg)
}
.hero-visual img {
    width:100%;
    max-height:430px;
    object-fit:contain
}
.section {
    padding:88px 0
}
.section-soft {
    background:var(--surface)
}
.eyebrow {
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--brand);
    font-weight:800
}
.section-title {
    font-size:clamp(2rem,3.5vw,3.1rem);
    font-weight:820;
    letter-spacing:-.025em
}
.section-copy {
    color:var(--muted);
    max-width:720px
}
.service-card,.project-card,.price-card,.info-card {
    height:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:1.25rem;
    overflow:hidden;
    transition:.25s ease;
    box-shadow:0 10px 28px rgba(18,37,43,.045)
}
.service-card:hover,.project-card:hover,.price-card:hover {
    transform:translateY(-6px);
    box-shadow:var(--shadow);
    border-color:rgba(8,123,131,.28)
}
.service-image {
    height:190px;
    background:#edf6f6;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
}
.service-image img {
    width:100%;
    height:100%;
    object-fit:cover
}
.service-card .card-body {
    padding:1.5rem
}
.service-icon {
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(8,123,131,.12);
    color:var(--brand);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.35rem
}
.page-hero {
    padding:96px 0 68px;
    background:linear-gradient(135deg,#eef8f8,#fff);
    border-bottom:1px solid var(--border)
}
.page-hero h1 {
    font-weight:850;
    letter-spacing:-.03em
}
.project-thumb {
    height:205px;
    background:linear-gradient(135deg,#0a6971,#13aaa5);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:3rem;
    font-weight:850
}
.filter-btn {
    border:1px solid var(--border);
    background:#fff;
    border-radius:50rem;
    padding:.55rem 1rem;
    font-weight:700;
    color:#4d666b
}
.filter-btn.active,.filter-btn:hover {
    background:var(--brand);
    color:#fff;
    border-color:var(--brand)
}
.client-tile {
    height:110px;
    border:1px solid var(--border);
    border-radius:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    font-weight:800;
    color:var(--brand);
    padding:1rem;
    text-align:center
}
.price-card.featured {
    border:2px solid var(--brand);
    position:relative
}
.featured-ribbon {
    position:absolute;
    right:16px;
    top:16px;
    background:var(--brand);
    color:#fff;
    border-radius:50rem;
    font-size:.72rem;
    font-weight:800;
    padding:.35rem .65rem
}
.price {
    font-size:1.75rem;
    font-weight:850;
    color:var(--brand)
}
.faq .accordion-item {
    border:1px solid var(--border);
    border-radius:1rem!important;
    overflow:hidden;
    margin-bottom:.8rem
}
.faq .accordion-button {
    font-weight:750;
    box-shadow:none!important
}
.faq .accordion-button:not(.collapsed) {
    background:#edf8f8;
    color:var(--brand)
}
.contact-card {
    background:#073f45;
    color:#fff;
    border-radius:1.5rem;
    padding:2rem;
    height:100%
}
.form-control,.form-select {
    border-radius:.75rem;
    border-color:#d8e5e6;
    padding:.78rem .95rem
}
.form-control:focus,.form-select:focus {
    border-color:var(--brand);
    box-shadow:0 0 0 .2rem rgba(8,123,131,.12)
}
.footer {
    background:#092f34;
    color:#b9d0d2;
    padding:65px 0 25px
}
.footer h5 {
    color:#fff
}
.footer a {
    color:#cbe0e1
}
.footer a:hover {
    color:#fff
}
.footer-logo {
    background:#fff;
    border-radius:.8rem;
    padding:.4rem;
    height:64px
}
.whatsapp-float {
    position:fixed;
    right:20px;
    bottom:20px;
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#25d366;
    color:#fff;
    font-size:1.75rem;
    box-shadow:0 14px 30px rgba(0,0,0,.2);
    z-index:1000
}
.fade-up {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .65s ease,transform .65s ease
}
.fade-up.visible {
    opacity:1;
    transform:none
}
.auth-page {
    min-height:100vh;
    background:linear-gradient(135deg,#eaf7f7,#fff);
    display:flex;
    align-items:center
}
.auth-card {
    background:#fff;
    border-radius:1.5rem;
    box-shadow:var(--shadow);
    overflow:hidden
}
.auth-brand {
    background:linear-gradient(145deg,#07545c,#0b8d94);
    color:#fff;
    padding:3rem;
    min-height:540px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.auth-form {
    padding:3rem
}
.table-modern {
    border:1px solid var(--border);
    border-radius:1rem;
    overflow:hidden
}
.table-modern thead th {
    background:#f4f8f8;
    color:#4a6368;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    border:0
}
.stat-card {
    border:1px solid var(--border);
    border-radius:1rem;
    padding:1.2rem;
    background:#fff;
    height:100%
}
.stat-card .number {
    font-size:2rem;
    font-weight:850;
    color:var(--brand)
}
@media(max-width:991px) {
    .topbar {
        display:none
    }
    .hero {
        padding:80px 0;
        min-height:auto
    }
    .hero-visual {
        margin-top:2rem
    }
    .section {
        padding:65px 0
    }
    .navbar-brand img {
        height:48px
    }
}
@media(max-width:575px) {
    .hero h1 {
        font-size:2.55rem
    }
    .auth-form,.auth-brand {
        padding:2rem
    }
    .page-hero {
        padding:75px 0 50px
    }
}
/* ========================================
   PROJECT CARDS
======================================== */
.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce8eb;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(15, 55, 65, 0.06);
    transition:         transform 0.3s ease,         box-shadow 0.3s ease,         border-color 0.3s ease;
}
.project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 139, 139, 0.4);
    box-shadow: 0 20px 45px rgba(15, 55, 65, 0.13);
}
.project-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: #eef6f7;
    border-radius: 19px 19px 0 0;
}
.project-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.45s ease;
}
.project-card:hover .project-thumb img {
    transform: scale(1.035);
}
.project-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}
.project-card-content h4 {
    color: #132f36;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
}
.project-card-content p {
    flex-grow: 1;
    margin-bottom: 18px;
    line-height: 1.7;
}
.project-category {
    color: var(--brand-color, #008b8b);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.project-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    color: var(--brand-color, #008b8b);
    font-weight: 700;
    text-decoration: none;
}
.project-link:hover {
    color: #006e70;
}
.project-link i {
    transition: transform 0.25s ease;
}
.project-link:hover i {
    transform: translate(2px, -2px);
}
/* Project Filters */
.project-filters {
    overflow-x: auto;
    padding-bottom: 5px;
}
.filter-btn {
    min-height: 44px;
    padding: 9px 18px;
    color: #26434a;
    font-weight: 600;
    white-space: nowrap;
    background: #ffffff;
    border: 1px solid #d7e4e7;
    border-radius: 999px;
    transition:         color 0.25s ease,         background 0.25s ease,         border-color 0.25s ease,         transform 0.25s ease;
}
.filter-btn:hover {
    color: #007f82;
    border-color: #008b8b;
    transform: translateY(-1px);
}
.filter-btn.active {
    color: #ffffff;
    background: #008b8b;
    border-color: #008b8b;
}
.project-item[hidden] {
    display: none !important;
}
@media (max-width: 767.98px) {
    .project-card {
        border-radius: 16px;
    }
    .project-thumb {
        border-radius: 15px 15px 0 0;
    }
    .project-card-content {
        padding: 20px;
    }
    .project-card-content h4 {
        font-size: 1.2rem;
    }
    .filter-btn {
        min-height: 42px;
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}


.top-contact-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    flex-wrap: nowrap;
}

.top-contact-bar .contact-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
}

.top-contact-bar .contact-item i {
    flex-shrink: 0;
}

.top-contact-bar .contact-item span,
.top-contact-bar .contact-item a {
    white-space: nowrap;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 1200px) {
    .top-contact-bar .container {
        gap: 18px;
    }

    .top-contact-bar .contact-item {
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    .top-contact-bar {
        overflow-x: auto;
    }

    .top-contact-bar .container {
        width: max-content;
        min-width: 100%;
        justify-content: flex-start;
        padding: 8px 16px;
    }
}


.topbar {
    width: 100%;
    padding: 0;
    background: #004d53;
    color: #ffffff;
}

.topbar-single-line {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
}

.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12.5px;
    line-height: 1;
}

.topbar-item i {
    color: #ffffff;
    font-size: 14px;
    flex: 0 0 auto;
}

.topbar-item span {
    color: #ffffff;
    white-space: nowrap;
}

a.topbar-item:hover {
    color: #ffffff;
    text-decoration: underline;
}

@media (max-width: 1199.98px) {
    .topbar {
        overflow-x: auto;
    }

    .topbar-single-line {
        width: max-content;
        min-width: 100%;
        justify-content: flex-start;
        padding: 0 15px;
    }
}

@media (max-width: 767.98px) {
    .topbar-item {
        font-size: 11.5px;
    }
}


.footer-animated-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-animated-links li {
    margin-bottom: 14px;
}

.footer-animated-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    transition:
        transform 0.3s ease,
        color 0.3s ease,
        padding-left 0.3s ease;
}

/* Hover arrow */
.footer-animated-links a::before {
    content: "›";
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* Animated underline */
.footer-animated-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    border-radius: 10px;
    background: #24d3cc;
    transition: width 0.3s ease;
}

.footer-animated-links a:hover,
.footer-animated-links a:focus-visible {
    color: #24d3cc;
    padding-left: 16px;
    transform: translateX(3px);
}

.footer-animated-links a:hover::before,
.footer-animated-links a:focus-visible::before {
    opacity: 1;
    transform: translateX(0);
}

.footer-animated-links a:hover::after,
.footer-animated-links a:focus-visible::after {
    width: calc(100% - 16px);
}

/* Keyboard accessibility */
.footer-animated-links a:focus-visible {
    outline: 2px solid rgba(36, 211, 204, 0.6);
    outline-offset: 5px;
    border-radius: 3px;
}

/* Mobileలో movement తగ్గిస్తుంది */
@media (max-width: 767.98px) {
    .footer-animated-links a {
        font-size: 15px;
    }
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .footer-animated-links a,
    .footer-animated-links a::before,
    .footer-animated-links a::after {
        transition: none;
    }
}


.footer-heading {
    margin-bottom: 18px;
    color: #ffffff;
    font-weight: 700;
}

.footer-description {
    max-width: 360px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.8;
}

.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-link-list li {
    margin-bottom: 12px;
}

.footer-link-list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    transition:
        color 0.28s ease,
        transform 0.28s ease,
        padding-left 0.28s ease;
}

.footer-link-list a::before {
    content: "›";
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.footer-link-list a::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -4px;
    width: 0;
    height: 2px;
    border-radius: 10px;
    background: #24d3cc;
    transition: width 0.28s ease;
}

.footer-link-list a:hover,
.footer-link-list a:focus-visible {
    color: #24d3cc;
    padding-left: 16px;
    transform: translateX(3px);
}

.footer-link-list a:hover::before,
.footer-link-list a:focus-visible::before {
    opacity: 1;
    transform: translateX(0);
}

.footer-link-list a:hover::after,
.footer-link-list a:focus-visible::after {
    width: calc(100% - 16px);
}

.footer-link-list a:focus-visible,
.footer-social-link:focus-visible,
.footer-contact-item:focus-visible,
.footer-legal-links a:focus-visible {
    outline: 2px solid rgba(36, 211, 204, 0.75);
    outline-offset: 5px;
    border-radius: 4px;
}

/* SOCIAL ICONS */
.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.footer-social-link {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition:
        color 0.28s ease,
        background 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s ease;
}

.footer-social-link:hover {
    color: #003f45;
    background: #24d3cc;
    border-color: #24d3cc;
    transform: translateY(-4px) rotate(4deg);
}

/* CONTACT LINKS */
.footer-contact-list {
    display: grid;
    gap: 14px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    line-height: 1.65;
    transition:
        color 0.28s ease,
        transform 0.28s ease;
}

.footer-contact-item i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: #24d3cc;
}

.footer-contact-item:hover {
    color: #24d3cc;
    transform: translateX(4px);
}

.footer-divider {
    margin-top: 42px;
    margin-bottom: 22px;
    border-color: rgba(255, 255, 255, 0.2);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: rgba(255, 255, 255, 0.72);
}

.footer-legal-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-legal-links a:hover {
    color: #24d3cc;
}

@media (max-width: 767.98px) {
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-link-list a,
    .footer-link-list a::before,
    .footer-link-list a::after,
    .footer-social-link,
    .footer-contact-item {
        transition: none;
    }
}
/* =========================================================
   TWO-BRANCH PREMIUM CONTACT EXPERIENCE
   ========================================================= */

.topbar-location-link {
    transition: color .25s ease, transform .25s ease;
}

.topbar-location-link:hover {
    color: #70eee8;
    transform: translateY(-1px);
}

.branch-locations-section {
    position: relative;
    background:
        radial-gradient(circle at 8% 10%, rgba(18, 166, 161, .10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%);
}

.branch-location-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(8, 123, 131, .16);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(18, 37, 43, .09);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.branch-location-card:hover {
    transform: translateY(-7px);
    border-color: rgba(8, 123, 131, .35);
    box-shadow: 0 30px 70px rgba(18, 37, 43, .14);
}

.branch-location-content {
    padding: 30px;
}

.branch-location-topline {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.branch-location-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-dark), var(--accent));
    box-shadow: 0 12px 25px rgba(8, 123, 131, .22);
    font-size: 1.35rem;
}

.branch-label {
    display: block;
    margin-bottom: 2px;
    color: var(--brand);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.branch-location-topline h3 {
    margin: 0;
    font-weight: 820;
    letter-spacing: -.02em;
}

.branch-address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 78px;
    margin-bottom: 24px;
    color: #4d666b;
    line-height: 1.75;
}

.branch-address i {
    margin-top: 5px;
    color: var(--brand);
}

.branch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.branch-map-frame {
    min-height: 310px;
    margin-top: auto;
    background: #e9f3f3;
    border-top: 1px solid var(--border);
}

.branch-map-frame iframe {
    display: block;
    width: 100%;
    min-height: 310px;
}

.contact-enquiry-section {
    padding-top: 84px;
}

.contact-connect-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    padding: 38px;
    overflow: hidden;
    position: relative;
    border-radius: 28px;
    color: #ffffff;
    background:
        radial-gradient(circle at 90% 10%, rgba(58, 227, 218, .24), transparent 28%),
        linear-gradient(145deg, #073f45, #076b73);
    box-shadow: 0 24px 60px rgba(7, 63, 69, .20);
}

.contact-connect-card::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border: 45px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.contact-connect-card > * {
    position: relative;
    z-index: 1;
}

.contact-connect-icon {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #073f45;
    background: #78eee8;
    font-size: 1.5rem;
}

.contact-connect-card h2 {
    margin-top: 10px;
    margin-bottom: 14px;
    color: #ffffff;
    font-weight: 820;
    letter-spacing: -.025em;
}

.contact-connect-card p {
    max-width: 500px;
    color: rgba(255, 255, 255, .78);
}

.contact-connect-list {
    display: grid;
    gap: 13px;
    margin-top: 34px;
}

.contact-connect-list a,
.contact-connect-list > div {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 15px;
    color: #ffffff;
    background: rgba(255, 255, 255, .07);
    text-decoration: none;
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.contact-connect-list a:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(120, 238, 232, .45);
}

.contact-connect-list i {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #78eee8;
    background: rgba(120, 238, 232, .12);
}

.contact-connect-list span {
    display: grid;
}

.contact-connect-list small {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .55);
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.contact-form-premium {
    border-radius: 28px;
    box-shadow: 0 22px 55px rgba(18, 37, 43, .07);
}

.footer-branches-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.footer-branch-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 100%;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 15px;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .045);
    text-decoration: none;
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.footer-branch-card:hover {
    transform: translateY(-4px);
    border-color: rgba(36, 211, 204, .50);
    background: rgba(36, 211, 204, .08);
}

.footer-branch-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #24d3cc;
    background: rgba(36, 211, 204, .12);
}

.footer-branch-card strong {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
}

.footer-branch-card small {
    display: block;
    color: rgba(255, 255, 255, .68);
    line-height: 1.55;
}

.footer-contact-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.footer-contact-inline a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .84);
    text-decoration: none;
}

.footer-contact-inline a:hover {
    color: #24d3cc;
}

.settings-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid #dce8e9;
    border-radius: 16px;
    background: #f5fbfb;
}

.settings-section-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #ffffff;
    background: #087b83;
}

.branch-settings-card {
    padding: 20px;
    border: 1px solid #dce8e9;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(18, 37, 43, .04);
}

@media (max-width: 1199.98px) {
    .footer-branches-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .branch-address {
        min-height: auto;
    }

    .contact-connect-card {
        padding: 30px;
    }
}

@media (max-width: 575.98px) {
    .branch-location-content,
    .contact-connect-card {
        padding: 24px;
    }

    .branch-actions .btn {
        width: 100%;
    }

    .footer-branches-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .branch-location-card,
    .contact-connect-list a,
    .footer-branch-card,
    .topbar-location-link {
        transition: none;
    }
}


/* ========================================
   HOME HERO — JATHIN SOFTWARE 2026
   Reference-inspired responsive hero
======================================== */
.page-home .navbar {
    box-shadow: none;
    border-bottom: 1px solid rgba(8, 123, 131, .05);
}
.page-home .navbar .container {
    max-width: 1540px;
}
.page-home .navbar-brand img {
    height: 76px;
}
.page-home .nav-link {
    position: relative;
    padding: 1.6rem .72rem !important;
    font-size: .99rem;
}
.page-home .nav-link.active::after,
.page-home .nav-link:hover::after {
    content: "";
    position: absolute;
    left: .72rem;
    right: .72rem;
    bottom: 1rem;
    height: 2px;
    border-radius: 10px;
    background: var(--brand);
}
.page-home .navbar .btn-brand {
    min-width: 160px;
    padding: .8rem 1.15rem;
    border-radius: 14px;
}
.hero-modern {
    min-height: 720px;
    padding: 42px 0 64px;
    background:
        radial-gradient(circle at 78% 38%, rgba(43, 204, 205, .20), transparent 27%),
        radial-gradient(circle at 96% 0%, rgba(90, 219, 224, .15), transparent 25%),
        linear-gradient(115deg, #ffffff 0%, #fbfefe 45%, #edfafa 100%);
}
.hero-modern::before {
    width: 560px;
    height: 560px;
    right: -180px;
    bottom: -280px;
    border: 84px solid rgba(8, 123, 131, .055);
}
.hero-modern::after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -80px;
    height: 170px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(104,211,214,.15));
    border-radius: 50% 50% 0 0;
    pointer-events: none;
}
.hero-copy-col {
    position: relative;
    z-index: 4;
}
.hero-eyebrow {
    font-size: .88rem;
    letter-spacing: .17em;
}
.hero-title {
    max-width: 700px;
    font-size: clamp(3rem, 4.6vw, 5.05rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.045em !important;
    color: #12272c;
}
.hero-description {
    max-width: 650px !important;
    font-size: 1.14rem !important;
    line-height: 1.9;
    color: #4d7880 !important;
}
.hero-actions .btn {
    min-width: 220px;
    padding: .95rem 1.4rem;
    border-radius: 12px;
    font-size: 1rem;
}
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.hero-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 30px;
    min-width: 160px;
    border-right: 1px solid #cfe2e4;
}
.hero-stat:first-child {
    padding-left: 0;
}
.hero-stat:last-child {
    border-right: 0;
}
.hero-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 2rem;
}
.hero-stat strong,
.hero-stat span {
    display: block;
}
.hero-stat strong {
    color: var(--brand);
    font-size: 1.85rem;
    line-height: 1.05;
    font-weight: 850;
}
.hero-stat div > span {
    color: #243d43;
    font-size: .92rem;
    margin-top: 5px;
}
.hero-tech-visual {
    position: relative;
    min-height: 590px;
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    isolation: isolate;
}
.hero-tech-visual::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 44% 42%, rgba(255,255,255,.96) 0 4%, transparent 5%),
        radial-gradient(circle, rgba(22,190,194,.5) 0 1.4px, transparent 1.8px) 0 0/22px 22px,
        linear-gradient(135deg, rgba(73,210,213,.88), rgba(4,126,135,.78));
    box-shadow:
        inset 0 0 0 24px rgba(255,255,255,.25),
        0 35px 80px rgba(8,123,131,.22);
    opacity: .82;
    z-index: -4;
}
.hero-tech-visual::after {
    content: "";
    position: absolute;
    width: 630px;
    height: 210px;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(4,126,135,.28), transparent 68%);
    filter: blur(10px);
    z-index: -5;
}
.hero-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-16deg);
    z-index: -2;
}
.hero-orbit-one {
    width: 610px;
    height: 335px;
}
.hero-orbit-two {
    width: 540px;
    height: 430px;
    transform: translate(-50%, -50%) rotate(24deg);
    border-color: rgba(101,231,232,.68);
}
.hero-glow {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 20px 7px rgba(255,255,255,.8);
    z-index: 0;
}
.hero-glow-one { top: 17%; left: 39%; }
.hero-glow-two { right: 13%; top: 37%; }
.hero-laptop-wrap {
    position: absolute;
    width: 520px;
    height: 350px;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%) perspective(900px) rotateX(1deg) rotateY(-7deg) rotateZ(-1deg);
    z-index: 3;
}
.hero-laptop-screen {
    position: absolute;
    left: 50%;
    top: 0;
    width: 390px;
    height: 245px;
    transform: translateX(-50%);
    padding: 13px;
    border: 8px solid #24343b;
    border-radius: 20px 20px 12px 12px;
    background: #061d24;
    box-shadow:
        0 0 0 2px #86d9dc,
        0 0 30px rgba(15,224,222,.55),
        0 25px 50px rgba(3,49,56,.25);
}
.hero-laptop-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background:
        radial-gradient(circle at 75% 20%, rgba(13,218,218,.18), transparent 25%),
        repeating-radial-gradient(ellipse at 50% 80%, rgba(20,223,216,.16) 0 1px, transparent 1.5px 16px),
        linear-gradient(135deg, #06252c, #04313a 60%, #032129);
    overflow: hidden;
}
.hero-laptop-brand {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}
.hero-laptop-brand img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    filter: drop-shadow(0 0 12px rgba(56,231,230,.45));
}
.hero-laptop-brand strong {
    font-size: 1.22rem;
    letter-spacing: .01em;
}
.hero-laptop-brand span {
    margin-top: 4px;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #caeeee;
}
.hero-laptop-base {
    position: absolute;
    left: 50%;
    top: 237px;
    width: 510px;
    height: 96px;
    transform: translateX(-50%) perspective(360px) rotateX(64deg);
    transform-origin: top;
    border-radius: 5px 5px 28px 28px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.7), transparent 15% 85%, rgba(255,255,255,.7)),
        repeating-linear-gradient(90deg, #64747b 0 16px, #4d6067 16px 18px),
        linear-gradient(#8a9aa0, #c8d0d2);
    border: 2px solid #b8c6c8;
    box-shadow: inset 0 13px 18px rgba(255,255,255,.5);
}
.hero-laptop-shadow {
    position: absolute;
    width: 470px;
    height: 60px;
    left: 50%;
    top: 302px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0,98,107,.22);
    filter: blur(18px);
    z-index: -1;
}
.hero-service-chip {
    position: absolute;
    width: 140px;
    min-height: 132px;
    padding: 16px 10px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: #102a30;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(8,123,131,.10);
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(17,91,98,.12);
    backdrop-filter: blur(8px);
    z-index: 5;
}
.hero-service-chip span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: var(--brand);
    font-size: 2.25rem;
}
.hero-service-chip strong {
    font-size: .86rem;
    line-height: 1.15;
}
.chip-web { top: 12px; left: 30%; transform: rotate(5deg); }
.chip-digital { top: 178px; left: 0; transform: rotate(-4deg); }
.chip-ecommerce { bottom: 74px; left: 4%; transform: rotate(4deg); }
.chip-erp { top: 50px; right: 1%; transform: rotate(6deg); }
.chip-branding { top: 248px; right: 0; transform: rotate(4deg); }
.chip-support { bottom: 25px; right: 7%; transform: rotate(5deg); }

@media (max-width: 1199px) {
    .hero-modern { min-height: 690px; }
    .hero-title { font-size: clamp(2.8rem, 4.2vw, 4.25rem) !important; }
    .hero-tech-visual { transform: scale(.91); transform-origin: center; margin: -10px -20px; }
    .hero-stat { padding: 0 20px; min-width: 145px; }
}
@media (max-width: 991px) {
    .page-home .navbar-brand img { height: 58px; }
    .page-home .nav-link { padding: .65rem 0 !important; }
    .page-home .nav-link.active::after,
    .page-home .nav-link:hover::after { display: none; }
    .page-home .navbar .btn-brand { margin: 8px 0 16px; min-width: 0; width: 100%; }
    .hero-modern { padding: 70px 0 30px; text-align: center; }
    .hero-title, .hero-description { margin-left: auto; margin-right: auto; }
    .hero-actions, .hero-stats { justify-content: center; }
    .hero-tech-visual { margin: 35px auto 0; transform: scale(.9); min-height: 560px; }
}
@media (max-width: 767px) {
    .hero-modern { overflow: hidden; }
    .hero-title { font-size: clamp(2.55rem, 10vw, 3.65rem) !important; }
    .hero-description { font-size: 1rem !important; line-height: 1.75; }
    .hero-actions .btn { width: 100%; min-width: 0; }
    .hero-stats { gap: 18px; }
    .hero-stat,
    .hero-stat:first-child {
        padding: 0 14px;
        border-right: 0;
        min-width: auto;
    }
    .hero-tech-visual {
        width: 760px;
        left: 50%;
        margin-left: -380px;
        transform: scale(.72);
        min-height: 525px;
    }
}
@media (max-width: 575px) {
    .page-home .navbar-brand img { height: 50px; }
    .hero-modern { padding-top: 50px; }
    .hero-eyebrow { font-size: .72rem; }
    .hero-stats { align-items: flex-start; }
    .hero-stat { flex-direction: column; gap: 4px; }
    .hero-stat-icon { font-size: 1.5rem; }
    .hero-stat strong { font-size: 1.45rem; }
    .hero-stat div > span { font-size: .78rem; }
    .hero-tech-visual { transform: scale(.58); margin-top: 10px; margin-bottom: -65px; }
}

/* HERO V2 CACHE/CONFLICT SAFETY */
.page-home .hero-modern .hero-tech-visual {
    position: relative !important;
    display: block !important;
    min-height: 590px !important;
}
.page-home .hero-modern .hero-laptop-wrap,
.page-home .hero-modern .hero-service-chip,
.page-home .hero-modern .hero-orbit,
.page-home .hero-modern .hero-glow {
    position: absolute !important;
}
.page-home .hero-modern .hero-stats {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
@media (max-width: 767px) {
    .page-home .hero-modern .hero-stats {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}