/**
 * Tuners 1.0.0
 * This Style Sheet was made specifically for the Tuners Website
 * https://christiantuners.com
 *
 * Copyright 2018-2026 ChristianTuners
 *
 * Released under the MIT License
 *
 * Released on: May 05, 2018
 */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


/* =========================
   BASE
========================= */
    :root{
        --bg-primary: #0f172a;
        --bg-light: #1e3a8a;
        --bg-accent: #3b82f6;

        --gold: #d4af37;
        --text-dark: #0f172a;
        --text-light: #e5e7eb;
    }

    body{
        margin:0;
        min-height:100vh;

        background-size: cover !important; 
        background-position: center !important; 
        background-attachment: fixed !important;
    }

    /* BLUE FILTER */
        body::before{
            content:"";
            position:fixed;
            inset:0;

            background: rgba(10, 25, 80, 0.70); /* deeper + more blue */

            animation: none !important; /* 🔥 stops the swinging */
            pointer-events:none;
            z-index:-1;
        }

    html {
        scroll-behavior: smooth;
    }

    .container{
        max-width:1100px;
    }

    h1, h2, h3, h4, h5{
        color: #ffffff;
    }

    p{
        color: #ffffff;
    }

    /*  soft animation */
        @keyframes glowMove{
            0%{ transform: translate(0,0); }
            50%{ transform: translate(20px, -20px); }
            100%{ transform: translate(0,0); }
        }

        body::before{
            animation: glowMove 12s ease-in-out infinite;
        }

    /*  Section Headers */
        .section-title{
            display:inline-block;
            padding:10px 18px;

            border-radius:14px;

            background: linear-gradient(
                rgba(7,26,51,0.85),
                rgba(7,26,51,0.65)
            );

            color:#fff;

            border:1px solid rgba(212,175,55,0.35);

            box-shadow:
                0 10px 30px rgba(0,0,0,0.5),
                0 0 10px rgba(212,175,55,0.15);

            text-shadow:
                0 2px 6px rgba(0,0,0,0.8);
        }

    /* GLOBAL ICON SYSTEM */
        .icon{
            display:inline-flex;
            align-items:center;
            justify-content:center;

            font-size:16px;
            line-height:1;

            vertical-align:middle;

            transition: 0.25s ease;
            color:inherit;
        }

        .icon:hover{
            transform: translateY(-1px);
        }

        .icon-left{
            margin-right:8px;
        }

        .icon-right{
            margin-left:8px;
        }

