/* ===========================
   GOOGLE FONT
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#05070f;
    color:#ffffff;
    overflow-x:hidden;
    min-height:100vh;

    display:flex;
    justify-content:center;
}


/* ===========================
   MOBILE FIRST CONTAINER
=========================== */

.container{

    width:100%;
    max-width:430px;
    min-height:100vh;

    padding:25px 18px 70px;

    position:relative;
    z-index:10;

}


/* Desktop-லயும் phone size maintain */

@media(min-width:431px){

    body{

        background:#03040a;

    }

    .container{

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

        box-shadow:
        0 0 80px rgba(0,0,0,.6);

    }

}



/* ===========================
   BACKGROUND
=========================== */

.background-animation{

    position:fixed;
    inset:0;

    background:

    radial-gradient(circle at top left,
    rgba(0,132,255,.12),
    transparent 45%),

    radial-gradient(circle at bottom right,
    rgba(255,0,153,.10),
    transparent 40%),

    radial-gradient(circle at center,
    rgba(93,0,255,.10),
    transparent 60%),

    #05070f;

    z-index:-10;

}



/* ===========================
   FLOATING LIGHTS
=========================== */

.floating{

    position:fixed;

    border-radius:50%;

    filter:blur(70px);

    animation:float 8s ease-in-out infinite;

    z-index:-5;

}

.one{

    width:160px;
    height:160px;

    background:#0077ff;

    top:-40px;
    left:-40px;

}

.two{

    width:180px;
    height:180px;

    background:#ff0077;

    bottom:-60px;
    right:-40px;

}

.three{

    width:120px;
    height:120px;

    background:#8800ff;

    top:45%;
    left:50%;

}



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

.hero{

    text-align:center;

    margin-top:15px;

}

.sub-title{

    color:#7ca7ff;

    font-size:13px;

    letter-spacing:3px;

    margin-bottom:8px;

}

.main-title{

    font-size:30px;

    font-weight:700;

    line-height:1.3;

}

.description{

    margin-top:15px;

    color:#bcbcbc;

    font-size:14px;

    line-height:1.7;

}



/* ===========================
   TREE
=========================== */

.tree{

    margin-top:45px;

}

.generation{

    display:flex;

    justify-content:center;

    align-items:center;

}

.second{

    display:flex;

    flex-direction:column;

    gap:22px;

}



/* ===========================
   CONNECTION LINE
=========================== */

.vertical-line{

    width:3px;

    height:70px;

    margin:15px auto;

    background:

    linear-gradient(

    to bottom,

    #2196f3,

    #ff4fa3

    );

}



/* ===========================
   LINK
=========================== */

.person-link{

    width:100%;

    text-decoration:none;

}



/* ===========================
   PERSON CARD
=========================== */

.person-card{

    width:100%;

    padding:22px;

    border-radius:22px;

    text-align:center;

    cursor:pointer;

    transition:.35s;

    backdrop-filter:blur(18px);

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

    background:

    rgba(255,255,255,.05);

    position:relative;

    overflow:hidden;

}



/* ===========================
   MALE CARD
=========================== */

.male{

    box-shadow:

    0 0 20px rgba(0,136,255,.25);

}

.male:hover{

    transform:translateY(-6px);

    box-shadow:

    0 0 35px rgba(0,136,255,.7);

}



/* ===========================
   FEMALE CARD
=========================== */

.female{

    box-shadow:

    0 0 20px rgba(255,0,128,.30);

}

.female:hover{

    transform:translateY(-6px);

    box-shadow:

    0 0 35px rgba(255,0,128,.75);

}



/* ===========================
   ROOT CARD
=========================== */

.root{

    border:2px solid rgba(0,183,255,.5);

}



/* ===========================
   GENDER ICON
=========================== */

.gender-icon{

    width:55px;
    height:55px;

    margin:auto;

    border-radius:50%;

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

    font-size:22px;

    margin-bottom:15px;

}


.male .gender-icon{

    background:#1579ff;

    box-shadow:

    0 0 20px #1579ff;

}


.female .gender-icon{

    background:#ff2c92;

    box-shadow:

    0 0 20px #ff2c92;

}



/* ===========================
   TEXT
=========================== */

