/* ==========================================================
   JOSWEBTECH Global Styles v1.0
========================================================== */

@import url('variables.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

/* =========================
   CSS RESET
========================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.7;
}

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

h1,h2,h3,h4,h5,h6{
    font-family:'Poppins',sans-serif;
    color:var(--white);
    line-height:1.2;
    margin-bottom:1rem;
}

h1{
    font-size:clamp(2.8rem,6vw,5rem);
}

h2{
    font-size:clamp(2rem,4vw,3.5rem);
}

h3{
    font-size:1.5rem;
}

p{
    color:var(--text);
    margin-bottom:1rem;
}

a{
    text-decoration:none;
    color:inherit;
}

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

/* =========================
   LAYOUT
========================= */

.container{
    width:min(92%, var(--container-width));
    margin:auto;
}

section{
    padding:var(--section-padding) 0;
}

/* =========================
   BUTTONS
========================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:15px 32px;
    border:none;
    border-radius:var(--radius-round);
    cursor:pointer;
    font-weight:600;
    transition:var(--transition);
}

.btn-primary{
    background:var(--gradient-primary);
    color:#fff;
    box-shadow:var(--glow);
}

.btn-primary:hover{
    transform:translateY(-4px);
}

.btn-outline{
    background:transparent;
    border:2px solid rgba(255,255,255,.2);
    color:var(--white);
    backdrop-filter:var(--blur);
}

.btn-outline:hover{
    border-color:var(--primary);
    color:var(--primary);
}

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

.glass{
    background:var(--glass);
    backdrop-filter:var(--blur);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
}

/* =========================
   SECTION TITLE
========================= */

.section-title{
    text-align:center;
    margin-bottom:4rem;
}

.section-title span{
    color:var(--accent);
}

.section-title p{
    max-width:700px;
    margin:auto;
}

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

.gradient-text{
    background:var(--gradient-primary);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* =========================
   UTILITIES
========================= */

.text-center{
    text-align:center;
}

.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}

.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}

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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:var(--surface);
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--accent);
}

/* =========================
   SELECTION
========================= */

::selection{
    background:var(--primary);
    color:#fff;
}

/* =========================
   ANIMATIONS
========================= */

.fade-up{
    opacity:0;
    transform:translateY(40px);
}

.fade-left{
    opacity:0;
    transform:translateX(-40px);
}

.fade-right{
    opacity:0;
    transform:translateX(40px);
}

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

@media (max-width:768px){

    section{
        padding:80px 0;
    }

    .btn{
        width:100%;
    }

}
/* Scroll Animation States */

.fade-up,
.fade-left,
.fade-right,
.glass{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}
/* ===============================
   Back To Top
================================ */

#backToTop{

    position:fixed;

    bottom:30px;

    right:30px;

    width:50px;

    height:50px;

    border-radius:50%;

    border:none;

    background:var(--gradient-primary);

    color:white;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;

}


#backToTop.show{

    opacity:1;

    visibility:visible;

}


#backToTop:hover{

    transform:translateY(-5px);

}
#installApp{

display:none;

}