/* =========================================================
           ABOUT THE CHURCH SECTION
        ========================================================== */

        .atc-section {
            --atc-navy: #061a38;
            --atc-blue: #0b4dbb;
            --atc-cyan: #18bfe5;
            --atc-gold: #f6bf42;
            --atc-orange: #f46b2b;
            --atc-red: #d93663;
            --atc-purple: #7444d6;
            --atc-white: #ffffff;
            --atc-cream: #fff6df;
            --atc-text: #5b6680;

            position: relative;
            overflow: hidden;
            padding: 110px 0;
            font-family: "Nunito", sans-serif;

            /* Flat cream background */
            background-color: var(--atc-cream);
        }

        .atc-section *,
        .atc-section *::before,
        .atc-section *::after {
            box-sizing: border-box;
        }

        .atc-section .container {
            position: relative;
            z-index: 2;
        }

        /* =========================================================
           SIMPLE FLAT BACKGROUND DECORATIONS
        ========================================================== */

        .atc-flat-shape {
            position: absolute;
            pointer-events: none;
            opacity: 0.45;
        }

        .atc-flat-shape-one {
            top: 55px;
            left: -75px;
            width: 170px;
            height: 170px;
            border: 22px solid rgba(246, 191, 66, 0.22);
            border-radius: 50%;
        }

        .atc-flat-shape-two {
            right: -85px;
            bottom: 65px;
            width: 210px;
            height: 210px;
            border: 28px solid rgba(11, 77, 187, 0.09);
            border-radius: 50%;
        }

        .atc-flat-cross {
            position: absolute;
            top: 90px;
            right: 7%;
            color: rgba(11, 77, 187, 0.07);
            font-size: 95px;
            pointer-events: none;
        }

        /* =========================================================
           LEFT IMAGE AREA
        ========================================================== */

        .atc-image-area {
            position: relative;
            min-height: 650px;
            padding: 20px 24px 55px 0;
        }

        .atc-image-card {
            position: absolute;
            overflow: hidden;
            border-radius: 32px;
            background: var(--atc-white);
            box-shadow: 0 24px 58px rgba(6, 26, 56, 0.18);
        }

        .atc-image-card::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;

            background:
                linear-gradient(
                    to top,
                    rgba(3, 16, 40, 0.94) 0%,
                    rgba(3, 16, 40, 0.28) 44%,
                    transparent 74%
                );
        }

        .atc-image-card img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .atc-image-card:hover img {
            transform: scale(1.07);
        }

        .atc-image-card-one {
            top: 0;
            left: 0;
            z-index: 2;
            width: 70%;
            height: 425px;
            border: 7px solid var(--atc-white);
            transform: rotate(-2deg);
        }

        .atc-image-card-two {
            right: 0;
            bottom: 35px;
            z-index: 3;
            width: 62%;
            height: 360px;
            border: 7px solid var(--atc-white);
            transform: rotate(2.5deg);
        }

        .atc-image-overlay {
            position: absolute;
            right: 25px;
            bottom: 22px;
            left: 25px;
            z-index: 3;
            color: var(--atc-white);
        }

        .atc-image-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 9px;
            padding: 6px 12px;
            border-radius: 30px;
            color: var(--atc-navy);
            background: var(--atc-gold);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .atc-image-card-two .atc-image-label {
            color: var(--atc-white);
            background: var(--atc-purple);
        }

        .atc-image-overlay h3 {
            margin: 0;
            color: var(--atc-white);
            font-family: "Anton", sans-serif;
            font-size: clamp(1.45rem, 2.2vw, 2.15rem);
            font-weight: 400;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .atc-image-overlay p {
            margin: 7px 0 0;
            color: rgba(255, 255, 255, 0.82);
            font-size: 0.9rem;
            font-weight: 600;
        }

        .atc-photo-badge {
            position: absolute;
            top: 50%;
            left: 52%;
            z-index: 5;
            width: 132px;
            height: 132px;
            border: 7px solid var(--atc-white);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--atc-white);
            text-align: center;
            background: var(--atc-blue);

            box-shadow:
                0 18px 42px rgba(6, 26, 56, 0.27),
                0 0 0 9px rgba(246, 191, 66, 0.2);

            animation: atcBadgeFloat 4s ease-in-out infinite;
        }

        .atc-photo-badge i {
            margin-bottom: 7px;
            color: var(--atc-gold);
            font-size: 1.7rem;
        }

        .atc-photo-badge strong {
            display: block;
            font-family: "Anton", sans-serif;
            font-size: 1.35rem;
            font-weight: 400;
            line-height: 1;
        }

        .atc-photo-badge span {
            margin-top: 5px;
            font-size: 0.67rem;
            font-weight: 900;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .atc-color-bar {
            position: absolute;
            bottom: 0;
            left: 12%;
            width: 62%;
            height: 14px;
            border-radius: 30px;

            background:
                linear-gradient(
                    90deg,
                    var(--atc-gold) 0 25%,
                    var(--atc-orange) 25% 50%,
                    var(--atc-cyan) 50% 75%,
                    var(--atc-purple) 75% 100%
                );

            box-shadow: 0 9px 25px rgba(6, 26, 56, 0.16);
        }

        /* =========================================================
           CONTENT AREA
        ========================================================== */

        .atc-content {
            position: relative;
            padding-left: 35px;
        }

        .atc-small-title {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 17px;
            padding: 9px 16px;
            border: 1px solid rgba(11, 77, 187, 0.16);
            border-radius: 50px;
            color: #fff;
            background: #ff7070;
            box-shadow: 0 10px 28px rgba(6, 26, 56, 0.08);
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 1.7px;
            text-transform: uppercase;
        }

        .atc-small-title i {
            color: var(--atc-gold);
        }

        .atc-title {
            margin: 0 0 18px;
            color: var(--atc-navy);
            font-family: "Anton", sans-serif;
            font-size: clamp(2.8rem, 5vw, 5rem);
            font-weight: 400;
            line-height: 1.05;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .atc-title span {
            display: inline-block;
            color: #ff7070;
        }

        .atc-subtitle {
            position: relative;
            margin: 0 0 22px;
            padding-left: 19px;
            color: #0b121e;
            font-size: clamp(1.08rem, 2vw, 1.32rem);
            font-weight: 700;
            line-height: 1.55;
        }

        .atc-subtitle::before {
            content: "";
            position: absolute;
            top: 4px;
            bottom: 4px;
            left: 0;
            width: 5px;
            border-radius: 20px;
            background: var(--atc-orange);
        }

        .atc-description {
            margin-bottom: 25px;
            color: var(--atc-text);
            font-size: 1.03rem;
            font-weight: 500;
            line-height: 1.85;
        }

        .atc-description strong {
            color: var(--atc-navy);
            font-weight: 700;
        }

        /* =========================================================
           DIFFERENT BACKGROUND FEATURE BOXES
        ========================================================== */

        .atc-feature-card {
            position: relative;
            height: 100%;
            min-height: 210px;
            overflow: hidden;
            padding: 23px 17px;
            border-radius: 20px;
            isolation: isolate;
            transition:
                transform 0.35s ease,
                box-shadow 0.35s ease;
        }

        .atc-feature-card::before {
            content: "";
            position: absolute;
            top: -42px;
            right: -38px;
            z-index: -1;
            width: 125px;
            height: 125px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
        }

        .atc-feature-card::after {
            content: "";
            position: absolute;
            right: -28px;
            bottom: -38px;
            z-index: -1;
            width: 110px;
            height: 110px;
            border: 18px solid rgba(255, 255, 255, 0.08);
            border-radius: 50%;
        }

        .atc-feature-card:hover {
            transform: translateY(-8px);
        }

        /* Biblical Teaching */

        .atc-feature-one {
            border: 1px solid #ffffff;
            background: #0752a8;

            box-shadow:
                0 16px 35px rgba(7, 82, 168, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .atc-feature-one:hover {
            box-shadow: 0 23px 45px rgba(7, 82, 168, 0.36);
        }

        .atc-feature-one .atc-feature-icon {
            color: #0752a8;
            background: #dff7ff;
        }

        /* Loving Community */

        .atc-feature-two {
            border: 1px solid #ffffff;
            background: #dc5a27;

            box-shadow:
                0 16px 35px rgba(220, 90, 39, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .atc-feature-two:hover {
            box-shadow: 0 23px 45px rgba(220, 90, 39, 0.36);
        }

        .atc-feature-two .atc-feature-icon {
            color: #b43d16;
            background: #fff1ce;
        }

        /* Serving Others */

        .atc-feature-three {
            border: 1px solid #ffffff;
            background: #34343c;
            box-shadow:
                0 16px 35px rgba(112, 64, 191, 0.26),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .atc-feature-three:hover {
            box-shadow: 0 23px 45px rgba(112, 64, 191, 0.38);
        }

        .atc-feature-three .atc-feature-icon {
            color: #5b259e;
            background: #f0ddff;
        }

        .atc-feature-icon {
            position: relative;
            z-index: 2;
            width: 54px;
            height: 54px;
            margin-bottom: 15px;
            border: 2px solid rgba(255, 255, 255, 0.7);
            border-radius: 17px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;

            box-shadow:
                0 10px 23px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.75);

            transition: transform 0.35s ease;
        }

        .atc-feature-card:hover .atc-feature-icon {
            transform: translateY(-3px) scale(1.07);
        }

        .atc-feature-card h4 {
            position: relative;
            z-index: 2;
            margin: 0 0 8px;
            color: var(--atc-white);
            font-size: 1rem;
            font-weight: 900;
        }

        .atc-feature-card p {
            position: relative;
            z-index: 2;
            margin: 0;
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.84rem;
            font-weight: 600;
            line-height: 1.6;
        }

        /* =========================================================
           ROUND CHURCH PHOTOS
        ========================================================== */

        .atc-community-box {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-top: 26px;
            padding: 17px 20px;
            border: 1px solid #183e76;
            border-radius: 22px;
            background: var(--atc-navy);
            box-shadow: 0 18px 38px rgba(6, 26, 56, 0.19);
        }

        .atc-round-photos {
            display: flex;
            flex-shrink: 0;
        }

        .atc-round-photo {
            position: relative;
            width: 58px;
            height: 58px;
            margin-left: -15px;
            overflow: hidden;
            border: 4px solid var(--atc-white);
            border-radius: 50%;
            background: #d9e6ff;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
            transition: transform 0.3s ease;
        }

        .atc-round-photo:first-child {
            margin-left: 0;
        }

        .atc-round-photo:hover {
            z-index: 5;
            transform: translateY(-7px) scale(1.06);
        }

        .atc-round-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .atc-community-content {
            flex: 1;
        }

        .atc-community-content h4 {
            margin: 0 0 4px;
            color: var(--atc-white);
            font-size: 1rem;
            font-weight: 900;
        }

        .atc-community-content p {
            margin: 0;
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.82rem;
            font-weight: 600;
        }

        .atc-community-arrow {
            flex-shrink: 0;
            width: 42px;
            height: 42px;
            border: 0;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--atc-navy);
            background: var(--atc-gold);
            text-decoration: none;

            transition:
                transform 0.3s ease,
                background 0.3s ease;
        }

        .atc-community-arrow:hover {
            color: var(--atc-navy);
            background: var(--atc-white);
            transform: translateX(5px);
        }

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

        .atc-action-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 18px;
            margin-top: 28px;
        }

        .atc-button {
            position: relative;
            overflow: hidden;
            min-height: 54px;
            padding: 13px 25px;
            border: 0;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 11px;
            color: var(--atc-white);
            background: var(--atc-red);
            box-shadow: 0 13px 28px rgba(217, 54, 99, 0.24);
            font-size: 0.92rem;
            font-weight: 900;
            letter-spacing: 0.7px;
            text-decoration: none;
            text-transform: uppercase;

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

        .atc-button::before {
            content: "";
            position: absolute;
            top: 0;
            left: -85%;
            width: 50%;
            height: 100%;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.45),
                    transparent
                );

            transform: skewX(-25deg);
            transition: left 0.65s ease;
        }

        .atc-button:hover {
            color: var(--atc-white);
            background: var(--atc-orange);
            transform: translateY(-4px);
            box-shadow: 0 18px 36px rgba(217, 54, 99, 0.31);
        }

        .atc-button:hover::before {
            left: 135%;
        }

        .atc-verse {
            display: flex;
            align-items: center;
            gap: 11px;
            max-width: 265px;
            color: #596681;
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1.45;
        }

        .atc-verse i {
            color: #c68a00;
            font-size: 1.45rem;
        }

        /* =========================================================
           ANIMATION
        ========================================================== */

        @keyframes atcBadgeFloat {
            0%,
            100% {
                transform: translate(-50%, -50%);
            }

            50% {
                transform: translate(-50%, calc(-50% - 10px));
            }
        }

        /* =========================================================
           RESPONSIVE
        ========================================================== */

        @media (max-width: 1199.98px) {
            .atc-section {
                padding: 90px 0;
            }

            .atc-image-area {
                min-height: 600px;
            }

            .atc-image-card-one {
                width: 72%;
                height: 395px;
            }

            .atc-image-card-two {
                width: 65%;
                height: 330px;
            }

            .atc-content {
                padding-left: 15px;
            }

            .atc-photo-badge {
                width: 116px;
                height: 116px;
            }
        }

        @media (max-width: 991.98px) {
            .atc-section {
                padding: 80px 0;
            }

            .atc-image-area {
                max-width: 690px;
                min-height: 650px;
                margin: 0 auto 60px;
                padding-right: 15px;
            }

            .atc-image-card-one {
                width: 68%;
                height: 430px;
            }

            .atc-image-card-two {
                width: 60%;
                height: 355px;
            }

            .atc-content {
                padding-left: 0;
            }

            .atc-title {
                max-width: 760px;
            }
        }

        @media (max-width: 767.98px) {
            .atc-section {
                padding: 70px 0;
            }

            .atc-image-area {
                min-height: 565px;
                margin-bottom: 45px;
            }

            .atc-image-card {
                border-radius: 24px;
            }

            .atc-image-card-one {
                width: 76%;
                height: 365px;
            }

            .atc-image-card-two {
                width: 68%;
                height: 305px;
            }

            .atc-photo-badge {
                top: 49%;
                left: 52%;
                width: 105px;
                height: 105px;
                border-width: 5px;
            }

            .atc-photo-badge strong {
                font-size: 1.1rem;
            }

            .atc-image-overlay {
                right: 18px;
                bottom: 17px;
                left: 18px;
            }

            .atc-image-overlay p {
                display: none;
            }

            .atc-community-box {
                flex-wrap: wrap;
            }

            .atc-community-content {
                min-width: 170px;
            }

            .atc-feature-card {
                min-height: 190px;
            }
        }

        @media (max-width: 575.98px) {
            .atc-section {
                padding: 60px 0;
            }

            .atc-image-area {
                min-height: 505px;
                padding: 0;
            }

            .atc-image-card-one {
                width: 86%;
                height: 315px;
                transform: rotate(-1deg);
            }

            .atc-image-card-two {
                width: 78%;
                height: 260px;
                transform: rotate(1deg);
            }

            .atc-photo-badge {
                top: 50%;
                left: 54%;
                width: 92px;
                height: 92px;
            }

            .atc-photo-badge i {
                margin-bottom: 4px;
                font-size: 1.2rem;
            }

            .atc-photo-badge strong {
                font-size: 0.98rem;
            }

            .atc-photo-badge span {
                font-size: 0.53rem;
            }

            .atc-image-overlay h3 {
                font-size: 1.25rem;
            }

            .atc-image-label {
                padding: 5px 9px;
                font-size: 0.58rem;
            }

            .atc-title {
                font-size: 2.7rem;
            }

            .atc-description {
                font-size: 0.96rem;
            }

            .atc-feature-card {
                min-height: auto;
            }

            .atc-round-photo {
                width: 50px;
                height: 50px;
            }

            .atc-action-row {
                align-items: flex-start;
                flex-direction: column;
            }

            .atc-button {
                width: 100%;
            }

            .atc-verse {
                max-width: 100%;
            }

            .atc-community-arrow {
                margin-left: auto;
            }

            .atc-flat-cross {
                display: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .atc-section *,
            .atc-section *::before,
            .atc-section *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }