body {
     font-family: "Poppins", sans-serif;
     font-size: 14px;
     font-weight: 400;
     color: #0c2d34;
     text-decoration: none;
 }

 ul {
     padding: 0;
     margin: 0;
     list-style: none;
 }

 button {
     border: none;
     background-color: transparent;
     padding: 0;
 }

 .btn {
     font-size: 14px;
     padding: 6px 25px;
 }

 .fa {
     font-size: 16px;
 }

 input:focus {
     color: #FFF;
     outline: none;
     box-shadow: none;
 }

 .btn:focus {
     outline: none;
     box-shadow: none;
 }

 textarea:focus,
 textarea.form-control:focus,
 input.form-control:focus,
 select.form-select:focus,
 .form-select:focus,
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus,
 [type="text"].form-control:focus,
 [type="password"].form-control:focus,
 [type="email"].form-control:focus,
 [type="tel"].form-control:focus,
 [contenteditable].form-control:focus {
     box-shadow: inset 0 -1px 0 #fff;
 }

 /* H1 to H6 Font Size */

 h1 {
     font-size: 64px;
     line-height: 1;
     font-weight: 700;
 }

 h2 {
     font-size: 40px;
     font-weight: 600;
 }

 h3 {
     font-size: 26px;
     font-weight: 600;
 }

 h4 {
     font-size: 20px;
     font-weight: 600;
 }

 h5 {
     font-size: 18px;
     font-weight: 500;
 }

 h6 {
     font-size: 16px;
     font-weight: 400;
 }

 p {
     font-size: 16px;
     font-weight: 400;
     margin-bottom: 0;
 }

 a {
     text-decoration: none;
     outline: none !important;
     cursor: pointer;
     color: #111;
 }

 a:hover {
     color: #444444;
 }

 .form-control,
 .form-label,
 .form-select {
     font-size: 14px;
 }

 /* Navbar */


 .navbar-7 {
     background-color: #FFF;
 }

 .mobile-nav {
     height: 40px;
 }

 .sticky {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1;
 }

 .navbar-7 .navbar .navbar-brand {
     margin: 0px;
     font-family: "Poppins", sans-serif;
     font-weight: 700;
     color: #fff;
 }

 .navbar-7 .navbar .navbar-brand:hover {
     color: #efefef;
 }

 .navbar-7 .navbar-expand-lg .navbar-nav {
     margin: 0;
     margin-inline: auto !important;
     align-items: center;
 }

 .navbar-7 .navbar-expand-lg .navbar-nav .nav-item {
     margin-right: 30px;
     font-size: 16px;
     margin-right: 18px;
     font-size: 10px;
 }

 .navbar-7 .navbar-expand-lg .navbar-nav .nav-item .fa-square {
     font-size: 8px;
     color: #D9D9D9;
 }

 .navbar-7 .navbar .navbar-nav .nav-item .nav-link {
     color: #000;
     position: relative;
     font-size: 14px;
     font-weight: 500;

 }

 .navbar-7 .dropdown-menu {
     padding-block: 5px;
 }

 .navbar-7 .dropdown-item {
     font-size: 14px;
     padding: 6px;
 }

 .navbar-7 .navbar .navbar-nav .nav-item .nav-link:hover,
 .navbar-7 .navbar .navbar-nav .nav-item .nav-link.active {
     color: #000;
 }

 .navbar-7 .navbar .navbar-toggler {
     border: none;
     margin-top: 0px;
     padding: 0px;
     font-size: 18px;
     color: #000;
 }

 .navbar-7 .navbar .btn-wrap .btn {
     padding: 8px 25px;
     font-size: 14px;
     font-weight: 400;
     border-radius: 10px;
     background-color: #FF7029;
     color: #fff;
 }

 /* .navbar-7 .navbar .btn-wrap .btn:hover {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
} */

 .banner,
 .contact_us {
     padding-block: 60px;
 }

 .banner.bg_1 {
     background: url(../images/who-choose-us-bg.png);
     background-size: cover;
     background-repeat: no-repeat;
 }

 .banner h5 {
     border: 1px solid #C1E1FF;
     background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #EBF5FF 100%);
     padding: 10px;
     font-size: 15px;
     font-weight: 400;
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }

 .banner h5 i {
     color: #FF7029;
     font-size: 10px;
 }


 .banner.bg_2 h6 {
     color: #1D1DBC;
     margin-bottom: 20px;
 }


 .banner h1 {
     font-size: 40px;
     margin-bottom: 25px;
     color: #000;
     font-weight: 600;
 }

 .banner h6 {
     line-height: 1.8;
     font-size: 16px;
     font-weight: 500;
     text-align: center;
 }

 .banner p {
     font-size: 14px;
     margin-bottom: 25px;
     color: #000;
 }

 .banner .btn_sign {
     font-size: 14px;
     font-weight: 500;
     border-radius: 5px;
     background-color: #FFF;
     border: 1px solid #FF7029;
     color: #FF7029;

 }

 .banner .btn_contact {
     font-size: 14px;
     font-weight: 500;
     border-radius: 5px;
     background-color: transparent;
     background-color: #FF7029;
     color: #FFFF;
     border: 1px solid #FF7029;
 }


 .banner.bg_2 {
     background-color: #F4FAFF;
 }

 .banner.bg_2 .row {
     justify-content: center;
     background: #FFFFFF;
     padding: 60px;
 }

 .banner.bg_2 .row .banner_wrap img {
     height: 340px;
     object-fit: cover;
 }

 .our_services {
     padding-block: 50px 310px;
     background: url(../images/services_bg.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top center;
     color: #FFF;
 }

 .our_services .services_card {
     padding: 20px 45px;
     text-align: center;
 }


 .we_serve {
     margin-top: -160px;
 }

 .we_serve .bg_1 {
     background: #F4FAFF;
     padding: 30px;
 }

 .we_serve .bg_1 .btn_contact {
     background-color: #FF7029;
     color: #FFF;
     margin-top: 20px;
 }

 .we_serve .bg_1 ul li {
     font-size: 14px;
     font-weight: 400;
     margin-bottom: 10px;
 }

 .we_serve .bg_1 ul li i {
     color: #FF7029;
 }


 footer {
     background-color: #F6FAFF;
     padding-block: 30px;
     color: #000;
 }

 footer .contact_info ul li {
     font-size: 14px;
     margin-block: 12px;
 }

 footer .contact_info ul li i {
     border-width: 1px;
     border-style: solid;
     border-color: #FFFFFF;
     padding: 10px;
     border-radius: 50%;
     margin-right: 5px;
 }

 footer .contact_info ul li a {
     color: #000;
     padding-left: 5px;
     text-decoration: underline;
 }

 footer .footer_list ul li {
     margin-bottom: 4px;
 }

 footer .footer_list ul li a {
     font-size: 16px;
     font-weight: 400;
     color: #000;
 }

 footer .app_store {
     padding-top: 25px;
     padding-bottom: 15px;
 }

 footer .app_store ul li {
     margin-right: 10px;
 }

 footer .app_store ul li a img {
     width: 22px;
 }


 .copy_rights {
     background-color: #F6FAFF;
     text-align: center;
     color: #5D5D5D;
 }


 .contact_wrap_text {
     display: flex;
     align-items: baseline;
     margin-block: 25px;
 }

 .contact_wrap_text .contact_wrap_text_number {
     border: 1px solid #000000;
     width: 25px;
     height: 25px;
     line-height: 25px;
     text-align: center;
     margin-right: 12px;
 }

 .contact_wrap_text .contact_wrap_sub_text h5 {
     margin-bottom: 4px;
 }

 .contact_wrap_bg {
     background-color: #EFF7FF;
     padding-block: 40px;
 }

 .contact_wrap_bg .form-group {
     margin-bottom: 20px;
 }

 .contact_wrap_bg .form-group .form-control {
     background-color: #FFFFFF;
     border: none;
 }

 .contact_us .contact_wrap_bg .btn_submit {
     width: 100%;
     margin-top: 20px;
     background-color: #FF7029;
     color: #FFF;
 }

 .why_choose_us {
     padding-block: 80px;
     background: url(../images/who-choose-us-bg.png);
     background-size: cover;
     background-repeat: no-repeat;
 }


 .why_choose_us .bg_2 {
     color: #FFF;
     text-align: center;
     background: url(../images/who_chooose_us.png), linear-gradient(180deg, #FF7029 0%, #001A33 100%);
     padding-block: 50px;
 }

 .why_choose_us .bg_2 ul {
     margin-inline: auto;
     width: 55%;
 }

 .why_choose_us .bg_2 ul li {
     margin-bottom: 10px;
 }

 :root {
     --primary-color: #FF7029;
     --secondary-color: #E3F1FF;
     --dark-color: #141414;
     --text-color: #212121;
     --light-bg: #f8f9fa;
     --accent-color: #FF7A26;
 }

 /* 2. Global Nav & Layout */
 .navbar-container {
     background-color: #ffffff;
     transition: all 0.3s ease;
 }

 .navbar-container.scrolled {
     box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
 }

 .logo-img {
     height: 60px;
     transition: transform 0.3s ease;
 }

 .logo-img:hover {
     transform: scale(1.02);
 }

 /* 3. Desktop Navigation Links */
 .nav-item-link {
     position: relative;
     color: var(--text-color);
     text-decoration: none;
     padding: 0.5rem 1rem;
     font-weight: 500;
     display: inline-flex;
     align-items: center;
     font-size: 15px;
     transition: color 0.3s ease;
 }

 .nav-item-link:hover {
     color: #FF7029;
 }

 /* Underline Hover Effect */
 .nav-item-link::after {
     content: '';
     position: absolute;
     left: 50%;
     bottom: 4px;
     width: 0;
     height: 2px;
     background-color: #FF7029;
     transition: width 0.35s ease, left 0.35s ease;
     transform: translateX(-50%);
 }

 .nav-item-link:hover::after {
     width: calc(100% - 2rem);
 }

 /* 4. CTA Button Styles (With Bootstrap Overrides) */
 .btn-primary {
     position: relative;
     display: inline-flex;
     align-items: center;
     font-weight: 400;
     gap: 10px;
     padding: 10px 24px;
     border-radius: 3px;
     background-color: var(--primary-color);
     color: #ffffff;
     border: 2px solid var(--primary-color);
     text-decoration: none;
     overflow: hidden;
     z-index: 1;
     cursor: pointer;
     transition: color 0.4s ease, border-color 0.4s ease;
 }

 .btn-primar {
     position: relative;
     display: inline-flex;
     align-items: center;
     font-weight: 400;
     gap: 10px;
     padding: 10px 24px;
     border-radius: 3px;
     background-color: var(--primary-color);
     color: #ffffff;
     border: 2px solid var(--primary-color);
     text-decoration: none;
     overflow: hidden;
     z-index: 1;
     cursor: pointer;
     transition: color 0.4s ease, border-color 0.4s ease;
 }

 .btn-primar ::hover {
     color: #ffffff;
 }

 .btn-primary svg path {
     transition: stroke 0.4s ease;
     stroke: #ffffff;
 }

 /* Circle Expansion Effect */
 .btn-primary::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 150%;
     aspect-ratio: 1;
     border-radius: 50%;
     transform: translate(-50%, -50%) scale(0);
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: -1;
     background-color: #ffffff;
 }

 .btn-primary:hover::before {
     transform: translate(-50%, -50%) scale(1);
 }

 .btn-primary:hover {
     color: var(--primary-color) !important;
     border-color: var(--primary-color) !important;
     background-color: var(--primary-color) !important;
 }

 .btn-primary:hover svg path {
     stroke: var(--primary-color) !important;
 }

 /* 5. Arrow Hover Animations */
 .cube-arrow {
     display: inline-flex;
     transform-style: preserve-3d;
 }

 .anim-enter .cube-arrow {
     animation: flyOutIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

 .anim-leave .cube-arrow {
     animation: flyOutLeave 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

 @keyframes flyOutIn {
     0% {
         transform: translate(0, 0);
         opacity: 1;
     }

     40% {
         transform: translate(15px, -15px);
         opacity: 0;
     }

     50% {
         transform: translate(-15px, 15px);
         opacity: 0;
     }

     100% {
         transform: translate(0, 0);
         opacity: 1;
     }
 }

 @keyframes flyOutLeave {
     0% {
         transform: translate(0, 0);
         opacity: 1;
     }

     40% {
         transform: translate(-15px, 15px);
         opacity: 0;
     }

     50% {
         transform: translate(15px, -15px);
         opacity: 0;
     }

     100% {
         transform: translate(0, 0);
         opacity: 1;
     }
 }

 /* ---------------------------------------------------
       Outline Button Styles (.btn-outline-primary) 
       --------------------------------------------------- */
 .btn-outline-primary {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 24px;
     border-radius: 3px;
     background-color: transparent;
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
     text-decoration: none;
     overflow: hidden;
     z-index: 1;
     cursor: pointer;
     transition: color 0.4s ease, border-color 0.4s ease;
 }

 .btn-outline-primar {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 24px;
     border-radius: 3px;
     background-color: transparent;
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
     text-decoration: none;
     overflow: hidden;
     z-index: 1;
     cursor: pointer;
     transition: color 0.4s ease, border-color 0.4s ease;
 }

 .btn-outline-primary svg path {
     transition: stroke 0.4s ease;
     stroke: var(--primary-color);
 }

 .btn-outline-primary::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 150%;
     aspect-ratio: 1;
     border-radius: 50%;
     transform: translate(-50%, -50%) scale(0);
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: -1;
     background-color: var(--primary-color);
     /* Circle is orange */
 }

 /* Hover States */
 .btn-outline-primary:hover::before {
     transform: translate(-50%, -50%) scale(1);
 }

 .btn-outline-primary:hover {
     color: #ffffff !important;
     /* Text turns white */
     border-color: var(--primary-color) !important;
     background-color: transparent !important;
     /* Forces Bootstrap blue to hide */
 }

 .btn-outline-primary:hover svg path {
     stroke: #ffffff !important;
     /* Arrow turns white */
 }

 /* 6. Mobile Drawer */
 .main-nav {
     position: fixed;
     top: 0;
     left: -100%;
     width: 85%;
     max-width: 320px;
     height: 100vh;
     background: var(--primary-color);
     display: flex;
     flex-direction: column;
     padding: 80px 30px 30px;
     gap: 15px;
     box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
     transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 999;
     overflow-y: auto;
 }

 .main-nav.show {
     left: 0;
 }

 .main-nav .nav-item {
     color: #ffffff;
     text-decoration: none;
     font-size: 16px;
     font-weight: 500;
     padding: 10px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     transition: color 0.3s ease;
 }

 .main-nav .nav-item:hover {
     color: var(--secondary-color);
 }

 /* 7. Mobile Hamburger Menu */
 .mobile-menu-toggle {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 28px;
     height: 20px;
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
     z-index: 1000;
 }

 .mobile-menu-toggle .bar {
     width: 100%;
     height: 2px;
     background-color: #000000;
     border-radius: 2px;
     transition: all 0.3s ease;
 }

 .mobile-menu-toggle.active .bar:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px);
 }

 .mobile-menu-toggle.active .bar:nth-child(2) {
     opacity: 0;
 }

 .mobile-menu-toggle.active .bar:nth-child(3) {
     transform: rotate(-45deg) translate(7px, -8px);
 }

 /* 8. Responsive Breakpoints */
 @media (max-width: 991px) {
     .mobile-menu-toggle {
         display: flex;
     }

     .desktop-menu {
         display: none !important;
     }

     .navbar-brand {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
     }
 }

 @media (max-width: 1024px) {
     .logo-img {
         height: 50px;
         padding-bottom: 10px;
     }
 }


 /* --- Hide the Default System Cursor --- */
 /* body, a, button, .btn {
        cursor: none !important;
    } */

 /* --- The Ultimate Sun Cursor Wrapper --- */
 #realistic-sun-cursor {
     position: fixed;
     top: 0;
     left: 0;
     width: 20px;
     height: 20px;
     pointer-events: none;
     z-index: 10000;
     transform: translate(-50%, -50%);
 }

 /* 1. The Core (Now with a violent micro-pulse) */
 /* .sun-core {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 10px; height: 10px;
        background: #FFDF00;
        border-radius: 50%;
        box-shadow: 0 0 10px #ffffff, 0 0 25px #FFDF00, 0 0 45px #FF7029;
        z-index: 3;
        animation: core-throb 0.3s infinite alternate ease-in-out;
    } */

 /* 2. Boiling Plasma Layers */
 .sun-plasma-1,
 .sun-plasma-2 {
     position: absolute;
     top: 0;
     left: 0;
     width: 60%;
     height: 60%;
     filter: blur(4px);
 }

 /* Inner Yellow/Orange Corona */
 /* .sun-plasma-1 {
        background: radial-gradient(circle, #FFDF00 15%, #FF7029 50%, transparent 75%);
        opacity: 0.9;
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        animation: boil-forward 2.5s linear infinite;
        z-index: 2;
    }

    /* Outer Deep Red/Orange Flares */
 /* .sun-plasma-2 {
        background: radial-gradient(circle, transparent 20%, #e63900 60%, transparent 85%);
        opacity: 0.7;
        border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
        animation: boil-reverse 3.5s linear infinite;
        z-index: 1;
    } */

 /* --- The Animations --- */
 /* @keyframes core-throb {
        0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.9; }
        100% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
    } */
 /* 
    @keyframes boil-forward {
        0%   { transform: rotate(0deg) scale(0.9);   border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
        50%  { transform: rotate(180deg) scale(1.1); border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
        100% { transform: rotate(360deg) scale(0.9); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    } */
 /* 
    @keyframes boil-reverse {
        0%   { transform: rotate(360deg) scale(1.1); }
        50%  { transform: rotate(180deg) scale(0.85); }
        100% { transform: rotate(0deg) scale(1.1); }
    } */

 /* --- Realistic Fire Embers --- */
 /* .fire-ember {
        position: fixed;
        pointer-events: none;
        border-radius: 50%;
        z-index: 9999;
        will-change: transform, opacity, background; 
        
        animation: ember-swirl var(--ember-life) ease-out forwards;
    } */

 /* Notice how the drift swings back and forth using percentages! */
 /* @keyframes ember-swirl {
        0% { 
            transform: scale(1) translate(0, 0); 
            opacity: 1; 
            background-color: #FFDF00; 
            box-shadow: 0 0 8px #FFDF00;
        }
        25% { 
            transform: scale(0.8) translate(calc(var(--drift) * 0.5), -20px); 
            background-color: #FF7029;
        }
        50% { 
            transform: scale(0.6) translate(calc(var(--drift) * 1.2), -45px); 
            background-color: #e63900; 
        }
        75% { 
            transform: scale(0.4) translate(calc(var(--drift) * 0.8), -70px); 
            background-color: #555555; 
            opacity: 0.8;
        }
        100% { 
            transform: scale(0) translate(var(--drift), -90px); 
            opacity: 0; 
            background-color: #000000;
        }
    } */

 /* --- The Ultimate Sun Cursor Wrapper --- */
 /* #realistic-sun-cursor {
        position: fixed;
        top: 0; left: 0;
        width: 60px; height: 60px;
        pointer-events: none; 
        z-index: 10000;
        transform: translate(-50%, -50%);
        
        transition: opacity 0.3s ease;
    }

    #realistic-sun-cursor.cursor-hidden {
        opacity: 0 !important;
    } */


 /* --- Footer Section --- */

 .site-footer {
     background-color: #ffffff;
     border-top: 1px solid #f9f9f9;
 }

 /* Paragraph Text */
 .footer-text {
     font-size: 0.95rem;
     line-height: 1.7;
     color: #7a7a7a !important;
 }

 /* Links Formatting */
 .footer-links li {
     margin-bottom: 15px;
 }

 .footer-links a {
     color: #4a4a4a;
     text-decoration: none;
     font-size: 0.95rem;
     transition: color 0.3s ease;
 }

 .footer-links a:hover {
     color: var(--primary-color, #FF7029);
 }

 /* Contact Detail Boxes */
 .footer-icon-box {
     width: 36px;
     height: 36px;
     background-color: var(--primary-color, #FF7029);
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     flex-shrink: 0;
     /* Prevents the box from shrinking when address text wraps */
     margin-top: 2px;
 }

 .footer-contact-label {
     color: var(--primary-color, #FF7029);
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 2px;
 }

 .footer-contact-text {
     color: #4a4a4a;
     font-size: 0.8rem;
     line-height: 1.6;
 }

 /* Divider for copyright bar */
 .footer-bottom {
     border-top: 1px solid #eaeaea;
 }

 * {
     cursor: url('https://cdn.cursors-4u.net/previews/sun-4-4b391f82-32.webp') 32 32, auto !important;
 }


 /* --- Contact Section --- */

 .contact-section {
     /* Replaced the dark image gradient with a solid brand color */
     background: var(--primary-color, #FF7029);
 }

 /* Left Side Typography */
 .contact-label {
     color: #ffffff;
     /* Changed from orange to white */
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 0.5px;
     margin-bottom: 8px;
     text-transform: uppercase;
 }

 .contact-text {
     color: #ffffff;
     font-size: 1.1rem;
     font-weight: 400;
     line-height: 1.6;
 }

 /* Right Side Form Wrapper */
 .contact-form-wrapper {
     background-color: #ffffff;
     padding: 50px 40px;
     border-radius: 4px;
     /* Softened the shadow slightly so it doesn't look muddy against the bright orange */
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }

 /* --- Rolling Text Hover Effect (Flies Out of Button) --- */
    
    /* 1. The Wrapper */
    .text-roll-wrapper {
        display: inline-flex;
        line-height: 1.2;       
        vertical-align: middle;
        /* REMOVED overflow: hidden; so the text can travel all the way to the button's edges! */
    }

    /* 2. The Moving Text */
    .text-roll-inner {
        position: relative;
        display: inline-block;
        /* Made the transition slightly slower since the text has to travel further */
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); 
    }

    /* 3. The Hidden Duplicate Text */
    .text-roll-inner::after {
        content: attr(data-text);
        position: absolute;
        top: 250%;             /* Pushed way down outside the bottom of the button */
        left: 0;
        width: 100%;
        height: 100%;
        white-space: nowrap;
    }

    /* 4. The Hover Trigger */
    .hover-anim-btn:hover .text-roll-inner {
        transform: translateY(-250%); /* Shoots the original text out the top, and pulls the new text up to center */
    }