/* =========================
   NAVBAR
========================= */
    .navbar{
        /*  Position */
        height: 70px;          /* fixed height */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;

        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;

        background: rgba(15,23,42,0.85);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(212,175,55,0.15);
        transition: all 0.3s ease;

        z-index: 1000;
        overflow: visible;
    }

    .navbar.scrolled{
        background: rgba(2, 6, 23, 0.9);
        box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    }

    .nav-link{
        position: relative;
        font-weight: 500;
        color: var(--text-main) !important;
        transition: color 0.3s ease;
        color: #ffffff !important;
    }

    .nav-item{
        position:relative;
    }

    /* underline animation */
        .nav-link::after{
            content:"";
            position:absolute;
            left:0;
            bottom:0;
            width:0%;
            height:2px;
            background: var(--gold);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after{
            width:100%;
        }

        .nav-link:hover{
            color: var(--gold) !important;
        }

    /*  dropdown */
        .dropdown-menu{
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(10px);
            border:1px solid rgba(212,175,55,0.15);
            border-radius:10px;
        }

        /*  remove the bootstrap default dropdown indicator */
            .dropdown-toggle::after{
                display: none;
            }

        .dropdown-item{
            color:#fff;
        }

        .dropdown-item:hover{
            background: rgba(212,175,55,0.15);
        }

    /*  links */
        .navbar .nav-link.active {
            color: var(--gold) !important;
            border-bottom: 2px solid var(--gold);
            font-weight: 600;
        }

        .navbar .nav-link.active::after{
            width:100%;
        }

        .nav-link i,
        .dropdown-item i {
            width: 18px;
            text-align: center;
        }

    /*  buttons */
        .btn-gold{
            background: linear-gradient(135deg, #f5d97a, #d4af37);
            color: #0f172a;

            border: none;

            box-shadow:
                0 10px 25px rgba(212,175,55,0.4),
                0 0 15px rgba(212,175,55,0.3);

            transition: all 0.3s ease;
        }

        .btn-gold:hover{
            transform: translateY(-2px);

            box-shadow:
                0 15px 35px rgba(212,175,55,0.6),
                0 0 25px rgba(212,175,55,0.5);
        }

    /*  branding layout */
        .brand-text{
            font-size: 1.25rem;  /* bigger than nav links */
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .brand-text span{
            background: linear-gradient(145deg, var(--gold), #f5d76e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
        }

        /* LOGO OVERLAP */
            .brand-logo{
                width: 90px;
                height: 90px;
                object-fit: contain;

                position: relative;
                top: 20px; /* PUSH DOWN → overlap effect */

                z-index: 2;

                border-radius: 50%;
                background: #0b1c3a;

                box-shadow:
                    0 10px 25px rgba(0,0,0,0.6),
                    0 0 15px rgba(212,175,55,0.3);
            }


        .navbar-brand:hover .brand-logo{
            transform: scale(1.08);
        }

        .brand-bold{
            color: var(--gold);
            font-weight: 700;
            text-shadow:
                0 0 10px rgba(212,175,55,0.5),
                0 0 20px rgba(212,175,55,0.2);
        }

        /* softer spiritual tone */
        .brand-light{
            color: var(--text-muted);
            font-weight: 400;
        }

        /* strong music identity */
        .brand-bold{
            color: var(--gold);
            font-weight: 700;
        }

    /*  logo overlya */
        .brand-container{
            display: flex;
            align-items: center;
            gap: 14px;
            position: relative;
        }

        /* LOGO WRAPPER */
        .brand-logo-wrap{
            position: relative;
        }

    /*  brand Text */
        .brand-text-wrap{
            display: flex;
            align-items: baseline;
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        /*  BIG FIRST LETTER */
            .brand-c{
                font-size: 45px;
                font-weight: 700;

                color: #C90A03; /* soft blue (Tailwind blue-400 range) */
                /* 
                text-shadow:
                    0 0 6px rgba(96,165,250,0.4); subtle glow for contrast */
            }

        /*  MAIN TEXT */
            .brand-main{
                color: #e5e7eb;
            }

        /*  HIGHLIGHT T */
            .brand-t{
                font-size: 45px;
                font-weight: 700;

                color: var(--gold); /* main gold */
                /*
                text-shadow:
                    0 0 8px rgba(212,175,55,0.6);*/
            }

    /*  toggler */
        .navbar-toggler{
            border: none;
        }

        .navbar-toggler:focus{
            box-shadow: none;
        }

        .navbar-toggler-icon{
            filter: brightness(1.8);
        }

        /* =========================
           FLOATING SEARCH
        ========================= */
            .search-icon{
                cursor:pointer;
                font-size:16px;
                color:#fff;
                transition:0.25s ease;
            }

            .search-icon:hover{
                color: var(--gold);
            }

            /*  POPUP BOX */
                .search-popup{
                    position:absolute;

                    top:120%;
                    right:0;                         /* anchor to the icon */
                    transform: translateX(-90%) translateY(-10px);
                    /* 👆 pushes the box to the LEFT side of the icon */

                    width:280px;

                    background: rgba(7,26,51,0.95);
                    border:1px solid rgba(212,175,55,0.3);
                    border-radius:12px;

                    padding:12px;

                    box-shadow: 0 10px 30px rgba(0,0,0,0.4);

                    opacity:0;
                    pointer-events:none;

                    transition: all 0.25s ease;

                    z-index:999;
                }

            /*  ACTIVE */
                .search-popup.active{
                    opacity:1;
                    transform: translateX(-100%) translateY(0);
                    pointer-events:auto;
                }

            /*  Small Arrow Poiter */
                .search-popup::before{
                    content:"";
                    position:absolute;
                    top:-6px;
                    right:12px; /* keep arrow pointing to icon */

                    border-width:6px;
                    border-style:solid;
                    border-color:transparent transparent rgba(7,26,51,0.95) transparent;
                }

            /* INPUT */
                .search-popup input{

                    flex:1;

                    min-width:0;

                    height:42px;

                    padding:0 14px;

                    border:none;

                    outline:none;

                    border-radius:10px;

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

                    color:#ffffff;
                }


            /* ACTIVE STATE */
                .search-popup.active{
                    opacity:1;
                    transform: translateY(0);
                    pointer-events:auto;
                }

            /* Make search behave like nav links */
                .search-trigger{
                    display:flex;
                    align-items:center;
                    justify-content:center;

                    height:100%;

                    color:#fff;
                    transition:0.25s ease;
                }

                .search-trigger:hover{
                    color: var(--gold);
                }

            /* Ensure nav items are vertically aligned */
                .navbar-nav{
                    align-items:center;
                }

            /* Optional: fix icon vertical offset */
                .search-trigger i{
                    font-size:16px;
                    line-height:1;
                }

    /*  SEARCH ITEM */
        .search-nav-item{
            position: relative !important;
            width: auto !important;
            display: inline-flex !important;
            align-items: center !important;
        }

/* =========================================================
   NAV SEARCH FORM
========================================================= */
    .nav-search-form{
        display:flex !important;

        flex-direction:row !important;

        align-items:center !important;

        gap:10px;

        width:100%;
    }


    /* INPUT */
    .nav-search-form input{

        flex:1 !important;

        width:auto !important;

        min-width:0;

        height:42px;

        margin:0 !important;

        display:block;

        padding:0 14px;

        border:none;

        outline:none;

        border-radius:10px;

        background:
            rgba(255,255,255,.06);

        color:#ffffff;
    }


    /* BUTTON */
    .nav-search-form button{

        width:42px !important;

        height:42px !important;

        min-width:42px;

        flex-shrink:0;

        display:flex !important;

        align-items:center;

        justify-content:center;

        margin:0 !important;

        padding:0 !important;

        border:none;

        border-radius:10px;

        background:
            linear-gradient(
                135deg,
                #d4af37,
                #f4d67a
            );

        color:#001841;

        cursor:pointer;
    }

/* =========================
   HERO
========================= */
    #hero .carousel-item{
        margin-top: 70px;
        height:65vh;
        background-size:cover;
        background-position:center;
    }

    .carousel-overlay{
        /*background: linear-gradient(
            rgba(7,26,51,0.85),
            rgba(7,26,51,0.4),
            rgba(7,26,51,0)
        );*/
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .carousel-overlay h1,
    .carousel-overlay h2,
    .carousel-overlay h3,
    .carousel-overlay h5{
        background: linear-gradient(
            180deg,
            #f5d97a,
            #d4af37
        );

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        text-shadow:
            0 2px 10px rgba(0,0,0,0.6);
    }

    .carousel-overlay h1{
        font-size: 2.8rem;
        font-weight: 700;
    }

    /*  Video Slider */
        .video-slide{
            margin-top: 70px;
            height: 65vh;
            position: relative;
        }

        .video-slide iframe{
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }

/* =========================
    FEATURES (UPDATED SIZE CONTROL)
========================= */
    #features{
        position: relative;
        transform: translateY(-110px);

        margin-top: -60px;   /* overlaps hero */
        margin-bottom: -120px; /* overlaps parallax */
        /*            
        padding-top: 120px;
        padding-bottom: 80px;
        padding-bottom: 60px;*/

        background: transparent;
        overflow: visible;
        z-index: 20;
    }

    /*  Effect */
        #features::before{
            content:"";
            position:absolute;
            inset:0;

            background: radial-gradient(
                circle at center,
                rgba(212,175,55,0.08),
                transparent 70%
            );

            z-index:0;
        }
    .main-feature{
        transform: scale(1.08);
        border:1px solid var(--gold);
        box-shadow:
            0 0 25px rgba(212,175,55,0.3);
    }

    #features .container{
        position: relative;
        z-index: 1;
        padding-left:15px;
        padding-right:15px;
    }

    /* GRID CONTROL */
    #features .row{
        row-gap: 25px;
    }

    /* COLUMN FLEX FIX */
    #features .col-md-6{
        display: flex;
        justify-content: center;
    }

    /* FEATURE BOX SIZE CONTROL */
    .feature-box{
        width: 100%;
        max-width: 280px;
        min-height: 220px;

        background: rgba(10,25,55,0.75);
        border: 1px solid rgba(212,175,55,0.2);

        backdrop-filter: blur(12px);
        border-radius: 20px;

        padding: 35px 25px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        text-align: center;
        color: var(--text-main);

        position: relative;
        overflow: hidden;

        transition: all 0.35s ease;

        box-shadow:
            0 20px 60px rgba(0,0,0,0.7);
    }

    .feature-box::before{
        content:"";
        position:absolute;
        inset:0;
        background: radial-gradient(circle at top,
            rgba(212,175,55,0.25),
            transparent 60%);
        opacity:0;
        transition:.4s;
    }

    .feature-box:hover::before{
        opacity:1;
    }
    /* ICON */
    .feature-box i{
        font-size: 38px;
        color: var(--gold);
        margin-bottom: 14px;
    }

    /* TEXT */
    .feature-box h5{
        margin-bottom: 10px;
    }

    .feature-box p{
        margin-bottom: 0;
        font-size: 15px;
        color: var(--text-muted);
    }

    /* HOVER EFFECT */
    .feature-box:hover{
        transform: translateY(-10px) scale(1.03);
        border-color: var(--gold);
    }

