/* =========================================================
   Game Animation Plugin Frontend CSS
   ---------------------------------------------------------
   Important comments are added section-wise so it is easy
   to understand and update later.
   ========================================================= */

/* =========================================================
   01. Root Theme Variables
   These colors control the complete frontend color system.
   ========================================================= */
:root{
    --ga-bg:#060b08;
    --ga-bg-soft:#09100d;
    --ga-panel:#0b130f;
    --ga-panel-soft:rgba(255,255,255,.03);
    --ga-border:rgba(151,166,154,.17);
    --ga-border-strong:rgba(115,183,255,.26);
    --ga-text:#edf4f0;
    --ga-muted:#a4b0a8;
    --ga-blue:#39c095;
    --ga-blue-strong:#005B3E;
    --ga-gold:#c8a866;
    --ga-shadow:0 28px 70px rgba(0,0,0,.38);
    --ga-radius:2px;
    --ga-heading-font:'Teko', sans-serif;
    --ga-body-font:'Inter', sans-serif;
}

/* =========================================================
   02. Global Shell
   Main page wrapper class: .ga-page-shell
   Background effect class: .ga-page-bg
   ========================================================= */
.ga-page-shell{
    position:relative;
    width:100vw;
    max-width:100vw;
    margin-top:-100px;
    margin-bottom:-50px;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    overflow:hidden;
    background:var(--ga-bg);
    color:var(--ga-text);
    font-family:var(--ga-body-font);
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}

.ga-page-shell,
.ga-page-shell *{
    box-sizing:border-box;
}

.ga-page-shell h1,
.ga-page-shell h2,
.ga-page-shell h3,
.ga-page-shell h4,
.ga-page-shell p{
    color:inherit;
}

.ga-page-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 10% 12%, rgba(105,173,255,.09) 0, rgba(105,173,255,0) 22%),
        radial-gradient(circle at 82% 20%, rgba(105,173,255,.07) 0, rgba(105,173,255,0) 25%),
        radial-gradient(circle at 26% 60%, rgba(146,164,109,.08) 0, rgba(146,164,109,0) 18%),
        radial-gradient(circle at 78% 74%, rgba(128,156,117,.07) 0, rgba(128,156,117,0) 23%),
        radial-gradient(rgba(131,149,117,.08) 0 24px, transparent 25px),
        radial-gradient(rgba(105,173,255,.035) 0 18px, transparent 19px),
        linear-gradient(180deg, #050907 0%, #050907 100%);
    background-size:auto,auto,auto,auto,180px 180px,120px 120px,auto;
    background-position:center,center,center,center,0 0,40px 58px,center;
    opacity:1;
}

.ga-container{
    width:min(1500px, calc(100% - 64px));
    margin-inline:auto;
    position:relative;
    
    z-index:1;
}

.ga-section{
    position:relative;
    z-index:1;
    padding:82px 0;
}

/* =========================================================
   03. Shared Typography
   Hero and section title class: .ga-display-title
   Blue highlight span class: .ga-accent
   ========================================================= */
.ga-display-title,
.ga-card-title,
.ga-process-title,
.ga-footer-title,
.ga-logo-text{
    font-family:var(--ga-heading-font);
    text-transform:uppercase;
    letter-spacing:.02em;
    margin:0;
    line-height:.86;
}

.ga-display-title{
    font-size:clamp(80px, 3vw, 120px);
    font-weight:700;
    color:#f3f7f4 !important;
    text-shadow:0 18px 34px rgba(0,0,0,.36);
}

.ga-section-title{
    font-size:clamp(42px, 4.7vw, 70px);
    /* line-height: 0.9; */
    /* font-size:clamp(58px, 7vw, 98px); */
}

.ga-title-line{
    display:inline;
}

.ga-accent{
    color:var(--ga-blue) !important;
}


/* Strong theme overrides so WordPress theme heading colors cannot make titles black. */
.ga-page-shell .ga-display-title,
.ga-page-shell .ga-card-title,
.ga-page-shell .ga-process-title,
.ga-page-shell .ga-footer-title,
.ga-page-shell .ga-showreel-placeholder h3{
    color:#f3f7f4 !important;
}

.ga-page-shell .ga-accent{
    color:var(--ga-blue) !important;
}

