/* =========================================================
   TEEM — BRANCH PAGE
   THE HOUSE OF GLORY INTERNATIONAL CHURCHES
   LAGOS
========================================================= */


/* =========================================================
   PAGE VARIABLES
========================================================= */

.teem-branch-page {

    --branch-primary: #0b3d32;
    --branch-primary-dark: #062a23;
    --branch-accent: #c9a227;

    --branch-light: #f5f7f5;
    --branch-white: #ffffff;

    --branch-text: #26332f;
    --branch-muted: #6d7974;

    --branch-border: #e2e8e4;

    color: var(--branch-text);

    overflow: hidden;
}


/* =========================================================
   HERO
========================================================= */

.teem-branch-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(201, 162, 39, 0.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #041f19 0%,
            #0b3d32 55%,
            #145646 100%
        );

    isolation: isolate;
}


.teem-branch-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 31, 25, 0.25),
            transparent
        );

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   HERO PATTERN
========================================================= */

.teem-branch-hero-pattern {

    position: absolute;

    width: 700px;

    height: 700px;

    right: -250px;

    top: -180px;

    border: 1px solid rgba(255,255,255,0.07);

    border-radius: 50%;

    z-index: -1;
}


.teem-branch-hero-pattern::before {

    content: "";

    position: absolute;

    inset: 70px;

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 50%;
}


.teem-branch-hero-pattern::after {

    content: "";

    position: absolute;

    inset: 145px;

    border: 1px solid rgba(201,162,39,0.12);

    border-radius: 50%;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.teem-branch-hero .container {

    width: 100%;
}


.teem-branch-hero-content {

    max-width: 850px;

    padding: 100px 0 150px;
}


.teem-branch-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 24px;

    color: var(--branch-accent);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.teem-branch-eyebrow i {

    font-size: 0.9rem;
}


.teem-branch-hero h1 {

    margin: 0;

    color: var(--branch-white);

    font-size: clamp(3rem, 6vw, 5.6rem);

    font-weight: 850;

    line-height: 1.02;

    letter-spacing: -2.5px;
}


.teem-branch-hero h1 span {

    display: block;

    color: var(--branch-accent);
}


.teem-branch-hero-description {

    max-width: 680px;

    margin: 28px 0 0;

    color: rgba(255,255,255,0.76);

    font-size: 1.08rem;

    line-height: 1.85;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.teem-branch-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 38px;
}


.teem-branch-primary-button,
.teem-branch-secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 52px;

    padding: 13px 22px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 0.82rem;

    font-weight: 750;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.teem-branch-primary-button {

    background: var(--branch-accent);

    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.15);
}


.teem-branch-primary-button:hover {

    transform: translateY(-3px);

    color: #ffffff;

    box-shadow:
        0 18px 35px rgba(0,0,0,0.2);
}


.teem-branch-secondary-button {

    border: 1px solid rgba(255,255,255,0.22);

    color: var(--branch-white);

    background: rgba(255,255,255,0.05);

    backdrop-filter: blur(8px);
}


.teem-branch-secondary-button:hover {

    transform: translateY(-3px);

    background: rgba(255,255,255,0.11);

    color: var(--branch-white);
}


/* =========================================================
   HERO LOCATION STRIP
========================================================= */

.teem-branch-hero-bottom {

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;
}


.teem-branch-location-strip {

    display: flex;

    align-items: center;

    gap: 15px;

    width: fit-content;

    padding: 17px 25px;

    border-radius: 18px 18px 0 0;

    background: rgba(255,255,255,0.08);

    border-top: 1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(12px);
}


.teem-branch-location-strip-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: var(--branch-accent);

    color: #ffffff;
}


.teem-branch-location-strip span {

    display: block;

    margin-bottom: 3px;

    color: rgba(255,255,255,0.5);

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.teem-branch-location-strip strong {

    color: #ffffff;

    font-size: 0.88rem;
}


/* =========================================================
   ABOUT
========================================================= */

.teem-branch-about {

    padding: 120px 0;

    background: var(--branch-white);
}


/* =========================================================
   VISUAL PLACEHOLDER
========================================================= */

.teem-branch-about-visual {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #092f27,
            #0b3d32 55%,
            #145646
        );

    box-shadow:
        0 25px 60px rgba(11,61,50,0.15);
}


