/*
Theme Name: Twingil Kids
Theme URI: https://www.twingil.com/
Author: MediaGFX
Author URI: https://mediagfx.in/
Description: A colorful, playful and Elementor-friendly WordPress theme for Twingil - Where Little Stars Grow.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: twingil-kids
Tags: education, kids, children, colorful, elementor, custom-background, custom-logo, custom-menu, featured-images
*/


/* =========================================
   TWINGIL COLORS
   ========================================= */

:root {
    --tg-purple:#9513a5;
    --tg-purple-dark:#5f126e;
    --tg-purple-soft:#f4e9f8;

    --tg-yellow:#ffe04b;
    --tg-yellow-soft:#fff8cf;

    --tg-mint:#78e4cf;
    --tg-mint-soft:#e9fbf7;

    --tg-cyan:#65d7ef;
    --tg-cyan-soft:#e9faff;

    --tg-pink:#f28ac8;
    --tg-pink-soft:#fff0f8;

    --tg-orange:#ffb45b;
    --tg-green:#71cf87;

    --tg-ink:#30263a;
    --tg-muted:#70677a;

    --tg-bg:#fffdfb;
    --tg-card:#ffffff;
    --tg-border:#eee4f1;

    --tg-shadow:0 18px 50px rgba(92,28,112,.10);
    --tg-radius:28px;
}


/* =========================================
   GENERAL
   ========================================= */

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    background:var(--tg-bg);
    color:var(--tg-ink);
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.7;
}

a {
    color:var(--tg-purple);
    text-decoration:none;
}

a:hover {
    color:var(--tg-purple-dark);
}

img {
    max-width:100%;
    height:auto;
}

button,
input,
textarea,
select {
    font:inherit;
}

.container {
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto;
}


/* =========================================
   HEADER
   ========================================= */

.tg-site-header {
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(149,19,165,.09);
}

.tg-header-inner {
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.tg-brand {
    display:inline-flex;
    align-items:center;
}

.tg-brand img {
    display:block;
    width:172px;
    height:auto;
}

.tg-nav {
    display:flex;
    align-items:center;
    gap:4px;
}

.tg-nav ul {
    display:flex;
    align-items:center;
    gap:4px;
    list-style:none;
    margin:0;
    padding:0;
}

.tg-nav a {
    display:inline-block;
    padding:10px 14px;
    border-radius:999px;
    font-weight:700;
    color:#4e4558;
    font-size:15px;
    transition:.2s ease;
}

.tg-nav a:hover,
.tg-nav .current-menu-item>a {
    background:var(--tg-purple-soft);
    color:var(--tg-purple);
}

.tg-menu-toggle {
    display:none;
    border:0;
    background:var(--tg-purple-soft);
    color:var(--tg-purple);
    border-radius:14px;
    padding:8px 12px;
    font-size:23px;
    cursor:pointer;
}


/* =========================================
   HERO
   ========================================= */

.tg-hero {
    position:relative;
    overflow:hidden;
    background:linear-gradient(
        135deg,
        #fffdfb 0%,
        #fff5fb 48%,
        #eefcff 100%
    );
    padding:80px 0 90px;
}

.tg-hero:before,
.tg-hero:after {
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.tg-hero:before {
    width:360px;
    height:360px;
    right:-110px;
    top:-150px;
    background:rgba(120,228,207,.22);
}

.tg-hero:after {
    width:300px;
    height:300px;
    left:-150px;
    bottom:-160px;
    background:rgba(255,224,75,.22);
}

.tg-hero-grid {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:center;
}

.tg-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid var(--tg-border);
    box-shadow:0 8px 25px rgba(90,25,110,.07);
    padding:8px 15px;
    border-radius:999px;
    color:var(--tg-purple);
    font-weight:800;
    font-size:14px;
}

.tg-hero h1 {
    font-size:clamp(42px,6vw,76px);
    line-height:1.02;
    letter-spacing:-2.5px;
    margin:18px 0 18px;
    font-weight:900;
}

.tg-hero h1 .purple {
    color:var(--tg-purple);
}

.tg-hero h1 .yellow {
    color:#d19f00;
}

.tg-lead {
    font-size:20px;
    color:var(--tg-muted);
    max-width:620px;
    margin:0 0 28px;
}

.tg-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.tg-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 21px;
    border-radius:999px;
    font-weight:800;
    border:2px solid transparent;
    transition:.2s transform,.2s box-shadow,.2s background;
}