.ga-page-shell .ga-copy,
.ga-page-shell .ga-card-copy,
.ga-page-shell .ga-faq-answer p,
.ga-page-shell .ga-footer-copy,
.ga-page-shell .ga-footer-meta{
    color:var(--ga-muted) !important;
}

.ga-copy,
.ga-card-copy,
.ga-faq-answer p,
.ga-footer-copy,
.ga-footer-meta{
    color:var(--ga-muted);
    line-height:1.75;
    font-size:15px;
    margin:0;
}

/* Eyebrow / small section label class */
.ga-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#d4dbc9;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.26em;
    font-weight:700;
    margin-bottom:10px;
}

.ga-eyebrow::before{
    content:"";
    width:6px;
    height:6px;
    border:1px solid var(--ga-blue);
    background:rgba(105,173,255,.15);
    display:inline-block;
}

/* =========================================================
   04. Buttons
   Primary button class: .ga-btn-primary
   Secondary button class: .ga-btn-secondary
   ========================================================= */
.ga-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 20px;
    border-radius:3px;
    text-decoration:none !important;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:10px;
    font-weight:800;
    transition:all .25s ease;
}

.ga-btn-primary{
    background:linear-gradient(180deg, #4aaf80 0%, #368764 100%);
    color:#071019 !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.07) inset, 0 10px 30px rgba(105,173,255,.18);
}

.ga-btn-secondary{
    color:var(--ga-text) !important;
    border:1px solid var(--ga-border);
    background:rgba(255,255,255,.02);
}

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

.ga-btn-secondary:hover{
    color:var(--ga-blue) !important;
    border-color:var(--ga-border-strong);
}

/* =========================================================
   05. Top Header / Navigation
   Header shell class: .ga-topbar
   ========================================================= */
.ga-topbar{
    position:relative;
    z-index:2;
    padding:22px 0 0;
}

.ga-topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.ga-logo-wrap{
    display:flex;
    align-items:center;
    gap:10px;
}

.ga-logo-mark{
    width:16px;
    height:16px;
    border:1px solid var(--ga-blue);
    background:linear-gradient(135deg, rgba(105,173,255,.24), rgba(105,173,255,.03));
    box-shadow:0 0 20px rgba(105,173,255,.2);
}

.ga-logo-text{
    font-size:30px;
    font-weight:600;
    color:#f3f7f4 !important;
    letter-spacing:.08em;
}

.ga-top-nav{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.ga-top-nav a{
    color:#c5d0c9;
    text-decoration:none;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.18em;
}

.ga-top-nav a:hover,
.ga-top-nav a:focus{
    color:var(--ga-blue) !important;
}

.ga-nav-cta{
    border:1px solid var(--ga-border-strong);
    padding:10px 14px;
    border-radius:3px;
}

/* =========================================================
   06. Hero Section
   Hero wrapper class: .ga-hero-frame
   Hero title class: .ga-hero-title
   ========================================================= */
.ga-hero-section{
    padding-top:18px;
}

.ga-hero-frame{
    border:1px solid var(--ga-border);
    background:
        linear-gradient(90deg, rgba(7,12,10,.98) 0%, rgba(7,12,10,.9) 48%, rgba(7,12,10,.58) 100%),
        radial-gradient(circle at 80% 20%, rgba(105,173,255,.1), rgba(105,173,255,0) 26%);
    box-shadow:var(--ga-shadow);
    position:relative;
    min-height:650px;
}

.ga-hero-frame::before{
    content:"";
    position:absolute;
    inset:16px;
    border:1px solid rgba(255,255,255,.04);
    pointer-events:none;
}

.ga-hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
    align-items:center;
    gap:44px;
    padding:78px 70px 58px;
}

.ga-hero-content{
    max-width:700px;
}

.ga-hero-title{
    margin-bottom:16px;
}

.ga-hero-copy{
    max-width:540px;
    margin-bottom:24px;
}

.ga-button-row{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.ga-stat-row{
    display:flex;
    gap:48px;
    flex-wrap:wrap;
    margin-top:34px;
    padding-top:20px;
    border-top:1px solid var(--ga-border);
}

.ga-stat-box strong{
    display:block;
    font-size:26px;
    font-weight:800;
    line-height:1;
    color:#ffffff;
}

.ga-stat-box span{
    display:block;
    margin-top:5px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--ga-muted);
}

.ga-hero-media,
.ga-cta-media{
    display:flex;
    justify-content:flex-end;
}

/* Generic image frame used in hero and CTA */
.ga-media-frame{
    width:100%;
    height:470px;
    border:1px solid var(--ga-border);
    background:linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
    overflow:hidden;
}

.ga-media-frame img,
.ga-card-media img,
.ga-project-media img,
.ga-showreel-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.ga-image-placeholder{
    width:100%;
    height:100%;
    background:
        radial-gradient(circle at 50% 40%, rgba(105,173,255,.17), rgba(105,173,255,0) 34%),
        linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
}

/* =========================================================
   07. Section Head Layout
   Section title is left and paragraph is right.
   ========================================================= */
.ga-section-head{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 520px);
    align-items:end;
    gap:70px;
    margin-bottom:28px;
}