/* =========================
   PARALLAX (FIXED REMOVED)
========================= */
    .parallax{
        margin-top: 0;
        padding: 120px 20px 100px;         
        text-align:center;
    }

    .parallax h2{
        background: rgba(0,0,0,0.6);
        padding:15px 20px;
        border-radius:10px;
    }

/* =========================
   RADIO SECTION
========================= */
    .radio-section{
        background:
            linear-gradient(
                rgba(7,26,51,0.85),
                rgba(7,26,51,0.85)
            ),
            url('');

        background-size: cover !important;
        background-position: center !important;

        overflow:hidden !important;
    }

    .radio-section .container{
        position:relative;
        z-index:1;
    }


    /* =========================
       SLIDER CONTROLS
    ========================= */
        .slider-controls{
            display:flex;
            justify-content:center;
            gap:12px;
            margin-bottom:20px;
        }

        .slider-controls button{
            width:45px;
            height:45px;
            border:none;
            border-radius:50%;

            background: linear-gradient(145deg, var(--gold), #b8962e);
            color: #071a33;
            font-weight: bold;

            transition:.3s;
        }

        .slider-controls button:hover{
            transform:scale(1.08);
            background: linear-gradient(145deg, #f5d76e, var(--gold));
        }

        .station-slider-wrapper{
            display:flex;
            align-items:center;
            gap:12px;
        }

        /* SIDE ARROWS */
        .slider-arrow{
            width:48px;
            height:48px;

            border:none;
            border-radius:50%;

            background: linear-gradient(145deg, var(--gold), #b8962e);
            color: #071a33;
            font-weight: bold;

            flex-shrink:0;

            transition:.3s;

            display:flex;
            align-items:center;
            justify-content:center;

            box-shadow:
                0 6px 20px rgba(0,0,0,0.3);
        }

        .slider-arrow:hover{
            transform:scale(1.08);
            background:#2563eb;
        }


    /* =========================
       STATION GRID
    ========================= */
        .station-grid{
            display:flex;
            gap:16px;

            overflow-x:auto;
            overflow-y:hidden;

            scroll-behavior:smooth;
            scroll-snap-type:x mandatory;

            padding:10px 5px 20px;

            scrollbar-width:none;

            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .station-grid::-webkit-scrollbar{
            display:none;
        }

    /* =========================
       STATION BUTTON
    ========================= */
        .station-btn{
            min-width:190px;
            max-width:190px;
            height:170px;

            flex:0 0 auto;

            scroll-snap-align: start;
            scroll-snap-align: center;

            cursor:pointer;
        }

    /* =========================
       FLIP EFFECT
    ========================= */
        .flip-inner{
            position:relative;
            width:100%;
            height:100%;

            transition:transform 0.6s;
            transform-style:preserve-3d;
        }

        .station-btn.flipped .flip-inner{
            transform:rotateY(180deg);
        }

        .flip-front,
        .flip-back{
            position:absolute;

            width:100%;
            height:100%;

            border-radius:18px;

            backface-visibility:hidden;

            display:flex;
            align-items:center;
            justify-content:center;
            flex-direction:column;

            overflow:hidden;
        }

        /* FRONT */
            .flip-front{
                background:rgba(255,255,255,0.95);

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

                box-shadow:
                    0 10px 30px rgba(0,0,0,0.35);
            }

            .flip-front img{
                width:100%;
                height:100%;

                object-fit:contain;

                padding:12px;
            }

        /* BACK */
            .flip-back{
                background:
                    linear-gradient(
                        145deg,
                        #2563eb,
                        #1d4ed8
                    );

                color:#fff;

                transform:rotateY(180deg);

                text-align:center;

                padding:14px;

                font-size:14px;

                box-shadow:
                    0 10px 30px rgba(0,0,0,0.35);
            }

            .flip-back p{
                margin-bottom:8px;
                font-weight:bold;
            }

            /*  Click To Play Design */                
                .station-cta{
                    margin-top:10px;

                    display:inline-flex;
                    align-items:center;
                    gap:6px;

                    padding:6px 12px;

                    font-size:12px;
                    font-weight:600;
                    letter-spacing:0.3px;

                    color:#071a33;

                    background: linear-gradient(145deg, #f5d97a, #d4af37);
                    border-radius:999px;

                    box-shadow:
                        0 5px 15px rgba(212,175,55,0.4),
                        inset 0 0 4px rgba(255,255,255,0.3);

                    transition: all 0.25s ease;
                }

                /* hover effect */
                .station-btn:hover .station-cta{
                    transform: scale(1.05);
                    box-shadow:
                        0 8px 20px rgba(212,175,55,0.6);
                }

                /* icon animation */
                .station-cta i{
                    transition: transform 0.25s ease;
                }

                .station-btn:hover .station-cta i{
                    transform: scale(1.2);
                }

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

    @media(min-width:1200px){
        .feature-box{
            max-width: 300px;
        }
    }

    @media (min-width: 992px){
        .navbar-nav{
            align-items:center;
        }
    }

    /*  MOBILE MENU FIX */
        @media (max-width: 991.98px){

            .navbar-nav{
                align-items: flex-start !important;
                text-align: left;
                width:100%;
            }

            .navbar-nav .nav-item{
                width:100%;
            }

            .navbar-nav .nav-link{
                justify-content: flex-start;
                text-align:left;
                width:100%;
            }

            /* Fix icon + text alignment */
            .navbar-nav .nav-link i{
                margin-right:10px;
            }

            /* SEARCH ITEM */
            .search-trigger{
                width:auto !important;
            }

            /*  SEARCH POPUP */
                .search-popup{
                    position: absolute !important;

                    top: 50% !important;
                    left: 30px !important;

                    right: auto !important;

                    width: 180px;

                    /* CRITICAL RESET */
                    transform: translateY(-50%) !important;

                    margin: 0 !important;

                    opacity: 0;
                    pointer-events: none;
                }

                .search-popup.active{
                    opacity: 1;
                    pointer-events: auto;

                    /* CRITICAL RESET */
                    transform: translateY(-50%) !important;
                }

                /*  ARROW */
                    .search-popup::before{
                        top: 50%;
                        left: -12px;
                        right: auto;

                        transform: translateY(-50%);

                        border-width: 6px;
                        border-style: solid;

                        border-color:
                            transparent
                            rgba(7,26,51,0.95)
                            transparent
                            transparent;
                    }

            /*  FORCE search item to shrink to icon size only */
                .navbar-nav .search-nav-item{
                    width: auto !important;
                    flex: 0 0 auto !important;

                    position: relative !important;

                    display: inline-flex !important;
                    align-items: center !important;
                }

                /* SEARCH POPUP */
                .navbar-nav .search-nav-item .search-popup{
                    position: absolute !important;

                    top: 50% !important;
                    left: 28px !important;

                    transform: translateY(-50%) !important;

                    width: 180px;

                    right: auto !important;
                    margin: 0 !important;
                }

                .navbar-nav .search-nav-item .search-popup.active{
                    transform: translateY(-50%) !important;
                }
        }

    @media(max-width:991px){
        .navbar{
            background: rgba(7, 26, 51, 0.95) !important;
            backdrop-filter: blur(10px);
        }

        .navbar-collapse{
            background: rgba(7, 26, 51, 0.98);
            border-radius: 12px;
            margin-top: 10px;
            padding: 15px;

            box-shadow:
                0 10px 30px rgba(0,0,0,0.6);
        }

        .nav-link{
            color: #e5e7eb !important;
            padding: 10px 0;
        }

        .nav-link:hover{
            color: var(--gold) !important;
        }
    }


    @media(max-width:768px){

        .station-btn{
            min-width:160px;
            max-width:160px;
            height:145px;
        }

        .slider-arrow{
            width:40px;
            height:40px;
        }

        #hero .carousel-item{
            height:45vh;
        }

        .navbar,
        .contact-form{
            backdrop-filter:none;
        }

        #features{
            margin-top: -40px;
        }

        /*  branding settings */
            .brand-logo{
                width: 50px;
                height: 50px;
                top: 10px;
            }

            .brand-text-wrap{
                font-size: 18px;
                line-height: 1;
            }

            .brand-c,
            .brand-t{
                font-size: 30px;
                line-height: 1;
            }

            .brand-main{
                letter-spacing: 0;
            }

        /*  Reflections home page banner */
            ._banner{
                height:28vh;
                margin-bottom:0 !important;
                padding-bottom:0 !important;
            }

            ._banner h1{
                font-size:2.2rem;
            }


            .reflections-subtitle{
                font-size:0.7rem;
                letter-spacing:3px;
            }

            ._banner p{
                font-size:0.9rem;
                padding:0 20px;
            }
    }

/* =========================
   MEDIA
========================= */
    .media-section{            
        position: relative !important;
    }

    .media-section::before{
        content:"";
        position:absolute;
        inset:0;
    }

    .media-section h3{
        color: white;
        mix-blend-mode: difference;            
    }


    .media-section .container{
        position:relative;
        z-index:1;
    }

    .media-card{
        background: rgba(30, 41, 59, 0.85);
        border:1px solid rgba(148,163,184,0.2);
        border-radius:12px;
        backdrop-filter: blur(6px);
        transition:.3s;

        display:flex;
        flex-direction:column;
        height:100%;
    }

    .media-card h6{
        color: #ffffff !important;
        font-weight: 600;
    }
    .media-card .p-3{
        display:flex;
        flex-direction:column;
        flex-grow:1;
    }

    .media-card h6{
        min-height: 48px; /* keeps titles aligned */

    }

    .media-card p{
        flex-grow:1; /* fills space evenly */
    }
    .media-card:hover{
        transform: translateY(-6px);
    }

    .media-card img{
        width:100%;
        height:180px;
        object-fit:cover;
    }

    .media-thumb iframe{
        width:100%;
        height:180px;
    }

/* =========================
   REFLECTIONS
========================= */
    /*  Main Settings */
        #reflections{
            position: relative;
            background: transparent !important;

            background: rgba(255, 255, 255, 0.08); /* soft white transparency */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            padding: 30px;
        }

        .reflections-box{
            position: relative;
            padding: 30px;
            border-radius: 20px;

            background: rgba(7, 26, 51, 0.6);
            backdrop-filter: blur(12px);

            box-shadow:
                0 20px 60px rgba(0,0,0,0.4);

            max-width: 900px;
            margin: 0 auto; /* CENTER IT */
        }

        .reflections-box::before{
            content:"";
            position:absolute;
            inset:0;

            border-radius: inherit;

            background:
                radial-gradient(circle at 20% 30%, rgba(59,130,246,0.2), transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(212,175,55,0.2), transparent 50%);

            z-index: 0;
        }

        .reflections-box .row{
            position: relative;
            z-index: 1;
        }

        #reflections .row{
            position: relative;
            z-index:1;
        }

    /*  Card Settings */
        .reflection-card{
            position: relative;
            overflow: hidden;

            border-radius: 18px;

            background: rgba(255,255,255,0.15);
            border: 1px solid transparent;

            box-shadow:
                0 15px 40px rgba(0,0,0,0.4);

            transition: all 0.35s ease;
        }

        .reflection-card img{
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
            filter: none; /* FULL clarity */

            border-top-left-radius:18px;
            border-top-right-radius:18px;
        }

    /* IMAGE OVERLAY FOR READABILITY */

        .reflection-card h6{
            color: #ffffff !important;
            font-weight: 600;
        }

        .reflection-card p{
            color: #cbd5e1;
            font-size: 14px;
        }

        /*  hover effect */
            .reflection-card:hover{
                border: 1px solid #d4af37;
                border-color: #d4af37;

                box-shadow:
                    0 0 25px rgba(212,175,55,0.6),
                    0 25px 60px rgba(0,0,0,0.6);
            }

            .reflection-card:hover::before{
                opacity: 1;
            }

           
            .reflection-card > *{
                position: relative;
                z-index: 3;
            }

        .reflection-card::before{
            content:"";
            position:absolute;
            inset:1; /* slightly outside */

            border-radius: 18px;
            padding: 1px;

            background: linear-gradient(
                120deg,
                #f5d76e,
                #d4af37,
                #f5d76e
            );

            -webkit-mask:
                linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);

            -webkit-mask-composite: xor;
            mask-composite: exclude;

            opacity: 0;
            transition: opacity 0.3s ease;

            z-index: 0;
        }

        /*  CUT OUT CENTER */
            .reflection-card::after{
                content:"";
                position:absolute;

                top:2px;
                left:2px;
                right:2px;
                bottom:10px; /* IMPORTANT FIX */

                background: rgba(7,26,51,0.9);
                border-radius:16px;

                z-index:0;
            }


        /*  Gold accent line */
            .reflection-card .p-3{
                background: rgba(7, 26, 51, 0.85); /* dark glass */
                backdrop-filter: blur(10px);

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

                display:flex;
                flex-direction:column;
                height:100%;
            }

            .reflection-card .p-3::before{
                content:"";
                position:absolute;
                top:0;
                left:0;
                width:50px;
                height:3px;

                background: var(--gold);
            }

        /*  Readmore */                
            .reflection-readmore{
                margin-top:auto;

                display:inline-flex;
                align-items:center;
                justify-content:center;
                gap:8px;

                padding:8px 14px;

                font-size:13px;
                font-weight:600;
                letter-spacing:0.3px;

                color:#071a33;
                text-decoration:none;

                background: linear-gradient(145deg, #f5d97a, #d4af37);
                border-radius:10px;

                box-shadow:
                    0 6px 18px rgba(212,175,55,0.35),
                    inset 0 0 6px rgba(255,255,255,0.3);

                transition: all 0.25s ease;
            }

            /* ICON ANIMATION */
            .reflection-readmore i{
                transition: transform 0.25s ease;
            }

            /* HOVER */
            .reflection-readmore:hover{
                transform: translateY(-2px) scale(1.03);

                box-shadow:
                    0 10px 25px rgba(212,175,55,0.6),
                    0 0 12px rgba(212,175,55,0.5);
            }

            .reflection-readmore:hover i{
                transform: translateX(4px);
            }

            /* CLICK */
            .reflection-readmore:active{
                transform: scale(0.96);
            }

    /* =========================
       REFLECTION SLIDER
    ========================= */
        .reflection-slider-wrapper{
            display:flex;
            align-items:center;
            gap:12px;
            position: relative;
            z-index: 2;
        }

        .reflection-grid{
            display:flex;
            gap:16px;

            overflow-x:auto;
            overflow-y:hidden;

            scroll-behavior:smooth;
            scroll-snap-type:x mandatory;

            padding:10px 5px 20px;

            scrollbar-width:none;
            -webkit-overflow-scrolling: touch;
        }

        .reflection-grid::-webkit-scrollbar{
            display:none;
        }

        .reflection-grid::-webkit-scrollbar{
            display:none;
        }

        .reflection-item{
            min-width:300px;
            max-width:300px;
            flex:0 0 auto;
            scroll-snap-align:center;
        }

        .reflection-item:hover{
            transform: scale(1.05);
        }

        /* arrows (same style as player) */
        .reflection-arrow{
            width:48px;
            height:48px;
            border:none;
            border-radius:50%;

            background: linear-gradient(145deg, var(--gold), #b8962e);
            color:#071a33;

            display:flex;
            align-items:center;
            justify-content:center;

            flex-shrink:0;

            transition:.3s;
        }

        .reflection-arrow:hover{
            transform:scale(1.08);
        }

    /* =========================
       REFLECTIONS PAGE BANNER
    ========================= */
        ._banner{
            margin-top:70px;

            height:35vh;

            position:relative;

            background-size:cover;
            background-position: bottom center;

            display:flex;
            align-items:center;
            justify-content:center;
        }

        ._banner::before{
            content:"";
            position:absolute;
            inset:0;

            background:
                linear-gradient(
                    rgba(0,0,0,0.45),
                    rgba(0,0,0,0.55)
                );

            z-index:1;
        }

        ._banner-overlay{
            position:absolute;
            inset:0;
            
            background:
                linear-gradient(
                    rgba(3,10,25,0.55),
                    rgba(3,10,25,0.45)
                );

            display:flex;
            align-items:center;
            justify-content:center;
        }

        ._banner-hero-content{
            position:relative;
            z-index:2;

            padding:30px 40px;

            border-radius:24px;
            
            background:
                linear-gradient(
                    rgba(7,26,51,0.28),
                    rgba(7,26,51,0.18)
                );

            backdrop-filter: blur(4px);

            box-shadow:
                0 10px 40px rgba(0,0,0,0.25);
        }

        /* SMALL TOP LABEL */
            ._banner-subtitle{
                display:inline-block;

                margin-bottom:12px;

                color:#d4af37;

                font-size:0.8rem;
                font-weight:600;

                letter-spacing:4px;

                text-transform:uppercase;

                opacity:0.9;
            }

        ._banner h1{
            color:#fff;

            font-size:3rem;
            font-weight:700;

            text-shadow:
                0 3px 10px rgba(0,0,0,0.75),
                0 8px 30px rgba(0,0,0,0.45);
        }

        /*  HERO CONTENT */
            /*  SMALL TOP LABEL */
                .reflections-subtitle{
                    display:inline-block;

                    margin-bottom:12px;

                    color:#d4af37;

                    font-size:0.8rem;
                    font-weight:600;

                    letter-spacing:4px;

                    text-transform:uppercase;

                    opacity:0.9;
                }

            /*  MAIN TITLE */
                ._banner h1{
                    color:#fff;

                    font-size:3.4rem;
                    font-weight:700;

                    letter-spacing:1px;

                    margin-bottom:14px;

                    text-shadow:
                        0 6px 24px rgba(0,0,0,0.45);
                }

            /*  GOLD DIVIDER */
                .hero-divider{
                    width:90px;
                    height:3px;

                    margin:0 auto 18px;

                    border-radius:999px;

                    background:
                        linear-gradient(
                            90deg,
                            transparent,
                            #d4af37,
                            transparent
                        );
                }

            /*  DESCRIPTION */
                ._banner p{
                    color:#e5e7eb;

                    font-size:1rem;
                    font-weight:400;

                    max-width:650px;

                    margin:0 auto;
                    text-shadow:
                        0 2px 8px rgba(0,0,0,0.75);
                }

/* =========================
   CONTACT
========================= */
    .contact-section{
        position: relative;
        background-size: cover;
        background-position: center;

        filter: brightness(1.05) contrast(0.95);
    }

    /*  DARK OVERLAY (controls brightness) */

        .contact-section::before{
            content:"";
            position:absolute;
            inset:0;

            z-index:0;
        }

    /*  CONTENT LAYER */
        .contact-section .container{
            position: relative;
            z-index:1;
        }

    /* ALIGN LOGO + TEXT */
        .contact-info h5{
            display: flex;
            align-items: center;     /* 🔥 vertical alignment */
            gap: 10px;               /* spacing between logo & text */
            line-height: 1.2;
        }

        /* LOGO STYLE */
        .contact-logo{
            width: 42px;
            height: 42px;
            object-fit: contain;

            display: block;          /* removes inline spacing issues */
            flex-shrink: 0;          /* prevents squishing */
        }
        
    /* =========================
       LEFT PANEL (INFO)
    ========================= */
        .contact-info{
            background: rgba(7, 26, 51, 0.85); /* stronger */
            border: 1px solid rgba(212,175,55,0.25);
            backdrop-filter: blur(12px);
            border-radius: 16px;

            box-shadow:
                0 20px 60px rgba(0,0,0,0.6);
        }

        .contact-info h5{
            color:#fff;
        }

        .contact-info p{
            color:#cbd5e1;
        }

    /* CONTACT ITEMS */
        .contact-item{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:15px;
        }

        .contact-item i{
            color: var(--gold);
            font-size:16px;
            min-width:20px;
        }

        .contact-item span{
            color:#e2e8f0;
        }

    /* =========================
       FORM CONTAINER (FIXED)
    ========================= */
        .contact-form{
            background: rgba(7, 26, 51, 0.9); /* KEY FIX */
            border:1px solid rgba(212,175,55,0.25);
            backdrop-filter: blur(12px);

            border-radius: 16px;

            box-shadow:
                0 25px 70px rgba(0,0,0,0.7);

            position: relative;
        }

    /* =========================
       INPUTS (CRITICAL FIX)
    ========================= */
        .contact-form .form-control{
            background: rgba(255,255,255,0.08);
            border:1px solid rgba(255,255,255,0.25);
            color:#fff;

            padding:12px 14px;
            border-radius:10px;

            transition: all 0.25s ease;
        }

        .contact-form .form-control::placeholder{
            color:#9fb3c8;
        }

    /* FOCUS STATE */
        .contact-form .form-control:focus{
            background: rgba(255,255,255,0.12);
            border-color: var(--gold);

            box-shadow:
                0 0 0 2px rgba(212,175,55,0.25),
                0 0 10px rgba(212,175,55,0.2);

            outline:none;
        }

    /* TEXTAREA */
        .contact-form textarea{
            min-height:140px;
            resize: vertical;
        }

    /* BUTTON */
        .contact-form .btn-gold{
            margin-top:10px;
            padding:12px;
            font-size:16px;
            letter-spacing:0.5px;

            box-shadow:
                0 10px 25px rgba(212,175,55,0.3);
        }

    /* =========================
       HOVER EFFECT
    ========================= */
        .contact-info,
        .contact-form{
            transition: transform 0.3s ease;
        }

        .contact-info:hover,
        .contact-form:hover{
            transform: translateY(-5px);
        }

    /* =========================
       SUBTLE BACKGROUND GLOW
    ========================= */
        #contact{
            background: rgba(255, 255, 255, 0.08); /* soft white transparency */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;

            box-shadow: 0 8px 30px rgba(0,0,0,0.25);
        }

        #contact::after{
            content:"";
            position:absolute;
            inset:0;

            background: radial-gradient(
                circle at center,
                rgba(212,175,55,0.08),
                transparent 70%
            );

            z-index:0;
        }