.teem-branch-visual-pattern {

    position: absolute;

    width: 520px;

    height: 520px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 50%;
}


.teem-branch-visual-pattern::before {

    content: "";

    position: absolute;

    inset: 55px;

    border: 1px solid rgba(201,162,39,0.18);

    border-radius: 50%;
}


.teem-branch-visual-pattern::after {

    content: "";

    position: absolute;

    inset: 125px;

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 50%;
}


.teem-branch-visual-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 30px;
}


.teem-branch-visual-content > i {

    margin-bottom: 22px;

    color: var(--branch-accent);

    font-size: 3rem;
}


.teem-branch-visual-content span {

    margin-bottom: 7px;

    color: rgba(255,255,255,0.6);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.teem-branch-visual-content strong {

    max-width: 400px;

    color: #ffffff;

    font-size: clamp(1.8rem, 4vw, 3rem);

    font-weight: 850;

    line-height: 1.08;
}


.teem-branch-visual-content small {

    margin-top: 15px;

    color: var(--branch-accent);

    font-size: 0.9rem;

    font-weight: 700;
}


.teem-branch-visual-badge {

    position: absolute;

    right: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 14px;

    border-radius: 30px;

    background: rgba(255,255,255,0.1);

    color: #ffffff;

    font-size: 0.72rem;

    backdrop-filter: blur(8px);
}


.teem-branch-visual-badge i {

    color: var(--branch-accent);
}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.teem-branch-section-label {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--branch-accent);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 2px;
}


.teem-branch-about-content h2,
.teem-branch-visit-content h2 {

    margin: 0 0 22px;

    color: var(--branch-primary);

    font-size: clamp(2.1rem, 4vw, 3.5rem);

    font-weight: 850;

    line-height: 1.1;

    letter-spacing: -1px;
}


.teem-branch-about-content h2 span,
.teem-branch-visit-content h2 span {

    display: block;

    color: var(--branch-accent);
}


.teem-branch-about-content > p {

    margin-bottom: 18px;

    color: var(--branch-muted);

    font-size: 0.96rem;

    line-height: 1.9;
}


/* =========================================================
   ABOUT HIGHLIGHT
========================================================= */

.teem-branch-about-highlight {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 30px;

    padding: 20px;

    border-left: 3px solid var(--branch-accent);

    border-radius: 0 15px 15px 0;

    background: var(--branch-light);
}


.teem-branch-highlight-icon {

    flex: 0 0 45px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: var(--branch-primary);

    color: var(--branch-accent);
}


.teem-branch-about-highlight strong {

    display: block;

    margin-bottom: 5px;

    color: var(--branch-primary);

    font-size: 0.95rem;
}


.teem-branch-about-highlight p {

    margin: 0;

    color: var(--branch-muted);

    font-size: 0.82rem;

    line-height: 1.6;
}


/* =========================================================
   WHAT TO EXPECT
========================================================= */

.teem-branch-expect {

    padding: 110px 0;

    background: var(--branch-light);
}


.teem-branch-section-heading {

    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;
}


.teem-branch-section-heading > span {

    display: block;

    margin-bottom: 13px;

    color: var(--branch-accent);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 2px;
}


.teem-branch-section-heading h2 {

    margin: 0 0 16px;

    color: var(--branch-primary);

    font-size: clamp(2.1rem, 4vw, 3.3rem);

    font-weight: 850;
}


.teem-branch-section-heading p {

    margin: 0;

    color: var(--branch-muted);

    font-size: 0.95rem;

    line-height: 1.8;
}


/* =========================================================
   EXPECT CARDS
========================================================= */

.teem-branch-expect-card {

    height: 100%;

    padding: 30px 25px;

    border: 1px solid var(--branch-border);

    border-radius: 20px;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.teem-branch-expect-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(11,61,50,0.08);
}


.teem-branch-expect-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 14px;

    background: rgba(11,61,50,0.08);

    color: var(--branch-primary);

    font-size: 1.25rem;
}


.teem-branch-expect-card h3 {

    margin: 0 0 10px;

    color: var(--branch-primary);

    font-size: 1.05rem;

    font-weight: 800;
}


.teem-branch-expect-card p {

    margin: 0;

    color: var(--branch-muted);

    font-size: 0.82rem;

    line-height: 1.7;
}


