/* =========================
   GLOBAL RESET
========================= */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================
   ROOT VARIABLES
========================= */

:root{

    --bg-color:
    #0f172a;

    --secondary-bg:
    #111827;

    --card-bg:
    rgba(255,255,255,0.05);

    --primary-color:
    #67e8f9;

    --secondary-color:
    #8b5cf6;

    --text-color:
    #ffffff;

    --text-secondary:
    #cbd5e1;

    --border-color:
    rgba(255,255,255,0.12);

    --glow-color:
    rgba(103,232,249,0.25);
}

/* =========================
   HTML
========================= */

html{
    scroll-behavior: smooth;
}

/* =========================
   BODY
========================= */

body{

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #111827,
        #131c31
    );

    color: var(--text-color);

    font-family: 'Poppins', sans-serif;

    overflow-x: hidden;

    min-height: 100vh;

    position: relative;
}

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

body::before{

    content: '';

    position: fixed;

    width: 500px;
    height: 500px;

    background:
    rgba(103,232,249,0.08);

    filter: blur(140px);

    top: -100px;
    left: -100px;

    z-index: -1;
}

body::after{

    content: '';

    position: fixed;

    width: 500px;
    height: 500px;

    background:
    rgba(139,92,246,0.08);

    filter: blur(140px);

    bottom: -100px;
    right: -100px;

    z-index: -1;
}

/* =========================
   TYPOGRAPHY
========================= */

h1,h2,h3,h4,h5,h6{

    font-family: 'Poppins', sans-serif;

    color: var(--text-color);
}

p{

    color: var(--text-secondary);

    line-height: 1.8;
}

/* =========================
   LINKS
========================= */

a{

    text-decoration: none;

    color: inherit;
}

/* =========================
   LISTS
========================= */

ul{

    list-style: none;
}

/* =========================
   SECTION DEFAULT
========================= */

section{

    padding: 100px 10%;

    position: relative;
}

/* =========================
   GLOBAL TRANSITIONS
========================= */

*{

    transition:
    background 0.3s ease,
    color 0.3s ease,
    border 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* =========================
   CUSTOM SCROLLBAR
========================= */

::-webkit-scrollbar{

    width: 10px;
}

::-webkit-scrollbar-track{

    background: #0f172a;
}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
        to bottom,
        var(--primary-color),
        var(--secondary-color)
    );

    border-radius: 50px;
}

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

.footer{

    margin-top: 120px;

    border-top:
    1px solid var(--border-color);

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

    backdrop-filter: blur(14px);

    padding:
    70px 10% 20px;
}

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

.footer-container{

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    flex-wrap: wrap;

    gap: 60px;
}

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

.footer-brand{

    flex: 1;

    min-width: 250px;
}

.footer-brand h2{

    font-size: 34px;

    margin-bottom: 20px;

    color: var(--primary-color);
}

.footer-brand p{

    color: var(--text-secondary);

    line-height: 1.8;

    max-width: 380px;
}

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

.footer-links{

    min-width: 180px;
}

.footer-links h3{

    margin-bottom: 20px;

    font-size: 24px;

    color: var(--text-color);
}

.footer-links ul li{

    margin-bottom: 14px;
}

.footer-links ul li a{

    color: var(--text-secondary);

    transition: 0.3s ease;
}

.footer-links ul li a:hover{

    color: var(--primary-color);

    padding-left: 6px;
}

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

.footer-social{

    min-width: 220px;
}

.footer-social h3{

    margin-bottom: 20px;

    font-size: 24px;

    color: var(--text-color);
}

/* =========================
   SOCIAL ICONS
========================= */

.footer-social-icons{

    display: flex;

    gap: 18px;

    flex-wrap: wrap;
}

.footer-social-icons a{

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    color: var(--text-color);

    background: var(--card-bg);

    border:
    1px solid var(--border-color);

    backdrop-filter: blur(10px);

    transition: 0.4s ease;
}

/* =========================
   SOCIAL HOVER
========================= */

.footer-social-icons a:hover{

    transform:
    translateY(-6px);

    background:
    linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );

    box-shadow:
    0 0 25px var(--glow-color);
}

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

.footer-bottom{

    text-align: center;

    margin-top: 60px;

    padding-top: 25px;

    border-top:
    1px solid var(--border-color);
}

.footer-bottom p{

    color: var(--text-secondary);

    font-size: 15px;
}

/* =========================
   SCROLL TOP BUTTON
========================= */

#scrollTopBtn{

    position: fixed;

    bottom: 30px;
    right: 30px;

    width: 55px;
    height: 55px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color: white;

    font-size: 18px;

    z-index: 999;

    background:
    linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );

    box-shadow:
    0 0 20px var(--glow-color);

    transition: 0.35s ease;
}

/* =========================
   SCROLL BUTTON HOVER
========================= */

#scrollTopBtn:hover{

    transform:
    translateY(-6px) scale(1.05);
}

/* =========================
   GLASS CARD STYLE
========================= */

.glass-card{

    background: var(--card-bg);

    border:
    1px solid var(--border-color);

    backdrop-filter: blur(14px);

    border-radius: 24px;
}

/* =========================
   FADE UP ANIMATION
========================= */

.fade-up{

    opacity: 0;

    transform:
    translateY(50px);

    animation:
    fadeUp 1s ease forwards;
}

@keyframes fadeUp{

    to{

        opacity: 1;

        transform:
        translateY(0);
    }
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    section{

        padding: 80px 8%;
    }

    .footer-container{

        flex-direction: column;

        gap: 40px;
    }

    .footer{

        padding:
        60px 8% 20px;
    }

    .footer-brand p{

        max-width: 100%;
    }

    #scrollTopBtn{

        width: 50px;
        height: 50px;

        font-size: 16px;
    }
}