.person-card h2{

    font-size:22px;

    font-weight:600;

}

.person-card span{

    display:block;

    margin-top:10px;

    color:#bbbbbb;

    font-size:13px;

}



/* ===========================
   QUOTE
=========================== */

.quote-box{

    margin-top:60px;

    text-align:center;

}

.quote-box p{

    color:#7d7d7d;

    line-height:1.8;

    font-style:italic;

}



/* ===========================
   CURSOR GLOW
=========================== */

.cursor-glow{

    position:fixed;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#3d9eff;

    filter:blur(18px);

    pointer-events:none;

    z-index:999;

}



/* ===========================
   FLOAT ANIMATION
=========================== */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0);

    }

}



/* =====================================================
   PART 2B-1
   PREMIUM GLASS EFFECTS
===================================================== */


/* -----------------------------
   GLASS SHINE
------------------------------*/

.person-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-45%;

    width:70px;

    height:260%;

    background:
    linear-gradient(
        rgba(255,255,255,0),
        rgba(255,255,255,.18),
        rgba(255,255,255,0)
    );

    transform:rotate(25deg);

    transition:.8s;

}

.person-card:hover::before{

    left:140%;

}



/* -----------------------------
   TOP GLOW
------------------------------*/

.person-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.9),
        transparent
    );

    opacity:.25;

}



/* -----------------------------
   CARD HOVER
------------------------------*/

.person-card{

    transition:

        transform .35s,

        box-shadow .35s,

        border-color .35s,

        background .35s;

}

.person-card:hover{

    background:

    rgba(255,255,255,.08);

}



/* -----------------------------
   ACTIVE PRESS
------------------------------*/

.person-card:active{

    transform:scale(.97);

}



/* -----------------------------
   MALE CARD
------------------------------*/

.male{

    border-color:

    rgba(0,153,255,.18);

}

.male:hover{

    border-color:

    rgba(0,183,255,.75);

}



/* -----------------------------
   FEMALE CARD
------------------------------*/

.female{

    border-color:

    rgba(255,70,170,.20);

}

.female:hover{

    border-color:

    rgba(255,80,170,.85);

}



/* -----------------------------
   ROOT CARD
------------------------------*/

.root{

    background:

    linear-gradient(

        135deg,

        rgba(0,136,255,.18),

        rgba(144,0,255,.18)

    );

}



/* -----------------------------
   TITLE EFFECT
------------------------------*/

.main-title{

    
     background: linear-gradient(
        90deg,
        #ffffff,
        #86b7ff,
        #ffffff
    );

    background-clip: text;
    -webkit-background-clip: text;

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

}



/* -----------------------------
   SUB TITLE
------------------------------*/

.sub-title{

    text-transform:uppercase;

    font-weight:600;

}



/* -----------------------------
   DESCRIPTION
------------------------------*/

.description{

    max-width:330px;

    margin-inline:auto;

}



/* -----------------------------
   CARD NAME
------------------------------*/

.person-card h2{

    transition:.35s;

}

.person-card:hover h2{

    letter-spacing:.8px;

}



/* -----------------------------
   CARD SUBTEXT
------------------------------*/

.person-card span{

    transition:.35s;

}

.person-card:hover span{

    color:#ffffff;

}



/* -----------------------------
   ICON ROTATE
------------------------------*/

.gender-icon{

    transition:.35s;

}

.person-card:hover .gender-icon{

    transform:

        rotate(8deg)

        scale(1.08);

}



/* -----------------------------
   LINK
------------------------------*/

.person-link{

    display:block;

}



/* -----------------------------
   CARD SPACING
------------------------------*/

.second{

    margin-top:10px;

}



/* -----------------------------
   QUOTE BOX
------------------------------*/

.quote-box{

    padding:-1px;

    border-radius:20px;

    margin-bottom:30px;

    background:transparent;


}



/* -----------------------------
   QUOTE
------------------------------*/

.quote-box p{

    font-size:14px;

}



/* -----------------------------
   SCROLLBAR
------------------------------*/

::-webkit-scrollbar{

    width:7px;

}

::-webkit-scrollbar-track{

    background:#070a12;

}

::-webkit-scrollbar-thumb{

    background:#235dff;

    border-radius:50px;

}