/* =========================
   FOOTER
========================= */
    /*  FOOTER BASE */
        .footer-section{
            background: rgba(2, 6, 23, 0.95);
            border-top: 1px solid rgba(212,175,55,0.2);
            backdrop-filter: blur(12px);
        }

        /*  Glowing Effect */
        .footer-section::before{
            content:"";
            display:block;
            height:2px;
            background: linear-gradient(to right, transparent, #d4af37, transparent);
        }

    /*  TITLES */
        .footer-title{
            color: #f5d97a;
            font-weight: 600;
            margin-bottom: 10px;
        }

    /*  TEXT */
        .footer-text{
            color: #cbd5e1;
            font-size: 14px;
        }

    /*  LINKS */
        .footer-links{
            list-style: none;
            padding: 0;
        }

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

        /*  footer links with children */
            .footer-links li span{            
                color:#9fb3c8;

                font-size:0.95rem;
                font-weight:600;

                letter-spacing:0.3px;

                opacity:0.9;
            }

            /* CHILD LINKS */
                .footer-links .footer-child{
                    padding-left:18px;
                }

                .footer-links .footer-child a{
                    color:#cbd5e1;

                    font-size:0.92rem;
                }


        .footer-links a{
            color: #cbd5e1;
            text-decoration: none;
            transition: 0.3s;
        }

        .footer-links a:hover{
            color: #d4af37;
            padding-left: 4px;
        }

    /*  DIVIDER */
        .footer-divider{
            border-color: rgba(255,255,255,0.1);
        }

    /*  SOCIAL */
        .footer-social i{
            font-size: 18px;
            margin: 0 8px;
            color: #cbd5e1;
            cursor: pointer;
            transition: 0.3s;
        }

        .footer-social i:hover{
            color: #d4af37;
            transform: translateY(-2px);
        }

    /*  DISCLAIMER UPGRADE */
        .disclaimer-wrapper{
            position: relative;
            max-width:800px;
        }

        /* BUTTON */
        .disclaimer-toggle{
            width:100%;
            background: rgba(7,26,51,0.8);
            border:1px solid rgba(212,175,55,0.3);
            color:#f5d97a;

            padding:10px 14px;
            border-radius:10px;

            display:flex;
            justify-content:space-between;
            align-items:center;

            cursor:pointer;
        }

        /* CONTENT (hidden above) */
            .disclaimer-content{
                position:absolute;
                bottom:100%;
                left:0;
                width:100%;

                background: rgba(7,26,51,0.95);
                border:1px solid rgba(212,175,55,0.25);

                border-radius:10px 10px 0 0;

                padding:12px 14px;

                color:#cbd5e1;
                font-size:13px;

                opacity:0;
                transform: translateY(10px);
                pointer-events:none;

                transition:0.25s ease;

                box-shadow:
                    0 -10px 30px rgba(0,0,0,0.6);
            }

            .disclaimer-content p{
                text-align: justify;
            }
        /* ✅ HOVER (desktop) */
        .disclaimer-wrapper:hover .disclaimer-content{
            opacity:1;
            transform: translateY(0);
            pointer-events:auto;
        }

        /* ✅ CLICK (JS adds .active) */
        .disclaimer-wrapper.active .disclaimer-content{
            opacity:1;
            transform: translateY(0);
            pointer-events:auto;
        }

        /* ICON ROTATION */
        .disclaimer-wrapper:hover i,
        .disclaimer-wrapper.active i{
            transform: rotate(180deg);
        }

    /*  Footer branding */
        /*  ALIGN LOGO + TEXT PERFECTLY */
            .footer-title{
                display:flex;
                align-items:center;
                gap:6px; /* smaller gap between logo and text */
            }

            /*  LOGO FIX */
                .footer-section .footer-logo{
                    width:36px;
                    height:36px;
                    object-fit:contain;
                    display:block;
                }
        
            /*  BRAND LETTERS */
                .footer-section .brand-c,
                .footer-section .brand-t{
                    font-size:35px;
                    font-weight:700;

                    line-height:1;

                    text-shadow:none; /* REMOVE GLOW/SHADOW */

                    margin-right:-6px; /* pulls letters closer */
                }

            /*  RED C */
                .footer-section .brand-c{
                    color:#C90A03;
                }

            /* GOLD T */
                .footer-section .brand-t{
                    color:var(--gold);
                }

            /* MAIN WORDS */
                .footer-section .brand-main{
                    color:#e5e7eb;

                    letter-spacing:0; /* remove extra spacing */
                    margin-right:-1px; /* tighten spacing */
                }
        

        /*  MAIN TEXT */
            .footer-section .brand-main{
                color: #e5e7eb;
            }

    /* =========================
       DISCLAIMER
    ========================= */
        .disclaimer-box{
            max-width:900px;
            background: rgba(15, 23, 42, 0.95); /* slightly stronger */
            padding:18px 20px;
            border-radius:12px;
            border:1px solid rgba(212,175,55,0.25);

            color:#e2e8f0; /* FORCE readable text */
            line-height:1.6;

            box-shadow:
                0 10px 30px rgba(0,0,0,0.5);
        }

        /* Title */
        .disclaimer-box strong{
            color: var(--gold);
            display:block;
            margin-bottom:6px;
        }

        /* Text */
        .disclaimer-box small{
            font-size:13px; /* increase from default */
            color:#cbd5e1;  /* softer but readable */
        }

/* =========================
   BACK TO TOP
========================= */
    .back-to-top{
        position: fixed;
        bottom: 25px;
        right: 25px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: none;
        background: #0d6efd;
        color: #fff;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        opacity:0;
        visibility:hidden;
        transition:.3s;
        z-index:9999;
    }

    .back-to-top.show{
        opacity:1;
        visibility:visible;
    }

/* =========================
   FADE-IN
========================= */
    .fade-in{
        opacity:0;
        transform:translateY(20px);
        transition: all .6s ease;
    }

    .fade-in.show{
        opacity:1;
        transform:none;
    }

/* =========================
   OTHER SETTINGS
========================= */
    .img-fallback{
        width:100%;
        height:180px; /* SAME as images */
        
        display:flex;
        align-items:center;
        justify-content:center;

        background:#0f172a;
        color:#94a3b8;
        font-size:14px;

        border-bottom:1px solid #334155;
    }
    .reflection-card img,
    .media-card img{
        width:100%;
        height:180px;
        object-fit:cover;
    }

    .media-thumb iframe{
        height:180px;
    }

/* =========================
   Glass Effect
========================= */
    .glass{
        background: rgba(255,255,255,0.08);
        backdrop-filter: blur(14px);

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

        box-shadow:
            0 10px 40px rgba(0,0,0,0.3),
            inset 0 0 20px rgba(255,255,255,0.05);
    }

    .glass,
    .contact-form,
    .contact-info,
    .feature-box{
        color: #e5e7eb;
    }

/* =========================
   POST SETTINGS
========================= */
    section{
        position: relative;
    }

    section::before{
        content:"";
        position:absolute;
        inset:0;

        z-index:0;
    }


    .nav-link i,
    .search-trigger i{
        font-size:15px;
        vertical-align:middle;
    }

    button i,
    .reflection-readmore i,
    .station-cta i{
        font-size:14px;
    }

    /*  Messages */
        .swal2-popup.swal2-toast{
            border-radius: 12px !important;
            box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
            font-size: 14px;
        }

        /*  Theme Color Match */
        .swal2-icon.swal2-success{
            color: #d4af37 !important;
        }

    /*  Dropdown Default Icon */
        .dropdown-item i {
            opacity: 0.6;
            font-size: 0.8em;
        }

    .tiny-icon{
        font-size:9px;

        display:inline-flex;
        align-items:center;
        justify-content:center;

        vertical-align:middle;

        line-height:1;
    }

    
/* =========================
   404 PAGE
========================= */
    ._404_page{
        min-height:100vh;

        position:relative;

        display:flex;
        align-items:center;
        justify-content:center;

        overflow:hidden;

        padding:40px 20px;
    }

    /*  OVERLAY */
        ._404_overlay{
            position:absolute;
            inset:0;

            background:
                linear-gradient(
                    rgba(2,6,23,0.82),
                    rgba(7,26,51,0.78)
                );

            backdrop-filter: blur(3px);
        }

    /*  MAIN BOX */
        ._404_box{
            position:relative;
            z-index:2;

            max-width:760px;

            padding:60px 50px;

            border-radius:30px;

            background:
                linear-gradient(
                    rgba(7,26,51,0.70),
                    rgba(7,26,51,0.55)
                );

            backdrop-filter: blur(14px);

            border:1px solid rgba(212,175,55,0.15);

            box-shadow:
                0 25px 80px rgba(0,0,0,0.55);
        }

    /*  ICON */
        ._404_icon{
            width:90px;
            height:90px;

            margin:0 auto 25px;

            border-radius:50%;

            display:flex;
            align-items:center;
            justify-content:center;

            background:
                linear-gradient(
                    145deg,
                    #f5d97a,
                    #d4af37
                );

            color:#071a33;

            font-size:36px;

            box-shadow:
                0 10px 35px rgba(212,175,55,0.35);
        }

    /*  404 NUMBER */
        ._404_box h1{
            font-size:7rem;
            font-weight:700;

            line-height:1;

            margin-bottom:10px;

            color:#ffffff;

            text-shadow:
                0 5px 25px rgba(0,0,0,0.45);
        }

    /*  TITLE */
        ._404_box h2{
            color:#d4af37;

            font-size:2rem;
            font-weight:600;

            margin-bottom:20px;
        }

    /*  MESSAGE */
        ._404_text{
            color:#e5e7eb;

            font-size:1.05rem;
            line-height:1.8;

            max-width:600px;

            margin:0 auto 25px;
        }

    /*  VERSE */
        ._404_verse{
            color:#cbd5e1;

            font-style:italic;

            font-size:0.95rem;

            margin-bottom:35px;

            opacity:0.9;
        }

    ._404_verse span{
        display:block;

        margin-top:8px;

        color:#d4af37;
    }

    /*  BUTTONS */
    ._404_actions{
        display:flex;
        justify-content:center;
        gap:15px;

        flex-wrap:wrap;
    }

    /*  PRIMARY BUTTON */
        ._404_btn_primary{
            background:
                linear-gradient(
                    145deg,
                    #f5d97a,
                    #d4af37
                );

            color:#071a33;

            padding:12px 24px;

            border-radius:12px;

            font-weight:600;

            border:none;

            box-shadow:
                0 10px 25px rgba(212,175,55,0.35);

            transition:0.25s ease;
        }

    ._404_btn_primary:hover{
        transform:translateY(-2px);
    }

    /*  SECONDARY BUTTON */
    ._404_btn_secondary{
        background:rgba(255,255,255,0.08);

        color:#e5e7eb;

        padding:12px 24px;

        border-radius:12px;

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

        transition:0.25s ease;
    }

    ._404_btn_secondary:hover{
        background:rgba(255,255,255,0.14);
    }

    /*  MOBILE */
        @media(max-width:768px){

            ._404_box{
                padding:45px 25px;
            }

            ._404_box h1{
                font-size:5rem;
            }

            ._404_box h2{
                font-size:1.5rem;
            }

            ._404_text{
                font-size:0.95rem;
            }
        }

    /*  Notification Bubbles */

        .field-error-input{

                border-color:#d4af37 !important;

                box-shadow:
                    0 0 0 0.2rem
                    rgba(212,175,55,.18) !important;
        }

            .field-error-bubble{

                position:absolute;
                top:-10px;

                right:0;
                transform:translateY(-100%);

                /*  THEME COLORS */
                    background:
                        linear-gradient(
                        135deg,
                        #d4af37,
                        #f3d36a
                        );

                    color:#071a33;

            font-size:12px;
            font-weight:600;
            letter-spacing:.2px;

            padding:9px 14px;
            border-radius:12px;
            white-space:nowrap;
            z-index:9999;

                box-shadow:
                    0 10px 24px
                    rgba(212,175,55,.28);

                border:
                    1px solid
                    rgba(255,255,255,.18);

                animation:
                    fieldBubbleIn .22s ease;
            }

            .field-error-bubble::after{
            content:'';
            position:absolute;
            bottom:-7px;
            right:18px;

            border-width:7px 7px 0 7px;
            border-style:solid;

            border-color:
                #d4af37
                transparent
                transparent
                transparent;
            }

        @keyframes fieldBubbleIn{

                from{
                    opacity:0;

                    transform:
                        translateY(-88%);
                }

                to{

                    opacity:1;

                    transform:
                        translateY(-100%);
                }
            }