.ga-section-head-compact{
    grid-template-columns:1fr;
    margin-bottom:22px;
}

/* =========================================================
   08. Services Grid
   Service card class: .ga-service-card
   Service title class: .ga-card-title
   ========================================================= */
.ga-service-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.ga-service-card,
.ga-project-card,
.ga-benefit-card,
.ga-testimonial-card{
    position:relative;
    width:100%;
    max-width:100%;
   /* background-color: red; */
    margin-right:0;
    overflow:hidden;
    border:1px solid var(--ga-border);
    background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.01));
    box-shadow:0 8px 20px rgba(0,0,0,.16);
}

/* ===========================
   Process Card
=========================== */

.ga-process-card{
    position:relative;
    flex:1;
    min-width:280px;

    padding:42px 36px;

    min-height:235px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;

    border-right:1px solid rgba(255,255,255,.08);
}

.ga-process-card:last-child{
    border-right:none;
}

/* Background Overlay */

.ga-process-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(180deg,
    rgba(0,0,0,.15),
    rgba(0,0,0,.35));
    z-index:0;
}

/* Content */

.ga-process-card>*{
    position:relative;
    z-index:2;
}

/* Number */

.ga-process-card .ga-step-number{
    font-size:60px;
    line-height:1;
    font-weight:900;
    color:#6aa7ff;
    margin-bottom:18px;
    font-family:"Bebas Neue",sans-serif;
    letter-spacing:1px;
}

/* Heading */

.ga-process-card h3{
    font-size:clamp(28px, 2.2vw, 34px);
    line-height:1;
    color:#fff;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:20px;
    font-family:"Bebas Neue",sans-serif;
}

/* Description */

.ga-process-card p{
    margin:0;
    font-size:15px;
    line-height:1.8;
    color:#c5c5c5;
    max-width:95%;
}

/* Hover */

.ga-process-card:hover{
    background:rgba(255,255,255,.02);
}

.ga-process-card:hover .ga-step-number{
    color:#87bbff;
}

.ga-service-card{
    min-height:390px;
}

.ga-card-media{
    position:absolute;
    inset:0;
    opacity:0.8;
    overflow:hidden;
    z-index:0;
}

.ga-card-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(8,14,11,.06) 60%, rgba(8,14,11,.82) 100%, rgba(8,14,11,.94) 100%);
}

.ga-card-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:390px;
    padding:18px;
}

.ga-card-index{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:#d5dccf;
    margin-bottom:auto;
}

.ga-card-title{
    font-size:clamp(28px, 2.2vw, 34px);
    font-weight:600;
    color:#f3f7f4 !important;
    margin-bottom:8px;
}

.ga-card-copy{
    font-size:13px;
}

/* Row of software chips under services */
.ga-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    padding-top:26px;
}

.ga-chip{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 16px;
    border:1px solid var(--ga-border);
    background:rgba(255,255,255,.02);
    color:#d5dccf;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.18em;
}

/* =========================================================
   09. Portfolio / Showreel Section
   Video frame class: .ga-showreel-frame
   ========================================================= */
.ga-showreel-frame{
    min-height:560px;
    max-height:560px;
    border:1px solid var(--ga-border);
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-shadow:var(--ga-shadow);
}

.ga-showreel-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px;
}