/* -----------------------------
   TEXT SELECTION
------------------------------*/

::selection{

    background:#2b7dff;

    color:#ffffff;

}



/* -----------------------------
   IMAGE SAFETY
------------------------------*/

img{

    max-width:100%;

    display:block;

}



/* -----------------------------
   BUTTON DEFAULT
------------------------------*/

button{

    font-family:inherit;

}



/* -----------------------------
   LINK RESET
------------------------------*/

a{

    color:inherit;

}



/* -----------------------------
   FADE
------------------------------*/

.fade-up{

    animation:

    fadeUp

    .9s

    ease;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:

        translateY(35px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



/* -----------------------------
   GLOW ANIMATION
------------------------------*/

@keyframes glow{

    0%{

        box-shadow:

        0 0 18px

        rgba(0,136,255,.20);

    }

    50%{

        box-shadow:

        0 0 40px

        rgba(0,136,255,.55);

    }

    100%{

        box-shadow:

        0 0 18px

        rgba(0,136,255,.20);

    }

}



.root{

    animation:

    glow

    3s

    infinite;

}



/*=========================================
TREE BRANCH
=========================================*/

.tree-branch{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:-10px;

    margin-bottom:8px;

}


.horizontal-line{

    width:220px;

    height:3px;

    border-radius:50px;

    background:

    linear-gradient(

        90deg,

        #0099ff,

        #ff4fa2,

        #0099ff

    );

    box-shadow:

    0 0 18px

    rgba(0,162,255,.5);

}



/*=========================================
CONNECTOR
=========================================*/

.connector{

    width:3px;

    height:26px;

    margin:auto;

    background:

    linear-gradient(

        #48b3ff,

        #ffffff

    );

}



/*=========================================
SECOND GENERATION
=========================================*/

.second{

    gap:25px;

}



/*=========================================
TREE ANIMATION
=========================================*/

.horizontal-line{

    animation:

    pulseTree

    2.5s

    infinite;

}


.connector{

    animation:

    pulseConnector

    2.5s

    infinite;

}


@keyframes pulseTree{

    0%{

        box-shadow:

        0 0 8px #008cff;

    }

    50%{

        box-shadow:

        0 0 25px #0bb8ff;

    }

    100%{

        box-shadow:

        0 0 8px #008cff;

    }

}



@keyframes pulseConnector{

    0%{

        opacity:.6;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.6;

    }

}



/*=========================================
BACKGROUND PARTICLES
=========================================*/

.background-animation::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(

    rgba(255,255,255,.25) 1px,

    transparent 1px);

    background-size:45px 45px;

    opacity:.08;

}



/*=========================================
PERSON CARD FLOAT
=========================================*/

.person-card{

    animation:

    floatingCard

    5s ease-in-out infinite;

}



.person-card:nth-child(even){

    animation-delay:1s;

}



@keyframes floatingCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}



/*=========================================
HOVER SCALE
=========================================*/

.person-card:hover{

    transform:

    scale(1.03)

    translateY(-6px);

}



/*=========================================
ROOT CARD
=========================================*/

.root{

    margin-bottom:5px;

}



/*=========================================
DESCRIPTION
=========================================*/

.description{

    margin-bottom:25px;

}


/*==================================
PAGE LOAD
===================================*/

body{

    animation:
    pageLoad
    .8s ease;

}