.tg-btn:hover {
    transform:translateY(-3px);
}

.tg-btn-primary {
    background:var(--tg-purple);
    color:#fff;
    box-shadow:0 12px 26px rgba(149,19,165,.24);
}

.tg-btn-primary:hover {
    color:#fff;
    background:var(--tg-purple-dark);
}

.tg-btn-light {
    background:#fff;
    border-color:var(--tg-border);
    color:var(--tg-purple);
}

.tg-hero-art {
    min-height:430px;
    position:relative;
    display:grid;
    place-items:center;
}

.tg-orbit {
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    border:2px dashed rgba(149,19,165,.16);
    animation:tg-spin 22s linear infinite;
}

.tg-hero-card {
    position:relative;
    width:min(420px,90%);
    padding:30px;
    border-radius:38px;
    background:#fff;
    box-shadow:var(--tg-shadow);
    border:1px solid rgba(149,19,165,.08);
    text-align:center;
}

.tg-hero-card:before {
    content:"";
    position:absolute;
    inset:12px;
    border:2px solid var(--tg-yellow);
    border-radius:30px;
    opacity:.55;
}

.tg-hero-logo {
    position:relative;
    z-index:2;
    width:min(280px,75%);
    margin:0 auto 10px;
    display:block;
}

.tg-hero-card h3 {
    position:relative;
    z-index:2;
    margin:4px 0;
    color:var(--tg-purple);
    font-size:24px;
}

.tg-hero-card p {
    position:relative;
    z-index:2;
    margin:0;
    color:var(--tg-muted);
}

.tg-floating {
    position:absolute;
    font-size:34px;
    animation:tg-float 4s ease-in-out infinite;
    z-index:3;
}

.tg-f1 {
    top:18%;
    left:8%;
}

.tg-f2 {
    right:6%;
    top:10%;
    animation-delay:1s;
}

.tg-f3 {
    left:9%;
    bottom:13%;
    animation-delay:1.8s;
}

.tg-f4 {
    right:10%;
    bottom:16%;
    animation-delay:2.5s;
}

@keyframes tg-float {
    0%,100% {
        transform:translateY(0) rotate(-3deg);
    }

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

@keyframes tg-spin {
    to {
        transform:rotate(360deg);
    }
}


/* =========================================
   SECTIONS
   ========================================= */

.tg-section {
    padding:78px 0;
}

.tg-section.alt {
    background:#fbf8fd;
}

.tg-section-heading {
    text-align:center;
    max-width:720px;
    margin:0 auto 42px;
}

.tg-kicker {
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1.3px;
    color:var(--tg-purple);
    font-weight:900;
}

.tg-section-heading h2 {
    font-size:clamp(32px,4vw,46px);
    line-height:1.12;
    margin:8px 0 10px;
    letter-spacing:-1px;
}

.tg-section-heading p {
    margin:0;
    color:var(--tg-muted);
}


/* =========================================
   CATEGORY CARDS
   ========================================= */

.tg-category-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px;
}

.tg-category {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:175px;
    padding:20px 12px;
    border-radius:26px;
    border:1px solid rgba(0,0,0,.04);
    transition:.22s transform,.22s box-shadow;
}

.tg-category:hover {
    transform:translateY(-7px);
    box-shadow:var(--tg-shadow);
}

.tg-category:nth-child(1) {
    background:var(--tg-pink-soft);
}

.tg-category:nth-child(2) {
    background:var(--tg-purple-soft);
}

.tg-category:nth-child(3) {
    background:var(--tg-yellow-soft);
}

.tg-category:nth-child(4) {
    background:var(--tg-mint-soft);
}

.tg-category:nth-child(5) {
    background:var(--tg-cyan-soft);
}

.tg-category:nth-child(6) {
    background:#fff0e8;
}

.tg-category-icon {
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:36px;
    margin-bottom:12px;
    background:#fff;
    box-shadow:0 8px 20px rgba(50,30,60,.07);
}

.tg-category h3 {
    margin:0;
    font-size:17px;
    color:var(--tg-ink);
}


/* =========================================
   ACTIVITY CARDS
   ========================================= */

.tg-cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.tg-card {
    background:#fff;
    border:1px solid var(--tg-border);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(60,30,80,.07);
    transition:.22s transform,.22s box-shadow;
}