.ga-play-button{
    width:72px;
    height:72px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(105,173,255,.18);
    border:1px solid rgba(105,173,255,.4);
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.ga-showreel-placeholder h3{
    font-family:var(--ga-heading-font);
    text-transform:uppercase;
    font-size:96px;
    line-height:.84;
    margin:0 0 8px;
}

.ga-showreel-placeholder p{
    margin:0;
    color:var(--ga-gold);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.22em;
}

/* =========================================================
   10. Middle CTA Section
   CTA wrapper class: .ga-cta-frame
   ========================================================= */
.ga-cta-frame{
    border:1px solid var(--ga-border);
    display:grid;
    grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
    gap:34px;
    align-items:center;
    background:linear-gradient(90deg, rgba(8,13,11,.98) 0%, rgba(8,13,11,.88) 46%, rgba(8,13,11,.58) 100%);
    padding:48px;
}

.ga-cta-content .ga-section-title{
    margin-bottom:16px;
}

.ga-cta-content .ga-copy{
    max-width:520px;
    margin-bottom:22px;
   
}

.ga-cta-media .ga-media-frame{
    height:300px;
}

/* =========================================================
   11. Process Cards
   Process number class: .ga-process-number
   ========================================================= */
.ga-process-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:12px;
}

.ga-process-card{
    min-height:220px;
    padding:18px;
}

.ga-process-number{
    display:block;
    font-family:var(--ga-heading-font);
    font-size:54px;
    line-height:1;
    color:var(--ga-blue) !important;
    margin-bottom:6px;
}

.ga-process-title{
    font-size:clamp(28px, 2.2vw, 34px);
    font-weight:600;
    color:#f3f7f4 !important;
    margin-bottom:8px;
}

/* =========================================================
   12. Project Cards
   Project card class: .ga-project-card
   ========================================================= */
.ga-project-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
}

.ga-project-card{
    min-height:460px;
}

.ga-project-media{
    position:relative;
    height:285px;
    opacity:1;
}

.ga-project-content{
    min-height:auto;
    padding:16px 18px 20px;
}

/* =========================================================
   13. Benefits Cards
   Benefit card class: .ga-benefit-card
   ========================================================= */
.ga-benefit-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}

.ga-benefit-card{
    min-height:200px;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

/* =========================================================
   14. Testimonial Cards
   Testimonial quote class: .ga-testimonial-quote
   ========================================================= */
.ga-testimonial-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
}

.ga-testimonial-card{
    padding:26px;
}

.ga-testimonial-quote{
    color:#eef5f0;
    line-height:1.7;
    font-size:15px;
    margin:0 0 16px;
}

.ga-testimonial-name{
    color:var(--ga-blue) !important;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.18em;
}

/* =========================================================
   15. Bottom Email CTA
   Centered CTA wrapper: .ga-email-cta-frame
   ========================================================= */
.ga-email-cta-frame{
    border:1px solid var(--ga-border);
    background:linear-gradient(180deg, rgba(18,29,45,.52), rgba(255,255,255,.015));
    text-align:center;
    padding:56px 20px;
}

.ga-centered-title,
.ga-centered-copy{
    text-align:center;
}

.ga-centered-copy{
    max-width:720px;
    margin:0 auto 20px;
}

/* =========================================================
   16. FAQ Section
   FAQ item class: .ga-faq-item
   ========================================================= */
.ga-faq-container{
    max-width:920px;
    text-align:center;
}

.ga-faq-list{
    margin-top:26px;
    text-align:left;
}

.ga-faq-item{
    border-bottom:1px solid var(--ga-border);
    padding:18px 0;
}

.ga-faq-item summary{
    list-style:none;
    cursor:pointer;
    font-size:13px;
    font-weight:800;
    color:#f1f5f3;
    text-transform:uppercase;
    letter-spacing:.08em;
    position:relative;
    padding-right:32px;
}

.ga-faq-item summary::-webkit-details-marker{
    display:none;
}

.ga-faq-item summary::after{
    content:'+';
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    color:var(--ga-blue) !important;
    font-size:18px;
}

.ga-faq-item[open] summary::after{
    content:'−';
}

.ga-faq-answer{
    padding-top:12px;
}

/* =========================================================
   17. Footer Section
   Footer wrapper class: .ga-footer-section
   ========================================================= */
.ga-footer-section{
    position:relative;
    z-index:1;
    border-top:1px solid var(--ga-border);
    background:rgba(0,0,0,.22);
    padding:52px 0 26px;
}