@keyframes pageLoad{

    from{

        opacity:0;
        transform:scale(.98);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}


/*==================================
CARD POP
===================================*/

.person-card{

    animation:

    cardPop

    .8s ease backwards;

}

.person-link:nth-child(1) .person-card{

    animation-delay:.2s;

}

.person-link:nth-child(2) .person-card{

    animation-delay:.4s;

}

.person-link:nth-child(3) .person-card{

    animation-delay:.6s;

}

@keyframes cardPop{

    from{

        opacity:0;

        transform:

        translateY(35px)

        scale(.85);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}



/*==================================
ROOT GLOW
===================================*/

.root{

    position:relative;

}

.root::after{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:25px;

    border:2px solid rgba(0,153,255,.18);

    animation:

    rootPulse

    2.5s infinite;

}

@keyframes rootPulse{

    0%{

        transform:scale(1);

        opacity:.3;

    }

    50%{

        transform:scale(1.03);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.3;

    }

}



/*==================================
HOVER LIGHT
===================================*/

.person-card:hover{

    filter:

    brightness(1.08);

}



/*==================================
BACKGROUND STARS
===================================*/

.background-animation::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(#ffffff 1px, transparent 1px);

    background-size:60px 60px;

    opacity:.05;

}



/*==================================
QUOTE ANIMATION
===================================*/

.quote-box{

    animation:

    fadeQuote

    2s;

}

@keyframes fadeQuote{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*==================================
MAIN TITLE
===================================*/

.main-title{

    animation:

    titleGlow

    4s infinite;

}

@keyframes titleGlow{

    0%{

        text-shadow:

        0 0 8px #008cff;

    }

    50%{

        text-shadow:

        0 0 25px #42a5ff;

    }

    100%{

        text-shadow:

        0 0 8px #008cff;

    }

}



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

img{

    transition:.4s;

}



/*==================================
CARD BORDER
===================================*/

.person-card{

    border:

    1px solid

    rgba(255,255,255,.08);

}



/*==================================
CARD SHADOW
===================================*/

.person-card:hover{

    box-shadow:

    0 0 35px rgba(0,136,255,.35),

    0 0 70px rgba(255,0,140,.12);

}



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

.quote-box{

    margin-bottom:80px;

}



/*=========================================
RIPPLE EFFECT
=========================================*/

.person-card{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    width:10px;
    height:10px;

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

    border-radius:50%;

    transform:translate(-50%,-50%);

    animation:ripple .7s linear;

}

@keyframes ripple{

    from{

        width:0;
        height:0;

        opacity:1;

    }

    to{

        width:450px;
        height:450px;

        opacity:0;

    }

}



/*=========================================
PAGE EXIT
=========================================*/

.page-exit{

    opacity:0;

    transition:.3s;

}



/* ===================================================
   PAGE NAVIGATION
=================================================== */

.breadcrumb{

    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:25px;

    font-size:14px;

    color:#9aa5b5;

}

.breadcrumb a{

    color:#64b5ff;
    text-decoration:none;
    transition:.3s;

}

.breadcrumb a:hover{

    color:#ffffff;

}



/* ===================================================
   BACK BUTTON
=================================================== */

.page-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

}

.back-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 22px;

    border-radius:14px;

    text-decoration:none;

    color:#ffffff;

    font-weight:600;

    background:

    linear-gradient(
        135deg,
        #1565ff,
        #00b0ff
    );

    box-shadow:

    0 0 20px rgba(0,136,255,.35);

    transition:.3s;

}

.back-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 0 35px rgba(0,136,255,.6);

}



/* ===================================================
   PERSON CARD IMPROVEMENTS
=================================================== */

.person-card{

    user-select:none;

}

.person-card h2{

    word-break:break-word;

}



/* ===================================================
   GENERATION TITLE
=================================================== */

.hero{

    margin-bottom:30px;

}



/* ===================================================
   TREE SPACING
=================================================== */

.tree{

    display:flex;

    flex-direction:column;

    gap:18px;

}



/* ===================================================
   CHILD CARDS
=================================================== */

.second{

    display:flex;

    flex-direction:column;

    gap:20px;

}



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

.container{

    padding-bottom:80px;

}



/* ===================================================
   SMALL DEVICES
=================================================== */

@media (max-width:360px){

    .main-title{

        font-size:24px;

    }

    .person-card h2{

        font-size:18px;

    }

}



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

.footer{
    width:100%;
    background:transparent;
    color:#ffffff;
    text-align:center;
    padding:-28px 15px;
    margin-top:60px;
}

.footer p{
    margin:8px 0;
    font-size:16px;
    letter-spacing:0.5px;
}

.footer .designer{
    font-size:15px;
    color:#cbd5e1;
}

.footer .designer span{
    color:#38bdf8;
    font-weight:600;
}
.footer .concept span{
    color : whitesmoke;
    font-size : 10px;
}


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

.person-image{

    width:110px;
    height:110px;

    margin:0 auto 15px;

    border-radius:50%;

    overflow:hidden;

    border:4px solid #2196f3;

    box-shadow:
        0 0 20px rgba(33,150,243,.5);

    transition:.35s;

}