/* =========================================================
   VISIT SECTION
========================================================= */

.teem-branch-visit {

    padding: 120px 0;

    background: #ffffff;
}


.teem-branch-visit-content {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.teem-branch-visit-content > p {

    max-width: 530px;

    margin-bottom: 30px;

    color: var(--branch-muted);

    font-size: 0.95rem;

    line-height: 1.8;
}


/* =========================================================
   ADDRESS
========================================================= */

.teem-branch-address {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 22px;

    border: 1px solid var(--branch-border);

    border-radius: 17px;

    background: var(--branch-light);
}


.teem-branch-address-icon {

    flex: 0 0 45px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: var(--branch-primary);

    color: var(--branch-accent);
}


.teem-branch-address span {

    display: block;

    margin-bottom: 7px;

    color: var(--branch-muted);

    font-size: 0.64rem;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.teem-branch-address address {

    margin: 0;

    color: var(--branch-primary);

    font-size: 0.88rem;

    font-style: normal;

    font-weight: 650;

    line-height: 1.7;
}


/* =========================================================
   LANDMARK
========================================================= */

.teem-branch-landmark {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 15px;

    padding: 17px 20px;

    border-radius: 14px;

    background: rgba(201,162,39,0.08);
}


.teem-branch-landmark > i {

    color: var(--branch-accent);

    font-size: 1.1rem;
}


.teem-branch-landmark strong {

    display: block;

    margin-bottom: 3px;

    color: var(--branch-primary);

    font-size: 0.78rem;
}


.teem-branch-landmark span {

    display: block;

    color: var(--branch-muted);

    font-size: 0.76rem;
}


/* =========================================================
   DIRECTIONS BUTTON
========================================================= */

.teem-branch-direction-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: fit-content;

    margin-top: 20px;

    padding: 13px 19px;

    border: 1px solid var(--branch-border);

    border-radius: 50px;

    background: #ffffff;

    color: var(--branch-primary);

    text-decoration: none;

    font-size: 0.78rem;

    font-weight: 750;
}


.teem-branch-direction-button > i {

    color: var(--branch-accent);
}


.teem-branch-direction-button span {

    margin-left: 4px;

    padding: 3px 7px;

    border-radius: 20px;

    background: var(--branch-light);

    color: var(--branch-muted);

    font-size: 0.58rem;

    font-weight: 700;
}


/* =========================================================
   MAP PLACEHOLDER
========================================================= */

.teem-branch-map-placeholder {

    position: relative;

    min-height: 540px;

    overflow: hidden;

    border-radius: 30px;

    background:
        #e9eeeb;

    box-shadow:
        0 25px 55px rgba(11,61,50,0.09);
}


.teem-branch-map-grid {

    position: absolute;

    inset: 0;

    opacity: 0.55;

    background-image:
        linear-gradient(
            rgba(11,61,50,0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,61,50,0.07) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}


/* =========================================================
   MAP ROADS
========================================================= */

.teem-branch-map-road {

    position: absolute;

    height: 12px;

    background: #ffffff;

    border: 1px solid rgba(11,61,50,0.08);

    border-radius: 20px;
}


.road-one {

    width: 120%;

    left: -10%;

    top: 42%;

    transform: rotate(-13deg);
}


.road-two {

    width: 100%;

    left: 0;

    top: 66%;

    transform: rotate(23deg);
}


.road-three {

    width: 75%;

    left: 20%;

    top: 20%;

    transform: rotate(70deg);
}


/* =========================================================
   MAP PIN
========================================================= */

.teem-branch-map-pin {

    position: absolute;

    top: 50%;

    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    transform: translate(-50%, -50%);

    text-align: center;
}


.teem-branch-map-pin-icon {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 6px solid rgba(201,162,39,0.25);

    border-radius: 50%;

    background: var(--branch-primary);

    color: var(--branch-accent);

    font-size: 1.5rem;

    box-shadow:
        0 15px 35px rgba(11,61,50,0.2);
}


.teem-branch-map-pin span {

    margin-top: 12px;

    padding: 8px 14px;

    border-radius: 8px;

    background: #ffffff;

    color: var(--branch-primary);

    font-size: 0.72rem;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.08);
}


.teem-branch-map-pin small {

    margin-top: 4px;

    color: var(--branch-muted);

    font-size: 0.68rem;
}


/* =========================================================
   MAP NOTE
========================================================= */

.teem-branch-map-note {

    position: absolute;

    right: 20px;

    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 13px;

    border-radius: 10px;

    background: rgba(255,255,255,0.9);

    color: var(--branch-muted);

    font-size: 0.65rem;

    backdrop-filter: blur(8px);
}


.teem-branch-map-note i {

    color: var(--branch-primary);
}


/* =========================================================
   CTA
========================================================= */

.teem-branch-cta {

    padding: 0 0 110px;

    background: #ffffff;
}


.teem-branch-cta-inner {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 45px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            var(--branch-primary),
            #104d3f
        );

    box-shadow:
        0 22px 55px rgba(11,61,50,0.15);
}