.ga-footer-grid{
    display:grid;
    grid-template-columns:1.45fr 1fr 1fr 1fr;
    gap:28px;
}

.ga-footer-logo{
    margin-bottom:12px;
}

.ga-footer-title{
    font-size:28px;
    margin-bottom:12px;
}

.ga-footer-list{
    margin:0;
    padding:0;
    list-style:none;
}

.ga-footer-list li{
    color:var(--ga-muted);
    font-size:14px;
    line-height:1.9;
}

.ga-footer-copy{
    max-width:340px;
    margin-bottom:10px;
}

.ga-footer-meta{
    font-size:13px;
}

.ga-footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid rgba(255,255,255,.05);
    margin-top:24px;
    padding-top:18px;
    color:#8f9a93;
    font-size:12px;
}

/* =========================================================
   18. Light Motion Effect
   Card reveal animation classes are reused across sections.
   ========================================================= */
.ga-service-card,
.ga-project-card,
.ga-process-card,
.ga-benefit-card,
.ga-testimonial-card{
    animation:gaFadeUp .6s ease both;
}

.ga-service-card:nth-child(2),
.ga-project-card:nth-child(2),
.ga-process-card:nth-child(2),
.ga-benefit-card:nth-child(2){animation-delay:.06s}
.ga-service-card:nth-child(3),
.ga-project-card:nth-child(3),
.ga-process-card:nth-child(3),
.ga-benefit-card:nth-child(3){animation-delay:.12s}
.ga-service-card:nth-child(4),
.ga-process-card:nth-child(4),
.ga-benefit-card:nth-child(4){animation-delay:.18s}
.ga-service-card:nth-child(5),
.ga-process-card:nth-child(5){animation-delay:.24s}
.ga-service-card:nth-child(6){animation-delay:.3s}

@keyframes gaFadeUp{
    from{opacity:0;transform:translateY(22px)}
    to{opacity:1;transform:translateY(0)}
}

/* =========================================================
   19. Responsive Styles
   ========================================================= */
@media (max-width: 1100px){
    .ga-hero-grid,
    .ga-cta-frame,
    .ga-section-head,
    .ga-footer-grid{
        grid-template-columns:1fr;
    }

    .ga-process-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
    .ga-benefit-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .ga-service-grid,
    .ga-project-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .ga-topbar-inner{align-items:flex-start;flex-direction:column;}
}

@media (max-width: 767px){
    .ga-container{width:min(100% - 24px, 1460px)}
    .ga-section{padding:58px 0}
    .ga-hero-grid{padding:34px 24px 32px}
    .ga-hero-frame{min-height:auto}
    .ga-cta-frame{padding:28px}
    .ga-media-frame{height:280px}
    .ga-stat-row{gap:18px;flex-direction:column;align-items:flex-start}
    .ga-service-grid,
    .ga-project-grid,
    .ga-process-grid,
    .ga-benefit-grid,
    .ga-testimonial-grid,
    .ga-footer-grid{grid-template-columns:1fr}
    .ga-showreel-frame{min-height:320px}
    .ga-showreel-placeholder h3{font-size:52px}
    .ga-top-nav{gap:12px}
    .ga-footer-bottom{flex-direction:column}
}


/* =========================================================
   20. Full-Width Theme Compatibility Fix
   This makes the shortcode break out of narrow WordPress containers.
   ========================================================= */
.entry-content > .ga-page-shell,
.wp-block-post-content > .ga-page-shell,
.elementor-widget-container > .ga-page-shell,
.elementor-shortcode > .ga-page-shell{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
}

.ga-page-shell .ga-display-title,
.ga-page-shell .ga-display-title span,
.ga-page-shell .ga-card-title,
.ga-page-shell .ga-process-title,
.ga-page-shell .ga-footer-title{
    font-family:var(--ga-heading-font) !important;
    text-transform:uppercase !important;
}

.ga-page-shell .ga-display-title:not(.ga-section-title){
    font-size:clamp(72px, 9.2vw, 124px) !important;
}

.ga-page-shell .ga-section-title{
    font-size:clamp(42px, 4.7vw, 70px) !important;
}

.ga-page-shell .ga-display-title,
.ga-page-shell .ga-title-line:not(.ga-accent){
    color:#f3f7f4 !important;
}