*{
            box-sizing:border-box;
        }

        body{
            margin:0;
            font-family:'Roboto',sans-serif;
        }

        .church-image-section{
            position:relative;
            width:100%;
            min-height:590px;
            padding:100px 0;
            overflow:hidden;
            isolation:isolate;
            background:
                radial-gradient(circle at 15% 25%,rgba(255,255,255,.25) 0 3px,transparent 4px),
                radial-gradient(circle at 78% 70%,rgba(255,255,255,.18) 0 4px,transparent 5px),
                linear-gradient(135deg,#ff6600 0%,#ff8a00 48%,#ff5500 100%);
        }

        /* =========================
           HIGH VISIBLE WAVES
        ========================= */

        .wave{
            position:absolute;
            left:-15%;
            width:130%;
            height:180px;
            border-radius:45%;
            pointer-events:none;
            z-index:-4;
        }

        .wave.wave-1{
            top:-70px;
            background:rgba(255,255,255,.22);
            animation:waveMove1 8s linear infinite;
            filter:blur(.3px);
        }

        .wave.wave-2{
            top:15px;
            background:rgba(255,235,190,.17);
            animation:waveMove2 11s linear infinite reverse;
        }

        .wave.wave-3{
            bottom:-80px;
            background:rgba(255,255,255,.20);
            animation:waveMove1 9s linear infinite reverse;
        }

        .wave.wave-4{
            bottom:5px;
            background:rgba(255,210,140,.18);
            animation:waveMove2 13s linear infinite;
        }

        @keyframes waveMove1{
            0%{
                transform:translateX(-4%) rotate(0deg);
            }
            50%{
                transform:translateX(4%) rotate(4deg);
            }
            100%{
                transform:translateX(-4%) rotate(0deg);
            }
        }

        @keyframes waveMove2{
            0%{
                transform:translateX(5%) rotate(-3deg) scaleY(1);
            }
            50%{
                transform:translateX(-5%) rotate(3deg) scaleY(1.15);
            }
            100%{
                transform:translateX(5%) rotate(-3deg) scaleY(1);
            }
        }

        /* =========================
           LARGE CURVED WAVE LINES
        ========================= */

        .wave-line{
            position:absolute;
            width:750px;
            height:290px;
            border:5px solid rgba(255,255,255,.26);
            border-left-color:transparent;
            border-right-color:transparent;
            border-radius:50%;
            pointer-events:none;
            z-index:-3;
            filter:drop-shadow(0 0 7px rgba(255,255,255,.15));
        }

        .wave-line.one{
            top:55px;
            left:-170px;
            transform:rotate(-12deg);
            animation:waveLineMove 9s ease-in-out infinite;
        }

        .wave-line.two{
            bottom:40px;
            right:-180px;
            transform:rotate(15deg);
            animation:waveLineMove 11s ease-in-out infinite reverse;
        }

        @keyframes waveLineMove{
            0%,100%{
                transform:translateY(0) rotate(-10deg);
            }

            50%{
                transform:translateY(35px) rotate(-4deg);
            }
        }

        /* =========================
           RINGS
        ========================= */

        .ring{
            position:absolute;
            border:3px solid rgba(255,255,255,.55);
            border-radius:50%;
            pointer-events:none;
            z-index:-2;
            box-shadow:
                0 0 14px rgba(255,255,255,.22),
                inset 0 0 12px rgba(255,255,255,.16);
            animation:ringFloat 7s ease-in-out infinite;
        }

        .ring.r1{
            width:95px;
            height:95px;
            left:4%;
            top:38%;
        }

        .ring.r2{
            width:48px;
            height:48px;
            left:28%;
            top:10%;
            animation-delay:-2s;
        }

        .ring.r3{
            width:120px;
            height:120px;
            right:6%;
            top:22%;
            animation-delay:-4s;
        }

        .ring.r4{
            width:65px;
            height:65px;
            right:29%;
            bottom:5%;
            animation-delay:-1s;
        }

        @keyframes ringFloat{
            0%,100%{
                transform:translateY(0) scale(1);
                opacity:.65;
            }
            50%{
                transform:translateY(-30px) scale(1.12);
                opacity:1;
            }
        }

        /* =========================
           BUBBLES
        ========================= */

        .bubble{
            position:absolute;
            border-radius:50%;
            background:
                radial-gradient(circle at 30% 25%,
                rgba(255,255,255,.95),
                rgba(255,255,255,.32) 32%,
                rgba(255,255,255,.09) 62%,
                transparent 70%);
            border:1px solid rgba(255,255,255,.45);
            box-shadow:
                inset -6px -7px 10px rgba(255,180,70,.2),
                0 0 15px rgba(255,255,255,.18);
            pointer-events:none;
            z-index:-1;
            animation:bubbleRise 9s ease-in-out infinite;
        }

        .bubble.b1{
            width:25px;
            height:25px;
            left:8%;
            bottom:14%;
        }

        .bubble.b2{
            width:42px;
            height:42px;
            left:41%;
            bottom:7%;
            animation-delay:-3s;
        }

        .bubble.b3{
            width:21px;
            height:21px;
            right:18%;
            bottom:13%;
            animation-delay:-5s;
        }

        .bubble.b4{
            width:33px;
            height:33px;
            right:6%;
            bottom:32%;
            animation-delay:-2s;
        }

        .bubble.b5{
            width:18px;
            height:18px;
            left:54%;
            top:7%;
            animation-delay:-4s;
        }

        @keyframes bubbleRise{
            0%,100%{
                transform:translateY(0) translateX(0) scale(1);
            }
            50%{
                transform:translateY(-75px) translateX(15px) scale(1.15);
            }
        }

        /* =========================
           WATER DROPS
        ========================= */

        .drop{
            position:absolute;
            width:24px;
            height:34px;
            background:
                radial-gradient(circle at 33% 28%,#fff 0 7%,transparent 9%),
                linear-gradient(145deg,rgba(255,255,255,.60),rgba(255,255,255,.10));
            border:1px solid rgba(255,255,255,.65);
            border-radius:55% 55% 65% 65% / 42% 42% 70% 70%;
            transform:rotate(45deg);
            pointer-events:none;
            z-index:-1;
            box-shadow:0 0 13px rgba(255,255,255,.28);
            animation:dropFloat 6s ease-in-out infinite;
        }

        .drop.d1{
            top:20%;
            left:16%;
        }

        .drop.d2{
            top:15%;
            right:36%;
            animation-delay:-2s;
        }

        .drop.d3{
            bottom:14%;
            right:11%;
            animation-delay:-4s;
        }

        .drop.d4{
            bottom:9%;
            left:24%;
            animation-delay:-1s;
        }

        @keyframes dropFloat{
            0%,100%{
                transform:translateY(0) rotate(45deg);
            }
            50%{
                transform:translateY(-25px) rotate(45deg);
            }
        }

        /* =========================
           IMAGE CARD OUTER BORDER
        ========================= */

        .gallery-col{
            position:relative;
        }

        .gallery-frame{
            position:relative;
            border-radius:5px;
            padding:0px;
        }

        /* animated dotted secondary border */
        .gallery-frame::before{
            content:"";
            position:absolute;
            inset:-7px;
            border: 0px dotted #fff;
            border-radius:10px;
            pointer-events:none;
            animation:dottedBorderMove 5s linear infinite;
            filter:drop-shadow(0 0 5px rgba(255,255,255,.6));
            /* background: #eb7e7e; */
        }

        @keyframes dottedBorderMove{
            0%{
                transform:rotate(0deg);
                opacity:.7;
            }
            50%{
                opacity:1;
            }
            100%{
                transform:rotate(1deg);
                opacity:.7;
            }
        }

        .gallery-card{
            position:relative;
            border:4px solid #fff;
            border-radius:5px;
            overflow:hidden;

            background:#fff;

            box-shadow:
                0 10px 26px rgba(132,46,0,.28),
                0 0 0 2px rgba(255,255,255,.25),
                inset 0 0 10px rgba(255,255,255,.35);

            transition:
                transform .4s ease,
                box-shadow .4s ease;
        }

        .gallery-card:hover{
            transform:translateY(-10px);
            box-shadow:
                0 17px 35px rgba(110,35,0,.35),
                0 0 24px rgba(255,255,255,.46);
        }

        /* =========================
           COLOR HEADERS
        ========================= */

        .image-header{
            position:relative;
            height:66px;
            width:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;

            font-size:20px;
            font-weight:800;
            color:#fff;
            letter-spacing:.5px;
            text-align:center;

            text-shadow:
                0 2px 3px rgba(0,0,0,.25),
                0 0 8px rgba(255,255,255,.14);

            box-shadow:
                inset 0 2px 3px rgba(255,255,255,.4),
                inset 0 -8px 13px rgba(0,0,0,.10);
        }

        .header-red{
            background:#d92734;
        }

        .header-blue{
            background:#1266c3;
        }

        .header-purple{
            background:#7e32b7;
        }

        .header-green{
            background:#168c68;
        }

        /* glossy highlight */
        .image-header::after{
            content:"";
            position:absolute;
            left:3%;
            right:3%;
            top:5px;
            height:17px;
            border-radius:50%;
            background:rgba(255,255,255,.16);
            filter:blur(3px);
            pointer-events:none;
        }

        /* =========================
           HEADER MULTI WATER DROPS
        ========================= */

        .header-drop{
            position:absolute;
            border-radius:50%;
            background:
                radial-gradient(circle at 30% 25%,
                rgba(255,255,255,.95) 0 12%,
                rgba(255,255,255,.42) 17%,
                rgba(255,255,255,.12) 55%,
                transparent 70%);
            border:1px solid rgba(255,255,255,.35);
            box-shadow:0 2px 5px rgba(0,0,0,.12);
            pointer-events:none;
            animation:headerDropMove 4s ease-in-out infinite;
        }

        .header-drop.hd1{
            width:15px;
            height:15px;
            left:12px;
            top:8px;
        }

        .header-drop.hd2{
            width:9px;
            height:9px;
            left:35px;
            bottom:9px;
            animation-delay:-1.2s;
        }

        .header-drop.hd3{
            width:18px;
            height:18px;
            right:13px;
            top:9px;
            animation-delay:-2s;
        }

        .header-drop.hd4{
            width:8px;
            height:8px;
            right:44px;
            bottom:8px;
            animation-delay:-3s;
        }

        @keyframes headerDropMove{
            0%,100%{
                transform:translateY(0) scale(1);
            }
            50%{
                transform:translateY(5px) scale(1.15);
            }
        }

        /* =========================
           IMAGE
        ========================= */

        .gallery-image{
            position:relative;
            width:100%;
            overflow:hidden;
            background:#eee;
        }

        .gallery-image img{
            width:100%;
            height:100%;
            display:block;
            object-fit:cover;
            border:0;
            border-radius:0;
            transition:transform .7s cubic-bezier(.2,.7,.2,1);
        }

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

        /* =========================
           EXTRA SHIMMER
        ========================= */

        .gallery-card::after{
            content:"";
            position:absolute;
            top:-110%;
            left:-70%;
            width:60%;
            height:250%;
            background:linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.25),
                transparent
            );
            transform:rotate(20deg);
            transition:.8s;
            pointer-events:none;
        }

        .gallery-card:hover::after{
            left:140%;
        }

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

        @media (max-width:1199.98px){
            .church-image-section{
                padding:85px 0;
            }

            .gallery-image{
                
            }
        }

        @media (max-width:991.98px){
            .church-image-section{
                padding:75px 0;
            }

            .gallery-image{
               
            }

            .image-header{
                font-size:19px;
            }
        }

        @media (max-width:767.98px){
            .church-image-section{
                padding:65px 0;
            }

            .gallery-col{
                padding:0px;
            }

            .gallery-image{
                 
            }

            .wave{
                height:145px;
            }
        }

        @media (max-width:575.98px){
            .church-image-section{
                padding:60px 8px;
            }

            .gallery-image{
                 
            }

            .image-header{
                height:62px;
                font-size:18px;
            }

            .wave-line{
                width:500px;
                height:220px;
            }
        }

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