.teem-branch-cta-icon {

    flex: 0 0 60px;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: rgba(255,255,255,0.1);

    color: var(--branch-accent);

    font-size: 1.5rem;
}


.teem-branch-cta-content {

    flex: 1;
}


.teem-branch-cta-content > span {

    display: block;

    margin-bottom: 7px;

    color: var(--branch-accent);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.teem-branch-cta-content h2 {

    margin: 0 0 7px;

    color: #ffffff;

    font-size: clamp(1.4rem, 3vw, 2.2rem);

    font-weight: 800;

    line-height: 1.2;
}


.teem-branch-cta-content p {

    margin: 0;

    color: rgba(255,255,255,0.68);

    font-size: 0.82rem;
}


.teem-branch-cta-button {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 21px;

    border-radius: 50px;

    background: #ffffff;

    color: var(--branch-primary);

    text-decoration: none;

    font-size: 0.78rem;

    font-weight: 800;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.teem-branch-cta-button:hover {

    transform: translateY(-3px);

    color: var(--branch-primary);

    box-shadow:
        0 12px 25px rgba(0,0,0,0.18);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .teem-branch-hero {

        min-height: 600px;

    }


    .teem-branch-hero-content {

        padding: 90px 0 140px;

    }


    .teem-branch-about-visual {

        min-height: 450px;

    }


    .teem-branch-map-placeholder {

        min-height: 450px;

    }


    .teem-branch-cta-inner {

        flex-wrap: wrap;

    }


    .teem-branch-cta-content {

        min-width: calc(100% - 100px);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .teem-branch-hero {

        min-height: 610px;

    }


    .teem-branch-hero-content {

        padding: 80px 0 130px;

    }


    .teem-branch-hero h1 {

        font-size: 2.7rem;

        letter-spacing: -1.5px;

    }


    .teem-branch-hero-description {

        font-size: 0.92rem;

    }


    .teem-branch-hero-actions {

        align-items: stretch;

        flex-direction: column;

        max-width: 310px;

    }


    .teem-branch-primary-button,
    .teem-branch-secondary-button {

        width: 100%;

    }


    .teem-branch-location-strip {

        width: 100%;

        border-radius: 17px 17px 0 0;

    }


    .teem-branch-about {

        padding: 80px 0;

    }


    .teem-branch-about-visual {

        min-height: 390px;

        border-radius: 23px;

    }


    .teem-branch-visual-pattern {

        width: 390px;

        height: 390px;

    }


    .teem-branch-visual-content strong {

        font-size: 1.8rem;

    }


    .teem-branch-expect {

        padding: 80px 0;

    }


    .teem-branch-visit {

        padding: 80px 0;

    }


    .teem-branch-map-placeholder {

        min-height: 380px;

        border-radius: 23px;

    }


    .teem-branch-cta {

        padding-bottom: 70px;

    }


    .teem-branch-cta-inner {

        align-items: flex-start;

        flex-direction: column;

        padding: 30px 25px;

        border-radius: 22px;

    }


    .teem-branch-cta-content {

        min-width: 0;

    }


    .teem-branch-cta-button {

        width: 100%;

        justify-content: center;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .teem-branch-hero h1 {

        font-size: 2.35rem;

    }


    .teem-branch-about-visual {

        min-height: 350px;

    }


    .teem-branch-visual-content strong {

        font-size: 1.55rem;

    }


    .teem-branch-map-placeholder {

        min-height: 340px;

    }

}