.person-image img{

    width:110%;
    height:110%;

    object-fit:cover;

    display:block;

}

.person-card:hover .person-image{

    transform:scale(1.08);

    box-shadow:
        0 0 35px rgba(33,150,243,.8);

}

.person-card.female .person-image{

    border:4px solid #ff4fa3;

    box-shadow:
        0 0 20px rgba(255,79,163,.5);

}

.person-card.female:hover .person-image{

    box-shadow:
        0 0 35px rgba(255,79,163,.8);

}

/*=========================================
            SEARCH SECTION
=========================================*/

.search-section{

    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;

    margin:25px auto 45px;

}

.search-box{

    width:430px;
    max-width:90%;

    display:flex;
    align-items:center;

    padding:5px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1.5px solid rgba(255,255,255,0.18);

    box-shadow:
        0 0 10px rgba(33,150,243,.20),
        0 0 10px rgba(236,72,153,.20);

    transition:.35s;

}

.search-box:hover{

    box-shadow:
        0 0 18px rgba(33,150,243,.45),
        0 0 18px rgba(236,72,153,.45);

    transform:translateY(-2px);

}


/* Input */

.search-box input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    padding:13px 18px;

    color:white;

    font-size:15px;

    font-weight:500;

}

.search-box input::placeholder{

    color:#64748b;

}


/* Button */

.search-box button{

    border:none;

    outline:none;

    cursor:pointer;

    padding:11px 20px;

    border-radius:40px;

    color:#fff;

    font-size:14px;

    font-weight:600;

    background:linear-gradient(
        135deg,
        #2196f3,
        #7c3aed,
        #ec4899
    );

    transition:.35s;

}

.search-box button:hover{

    transform:scale(1.05);

    box-shadow:
        0 0 12px rgba(33,150,243,.55),
        0 0 12px rgba(236,72,153,.55);

}


/*=========================================
          TABLET VIEW
=========================================*/

@media(max-width:768px){

.search-box{

    width:95%;

}

.search-box input{

    padding:12px 15px;

    font-size:14px;

}

.search-box button{

    padding:10px 18px;

    font-size:13px;

}

}


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

@media(max-width:480px){

.search-box{

    width:95%;

    padding:4px;

}

.search-box input{

    padding:10px 12px;

    font-size:13px;

}

.search-box button{

    padding:9px 14px;

    font-size:12px;

    border-radius:30px;
    
    margin-left: -90px;

}

}

.deity-card{

    position:relative;

    width:100%;

    max-width:500px;

    height:150px;

    margin:40px auto;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.deity-card video{

    width:100%;

    height:100%;

    object-fit:cover;

}

.deity-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    text-align:center;

}

.deity-overlay h2{

    font-size:34px;

}

.deity-overlay h3{

    margin-top:15px;

    font-size:22px;

}


/* =====================================================
   WELCOME PAGE
   index.html
===================================================== */

.welcome-page {
    min-height: calc(100vh - 90px);

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

    padding: 40px 20px;

    position: relative;
    z-index: 5;

    text-align: center;
}


/* =====================================
   WELCOME CONTENT
===================================== */

.welcome-content {

    width: 100%;
    max-width: 800px;

    padding: 30px 20px;

    position: relative;

}


/* =====================================
   TREE ICON
===================================== */

.welcome-tree {

    font-size: 75px;

    margin-bottom: 15px;

    filter:
        drop-shadow(0 0 12px rgba(79,195,247,.55))
        drop-shadow(0 0 18px rgba(255,102,196,.25));

    animation:
        treeFloat 3s ease-in-out infinite;

}


@keyframes treeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


/* =====================================
   SMALL WELCOME TEXT
===================================== */

.welcome-small {

    margin-bottom: 15px;

    color: #ff66c4;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;

    text-shadow:
        0 0 12px rgba(255,102,196,.45);

}


/* =====================================
   MAIN TITLE
===================================== */