.tg-card:hover {
    transform:translateY(-7px);
    box-shadow:var(--tg-shadow);
}

.tg-card-visual {
    height:180px;
    display:grid;
    place-items:center;
    font-size:72px;
}

.tg-card:nth-child(1) .tg-card-visual {
    background:var(--tg-pink-soft);
}

.tg-card:nth-child(2) .tg-card-visual {
    background:var(--tg-yellow-soft);
}

.tg-card:nth-child(3) .tg-card-visual {
    background:var(--tg-mint-soft);
}

.tg-card:nth-child(4) .tg-card-visual {
    background:var(--tg-cyan-soft);
}

.tg-card-body {
    padding:21px;
}

.tg-card-body h3 {
    margin:0 0 6px;
    font-size:21px;
}

.tg-card-body p {
    margin:0 0 15px;
    color:var(--tg-muted);
    font-size:14px;
}

.tg-link {
    font-weight:800;
    color:var(--tg-purple);
}


/* =========================================
   FEATURE STRIP
   ========================================= */

.tg-feature-strip {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:25px;
    align-items:stretch;
}

.tg-feature-main {
    padding:38px;
    border-radius:32px;
    background:linear-gradient(
        135deg,
        var(--tg-purple),
        #b428b9
    );
    color:#fff;
    position:relative;
    overflow:hidden;
}

.tg-feature-main:after {
    content:"✦";
    position:absolute;
    right:20px;
    bottom:-45px;
    font-size:190px;
    opacity:.1;
}

.tg-feature-main h3 {
    font-size:32px;
    line-height:1.15;
    margin:0 0 10px;
    position:relative;
    z-index:2;
}

.tg-feature-main p {
    opacity:.9;
    max-width:600px;
    position:relative;
    z-index:2;
}

.tg-feature-main .tg-btn {
    background:#fff;
    color:var(--tg-purple);
    position:relative;
    z-index:2;
}

.tg-mini-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.tg-mini {
    border-radius:25px;
    padding:25px;
    background:#fff;
    border:1px solid var(--tg-border);
    box-shadow:0 12px 30px rgba(50,30,60,.06);
}

.tg-mini .emoji {
    font-size:38px;
}

.tg-mini h4 {
    margin:8px 0 4px;
    font-size:18px;
}

.tg-mini p {
    margin:0;
    color:var(--tg-muted);
    font-size:13px;
}


/* =========================================
   FOOTER
   ========================================= */

.tg-footer {
    background:#2e2136;
    color:#fff;
    padding:55px 0 22px;
}

.tg-footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:35px;
}


/* Footer logo
   IMPORTANT:
   No white background
   No rounded white box
   No padding
*/

.tg-footer-logo {
    width:190px;
    height:auto;
    display:block;

    background:transparent !important;
    background-color:transparent !important;

    border:none !important;
    border-radius:0 !important;

    padding:0 !important;
    margin:0 0 20px 0;

    box-shadow:none !important;
}


/* Footer logo link */

.tg-footer-logo-link {
    display:inline-block;
    background:transparent !important;
    background-color:transparent !important;

    border:none !important;
    border-radius:0 !important;

    padding:0 !important;
    margin:0;

    box-shadow:none !important;
}


/* Footer logo container */

.tg-footer-brand {
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}


/* Prevent pseudo-elements from creating a box */

.tg-footer-logo::before,
.tg-footer-logo::after,
.tg-footer-logo-link::before,
.tg-footer-logo-link::after,
.tg-footer-brand::before,
.tg-footer-brand::after {
    content:none !important;
    display:none !important;
}


/* Footer text */

.tg-footer p {
    color:#cfc5d4;
    font-size:14px;
}


/* Footer headings */

.tg-footer h3 {
    margin:0 0 12px;
    font-size:17px;
    color:#fff;
}


/* Footer links */

.tg-footer a {
    display:block;
    color:#cfc5d4;
    font-size:14px;
    margin:7px 0;
    transition:.2s ease;
}

.tg-footer a:hover {
    color:#fff;
}


/* Footer bottom */

.tg-footer-bottom {
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:35px;
    padding-top:18px;
    text-align:center;
    color:#b7acbd;
    font-size:13px;
}


/* =========================================
   WORDPRESS CONTENT
   ========================================= */

.tg-content {
    padding:60px 0;
}

.tg-content-area {
    max-width:850px;
    margin:auto;
}