.welcome-title {

    margin: 0;

    color: #4fc3f7;

    font-size: clamp(45px, 7vw, 82px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: 3px;

    text-shadow:
        0 0 15px rgba(79,195,247,.45),
        0 0 35px rgba(79,195,247,.15);

}


.welcome-title span {

    display: block;

    margin-top: 12px;

    color: #ff66c4;

    font-size: .55em;

    letter-spacing: 7px;

    text-shadow:
        0 0 15px rgba(255,102,196,.4);

}


/* =====================================
   TAGLINE
===================================== */

.welcome-tagline {

    margin-top: 28px;

    color: #e2e8f0;

    font-size: 15px;

    font-weight: 400;

    letter-spacing: 1.5px;

}


/* =====================================
   DECORATIVE LINE
===================================== */

.welcome-line {

    width: 110px;

    height: 2px;

    margin: 23px auto;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #4fc3f7,
            #ff66c4
        );

    box-shadow:
        0 0 10px rgba(79,195,247,.5),
        0 0 10px rgba(255,102,196,.3);

}


/* =====================================
   DESCRIPTION
===================================== */

.welcome-description {

    max-width: 550px;

    margin: 0 auto 32px;

    color: #b8c1ce;

    font-size: 14px;

    line-height: 1.9;

}


/* =====================================
   EXPLORE BUTTON
===================================== */

.explore-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 245px;

    padding: 14px 25px;

    border: 1px solid rgba(79,195,247,.5);

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            rgba(79,195,247,.10),
            rgba(255,102,196,.10)
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 15px rgba(79,195,247,.15),
        0 0 15px rgba(255,102,196,.10);

    transition:
        .3s ease;

}


.explore-btn span:first-child {

    color: #4fc3f7;

}


.explore-btn span:last-child {

    color: #ff66c4;

    transition:
        transform .3s ease;

}


.explore-btn:hover {

    transform: translateY(-4px);

    border-color: rgba(255,102,196,.65);

    background:
        linear-gradient(
            90deg,
            rgba(79,195,247,.20),
            rgba(255,102,196,.20)
        );

    box-shadow:
        0 0 25px rgba(79,195,247,.30),
        0 0 25px rgba(255,102,196,.20);

}


.explore-btn:hover span:last-child {

    transform: translateX(6px);

}


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

.welcome-footer {

    position: relative;

    z-index: 5;

    text-align: center;

    padding: 20px;

    color: #aeb8c7;

    font-size: 12px;

}


.welcome-footer p {

    margin: 6px 0;

}


.welcome-footer strong {

    color: #4fc3f7;

    text-shadow:
        0 0 8px rgba(79,195,247,.3);

}


/* =====================================
   TABLET
===================================== */

@media (max-width: 992px) {

    .welcome-page {

        min-height: calc(100vh - 60px);

    }

    .welcome-title {

        font-size: 60px;

    }

}


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

@media (max-width: 600px) {

    .welcome-page {

        min-height: 100vh;

        padding: 25px 15px;

    }


    .welcome-content {

        padding: 20px 10px;

    }


    .welcome-tree {

        font-size: 58px;

        margin-bottom: 12px;

    }


    .welcome-small {

        font-size: 9px;

        letter-spacing: 3px;

    }


    .welcome-title {

        font-size: 42px;

        letter-spacing: 1px;

    }


    .welcome-title span {

        margin-top: 9px;

        font-size: .58em;

        letter-spacing: 3px;

    }


    .welcome-tagline {

        margin-top: 20px;

        font-size: 11px;

        letter-spacing: .8px;

    }


    .welcome-line {

        width: 75px;

        margin: 18px auto;

    }


    .welcome-description {

        max-width: 320px;

        margin-bottom: 26px;

        font-size: 11px;

        line-height: 1.8;

    }


    .explore-btn {

        min-width: 215px;

        padding: 13px 18px;

        font-size: 10px;

        gap: 9px;

    }


    .welcome-footer {

        padding: 15px;

        font-size: 10px;

    }

}


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

@media (max-width: 380px) {

    .welcome-tree {

        font-size: 50px;

    }


    .welcome-title {

        font-size: 35px;

    }


    .welcome-title span {

        font-size: .55em;

        letter-spacing: 2px;

    }


    .welcome-description {

        font-size: 10px;

    }


    .explore-btn {

        min-width: 200px;

        padding: 12px 15px;

        font-size: 9px;

    }

}