.tg-content-area h1,
.tg-content-area h2,
.tg-content-area h3 {
    line-height:1.2;
    color:var(--tg-purple-dark);
}

.tg-content-area img {
    border-radius:20px;
}

.widget-area {
    padding:30px;
    background:var(--tg-purple-soft);
    border-radius:24px;
}


/* =========================================
   ELEMENTOR COMPATIBILITY
   ========================================= */

.elementor-page .tg-site-header {
    position:relative;
}

.elementor-page .site-main {
    min-height:0;
}

.elementor-widget-text-editor a {
    color:var(--tg-purple);
}


/* =========================================
   RESPONSIVE - TABLET
   ========================================= */

@media (max-width:1050px) {

    .tg-category-grid {
        grid-template-columns:repeat(3,1fr);
    }

    .tg-cards {
        grid-template-columns:repeat(2,1fr);
    }

    .tg-hero-grid {
        grid-template-columns:1fr;
        text-align:center;
    }

    .tg-lead {
        margin-left:auto;
        margin-right:auto;
    }

    .tg-actions {
        justify-content:center;
    }

    .tg-feature-strip {
        grid-template-columns:1fr;
    }

    .tg-footer-grid {
        grid-template-columns:repeat(2,1fr);
    }
}


/* =========================================
   RESPONSIVE - MOBILE
   ========================================= */

@media (max-width:760px) {

    .container {
        width:min(100% - 28px,1180px);
    }

    .tg-header-inner {
        min-height:72px;
    }

    .tg-brand img {
        width:145px;
    }

    .tg-menu-toggle {
        display:block;
    }

    .tg-nav {
        display:none;
        position:absolute;
        left:14px;
        right:14px;
        top:68px;
        background:#fff;
        border:1px solid var(--tg-border);
        border-radius:20px;
        padding:10px;
        box-shadow:var(--tg-shadow);
    }

    .tg-nav.is-open {
        display:block;
    }

    .tg-nav ul {
        display:block;
    }

    .tg-nav li {
        margin:3px 0;
    }

    .tg-nav a {
        display:block;
        text-align:center;
    }

    .tg-hero {
        padding:55px 0 65px;
    }

    .tg-hero-card {
        padding:25px;
    }

    .tg-orbit {
        width:290px;
        height:290px;
    }

    .tg-section {
        padding:60px 0;
    }

    .tg-category-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .tg-cards {
        grid-template-columns:1fr;
    }

    .tg-mini-grid {
        grid-template-columns:1fr;
    }

    .tg-footer-grid {
        grid-template-columns:1fr;
        text-align:center;
    }

    .tg-footer-logo {
        width:170px;
        margin-left:auto;
        margin-right:auto;
    }
}


/* =========================================
   RESPONSIVE - SMALL MOBILE
   ========================================= */

@media (max-width:430px) {

    .tg-category {
        min-height:145px;
    }

    .tg-category-icon {
        width:60px;
        height:60px;
        font-size:30px;
    }

    .tg-hero h1 {
        font-size:45px;
    }

    .tg-hero-art {
        min-height:350px;
    }
}











/* =========================================
   FINAL FOOTER LOGO OVERRIDE
   ========================================= */

footer.tg-footer img.tg-footer-logo,
.tg-footer img.tg-footer-logo,
.tg-footer .tg-footer-logo {
    width:190px !important;
    height:auto !important;

    background:none !important;
    background-color:transparent !important;

    border:0 !important;
    border-width:0 !important;
    border-style:none !important;
    border-radius:0 !important;

    padding:0 !important;
    margin:0 0 20px 0 !important;

    box-shadow:none !important;
    outline:none !important;

    display:block !important;
}

footer.tg-footer a.tg-footer-logo-link,
.tg-footer a.tg-footer-logo-link {
    background:none !important;
    background-color:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
    box-shadow:none !important;
    outline:none !important;
}

footer.tg-footer .tg-footer-brand,
.tg-footer .tg-footer-brand {
    background:none !important;
    background-color:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    box-shadow:none !important;
}

footer.tg-footer img.tg-footer-logo::before,
footer.tg-footer img.tg-footer-logo::after,
.tg-footer .tg-footer-logo-link::before,
.tg-footer .tg-footer-logo-link::after,
.tg-footer .tg-footer-brand::before,
.tg-footer .tg-footer-brand::after {
    display:none !important;
    content:none !important;
}