/*==================================================
    FUTURE TECH PLATFORM
    style.css
    Part 1
==================================================*/


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

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


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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#07111F;

    color:#ffffff;

    overflow-x:hidden;

    line-height:1.6;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

}


/*==============================
    THEME VARIABLES
==============================*/

:root{

    --primary:#2563EB;

    --secondary:#10B981;

    --purple:#7C3AED;

    --dark:#07111F;

    --dark2:#0F172A;

    --card:rgba(255,255,255,.08);

    --white:#ffffff;

    --text:#CBD5E1;

    --shadow:0 20px 60px rgba(0,0,0,.35);

    --radius:18px;

    --transition:.35s;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0F172A;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        var(--primary),

        var(--secondary)

    );

    border-radius:30px;

}


/*==============================
    LOADER
==============================*/

#loader{

    position:fixed;

    inset:0;

    background:#07111F;

    z-index:99999;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.6s;

}

.spinner{

    width:75px;

    height:75px;

    border-radius:50%;

    border:6px solid rgba(255,255,255,.15);

    border-top:6px solid var(--primary);

    animation:spin 1s linear infinite;

}

#loader h2{

    margin-top:25px;

    font-weight:600;

    letter-spacing:2px;

    color:white;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


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

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

}


/*==============================
    NAVBAR
==============================*/

.navbar{

    width:90%;

    max-width:1400px;

    margin:auto;

    padding:22px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:28px;

    font-weight:700;

}

.logo i{

    color:var(--secondary);

}

.menu{

    display:flex;

    gap:38px;

}

.menu li a{

    color:white;

    transition:.3s;

    font-weight:500;

    position:relative;

}

.menu li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.35s;

}

.menu li a:hover::after{

    width:100%;

}

.menu li a:hover{

    color:var(--secondary);

}

.menu-btn{

    display:none;

    background:none;

    color:white;

    font-size:26px;

}


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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 8%;

}


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

.bg-video{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    top:0;

    left:0;

    z-index:-3;

}


/*==============================
    OVERLAY
==============================*/

.overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(7,17,31,.88),

            rgba(7,17,31,.82)

        );

    z-index:-2;

}


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

.hero-content{

    max-width:700px;

}

.subtitle{

    color:var(--secondary);

    letter-spacing:3px;

    font-size:15px;

    margin-bottom:18px;

    text-transform:uppercase;

}

.hero-content h1{

    font-size:72px;

    line-height:1.1;

    margin-bottom:25px;

    font-weight:800;

}

.description{

    color:var(--text);

    font-size:18px;

    margin-bottom:40px;

    max-width:620px;

}


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

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn-primary{

    background:linear-gradient(

        45deg,

        var(--primary),

        var(--secondary)

    );

    color:white;

    padding:18px 36px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    transform:translateY(-6px);

}

.btn-secondary{

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

    backdrop-filter:blur(10px);

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

    color:white;

    padding:18px 36px;

    border-radius:50px;

    transition:.35s;

}

.btn-secondary:hover{

    background:white;

    color:#111827;

}


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

.hero-card-area{

    display:flex;

    flex-direction:column;

    gap:25px;

}


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

.glass-card{

    width:280px;

    padding:30px;

    border-radius:20px;

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

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

    backdrop-filter:blur(18px);

    transition:.4s;

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

}

.glass-card:hover{

    transform:translateY(-10px);

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

}

.glass-card i{

    font-size:42px;

    color:var(--secondary);

    margin-bottom:20px;

}

.glass-card h3{

    margin-bottom:10px;

    font-size:24px;

}

.glass-card p{

    color:var(--text);

}


/*==============================
    GRADIENT LIGHT
==============================*/

.hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(

        rgba(37,99,235,.35),

        transparent 70%

    );

    right:-120px;

    top:-100px;

    filter:blur(30px);

    z-index:-1;

}

.hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(

        rgba(16,185,129,.28),

        transparent 70%

    );

    left:-180px;

    bottom:-180px;

    filter:blur(40px);

    z-index:-1;

}


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

section{

    padding:100px 8%;

}


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

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.glass-card{

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

}

.glass-card:nth-child(2){

    animation-delay:1s;

}

.glass-card:nth-child(3){

    animation-delay:2s;

}
/*==================================================
    PART 2
    STATISTICS + FEATURES
==================================================*/


/*==============================
    STATISTICS
==============================*/

.stats{

    position:relative;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:-80px;

    z-index:20;

}


/*==============================
    STAT BOX
==============================*/

.stat-box{

    position:relative;

    overflow:hidden;

    padding:40px 25px;

    border-radius:20px;

    text-align:center;

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

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

    backdrop-filter:blur(18px);

    transition:.4s;

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

}

.stat-box::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:radial-gradient(

        rgba(37,99,235,.25),

        transparent 70%

    );

    top:-120px;

    right:-100px;

    transition:.5s;

}

.stat-box:hover{

    transform:translateY(-12px);

    border-color:rgba(16,185,129,.45);

}

.stat-box:hover::before{

    transform:scale(1.2);

}

.stat-box h2{

    font-size:52px;

    font-weight:800;

    color:#10B981;

    margin-bottom:10px;

}

.stat-box span{

    color:#CBD5E1;

    letter-spacing:1px;

    font-size:15px;

}


/*==============================
    FEATURE SECTION
==============================*/

.features{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    padding-top:80px;

    padding-bottom:100px;

}


/*==============================
    FEATURE CARD
==============================*/

.feature-card{

    position:relative;

    overflow:hidden;

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

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

    border-radius:22px;

    padding:45px 35px;

    transition:.45s;

    backdrop-filter:blur(15px);

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}


/* Gradient Line */

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        #2563EB,

        #10B981,

        #7C3AED

    );

}


/* Glow Circle */

.feature-card::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:radial-gradient(

        rgba(16,185,129,.20),

        transparent 70%

    );

    right:-120px;

    top:-120px;

    transition:.5s;

}


/*==============================
    FEATURE HOVER
==============================*/

.feature-card:hover{

    transform:translateY(-15px);

    border-color:#10B981;

    box-shadow:

        0 20px 60px rgba(0,0,0,.35),

        0 0 25px rgba(16,185,129,.18);

}

.feature-card:hover::after{

    transform:scale(1.3);

}


/*==============================
    FEATURE ICON
==============================*/

.feature-card i{

    width:90px;

    height:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

    background:linear-gradient(

        135deg,

        #2563EB,

        #10B981

    );

    color:white;

    font-size:38px;

    margin-bottom:30px;

    transition:.4s;

}

.feature-card:hover i{

    transform:rotate(-8deg) scale(1.08);

}


/*==============================
    FEATURE TITLE
==============================*/

.feature-card h3{

    font-size:26px;

    margin-bottom:18px;

    font-weight:700;

}


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

.feature-card p{

    color:#CBD5E1;

    font-size:16px;

    line-height:1.8;

}


/*==============================
    GLASS EFFECT
==============================*/

.glass-card{

    position:relative;

    overflow:hidden;

}

.glass-card::before{

    content:"";

    position:absolute;

    top:-80px;

    left:-80px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:radial-gradient(

        rgba(255,255,255,.15),

        transparent 70%

    );

}

.glass-card::after{

    content:"";

    position:absolute;

    bottom:-120px;

    right:-120px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(

        rgba(16,185,129,.15),

        transparent 70%

    );

}


/*==============================
    ICON FLOAT
==============================*/

.feature-card i,
.glass-card i{

    animation:iconFloat 4s ease-in-out infinite;

}

@keyframes iconFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==============================
    COUNTER
==============================*/

.counter{

    display:inline-block;

    position:relative;

}

.counter::after{

    content:"+";

    color:#10B981;

    margin-left:4px;

}


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

::selection{

    background:#10B981;

    color:white;

}


/*==============================
    UTILITY
==============================*/

.text-center{

    text-align:center;

}

.mt-50{

    margin-top:50px;

}

.mb-50{

    margin-bottom:50px;

}


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

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:48px;

    font-weight:800;

    margin-bottom:15px;

}

.section-title p{

    max-width:720px;

    margin:auto;

    color:#CBD5E1;

    font-size:18px;

}


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

.features{

    position:relative;

}

.features::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(

        rgba(124,58,237,.10),

        transparent 70%

    );

    top:-200px;

    left:-200px;

    z-index:-1;

}

.features::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(

        rgba(37,99,235,.12),

        transparent 70%

    );

    bottom:-220px;

    right:-220px;

    z-index:-1;

}
/*==================================================
    PART 3
    RESPONSIVE + ANIMATION
==================================================*/


/*==============================
    NAVBAR SCROLL
==============================*/

.navbar.scrolled{

    background:rgba(7,17,31,.88);

    backdrop-filter:blur(18px);

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

    border-radius:18px;

    margin-top:12px;

    padding:18px 35px;

    transition:.35s;

    box-shadow:0 10px 40px rgba(0,0,0,.35);

}


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

@media(max-width:992px){

.menu{

    position:fixed;

    top:0;

    right:-100%;

    width:300px;

    height:100vh;

    background:#081321;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:35px;

    transition:.45s;

    z-index:999;

}

.menu.active{

    right:0;

}

.menu-btn{

    display:block;

    z-index:1000;

}

.hero{

    flex-direction:column;

    justify-content:center;

    text-align:center;

}

.hero-content{

    margin-top:120px;

}

.hero-card-area{

    flex-direction:row;

    margin-top:60px;

    flex-wrap:wrap;

    justify-content:center;

}

}


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

@media(max-width:1200px){

.hero-content h1{

    font-size:58px;

}

.hero{

    gap:50px;

}

.stats{

    grid-template-columns:repeat(2,1fr);

}

}


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

@media(max-width:768px){

.hero{

    padding:120px 25px;

    height:auto;

}

.hero-content h1{

    font-size:42px;

}

.subtitle{

    font-size:13px;

}

.description{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-primary,

.btn-secondary{

    width:100%;

    text-align:center;

}

.stats{

    grid-template-columns:1fr;

}

.features{

    grid-template-columns:1fr;

}

.glass-card{

    width:100%;

}

.feature-card{

    padding:35px;

}

.section-title h2{

    font-size:34px;

}

}


/*==============================
    SMALL PHONE
==============================*/

@media(max-width:480px){

.logo{

    font-size:22px;

}

.hero-content h1{

    font-size:34px;

}

.stat-box h2{

    font-size:38px;

}

}


/*==============================
    SCROLL ANIMATION
==============================*/

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/*==============================
    FADE
==============================*/

.fade{

    opacity:0;

    transition:1s;

}

.fade.show{

    opacity:1;

}


/*==============================
    SLIDE LEFT
==============================*/

.slide-left{

    opacity:0;

    transform:translateX(-80px);

    transition:.8s;

}

.slide-left.show{

    opacity:1;

    transform:translateX(0);

}


/*==============================
    SLIDE RIGHT
==============================*/

.slide-right{

    opacity:0;

    transform:translateX(80px);

    transition:.8s;

}

.slide-right.show{

    opacity:1;

    transform:translateX(0);

}


/*==============================
    ZOOM
==============================*/

.zoom{

    opacity:0;

    transform:scale(.8);

    transition:.8s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}


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

.float{

    animation:floating 5s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}


/*==============================
    AURORA
==============================*/

body::before{

content:"";

position:fixed;

width:700px;

height:700px;

background:radial-gradient(

rgba(37,99,235,.18),

transparent 70%

);

top:-250px;

left:-250px;

filter:blur(80px);

animation:aurora1 12s linear infinite;

pointer-events:none;

z-index:-5;

}

body::after{

content:"";

position:fixed;

width:700px;

height:700px;

background:radial-gradient(

rgba(16,185,129,.15),

transparent 70%

);

bottom:-300px;

right:-250px;

filter:blur(80px);

animation:aurora2 15s linear infinite;

pointer-events:none;

z-index:-5;

}

@keyframes aurora1{

0%{

transform:translate(0,0);

}

50%{

transform:translate(150px,120px);

}

100%{

transform:translate(0,0);

}

}

@keyframes aurora2{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-150px,-120px);

}

100%{

transform:translate(0,0);

}

}


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

.hero-content{

transition:transform .25s linear;

}

.hero-card-area{

transition:transform .25s linear;

}

.bg-video{

transition:transform .25s linear;

}


/*==============================
    IMAGE HOVER
==============================*/

img{

transition:.5s;

}

img:hover{

transform:scale(1.05);

}


/*==============================
    BUTTON GLOW
==============================*/

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

width:40px;

height:250%;

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

top:-60%;

left:-120px;

transform:rotate(25deg);

transition:.8s;

}

.btn-primary:hover::before{

left:150%;

}


/*==============================
    GLASS SHINE
==============================*/

.glass-card::after{

animation:shine 8s infinite;

}

@keyframes shine{

0%{

transform:translateX(-250px);

}

50%{

transform:translateX(250px);

}

100%{

transform:translateX(-250px);

}

}


/*==============================
    CARD HOVER
==============================*/

.feature-card:hover{

transform:

translateY(-12px)

rotateX(4deg)

rotateY(-4deg);

}


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

::selection{

background:#10B981;

color:white;

}


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

.hidden{

display:none;

}

.text-gradient{

background:linear-gradient(

90deg,

#2563EB,

#10B981,

#7C3AED

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

color:transparent;

}
/*==================================================
    PART 4
    DASHBOARD + CONTACT + FOOTER
==================================================*/


/*==================================================
    DASHBOARD SECTION
==================================================*/


.dashboard-section{

    position:relative;

    padding:120px 8%;

}


.dashboard-title{

    text-align:center;

    margin-bottom:70px;

}


.dashboard-title h2{

    font-size:48px;

    font-weight:800;

}


.dashboard-title span{

    background:linear-gradient(

        90deg,

        #2563EB,

        #10B981

    );

    -webkit-background-clip:text;

    color:transparent;

}


.dashboard-title p{

    margin-top:20px;

    color:#CBD5E1;

    font-size:18px;

}



/*==============================
    DASHBOARD CONTAINER
==============================*/


.dashboard{

    display:grid;

    grid-template-columns:

    repeat(12,1fr);

    gap:25px;

}



/*==============================
    DASHBOARD CARD
==============================*/


.dashboard-card{

    background:

    rgba(255,255,255,.06);

    border:

    1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    border-radius:25px;

    padding:30px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.25);

    transition:.4s;

}


.dashboard-card:hover{

    transform:translateY(-10px);

    border-color:#10B981;

}



/*==============================
    GRID SIZE
==============================*/


.card-large{

    grid-column:span 8;

}


.card-medium{

    grid-column:span 4;

}


.card-full{

    grid-column:span 12;

}



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


.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}


.dashboard-header h3{

    font-size:22px;

}


.dashboard-header i{

    font-size:30px;

    color:#10B981;

}



/*==============================
    KPI BOX
==============================*/


.kpi-container{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:20px;

}


.kpi-box{

    padding:25px;

    border-radius:18px;

    background:

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

    text-align:center;

}


.kpi-box h2{

    font-size:38px;

    color:#10B981;

}


.kpi-box p{

    color:#CBD5E1;

}



/*==============================
    SENSOR STATUS
==============================*/


.sensor-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.sensor-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.sensor-name{

    display:flex;

    align-items:center;

    gap:12px;

}



.sensor-name i{

    color:#2563EB;

}


.status{

    padding:6px 15px;

    border-radius:30px;

    font-size:13px;

}



.status.online{

    background:

    rgba(16,185,129,.15);

    color:#10B981;

}


.status.warning{

    background:

    rgba(245,158,11,.15);

    color:#F59E0B;

}



/*==============================
    CHART PLACEHOLDER
==============================*/


.chart-box{

    height:280px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:

    linear-gradient(

    145deg,

    rgba(37,99,235,.12),

    rgba(16,185,129,.08)

    );

}


.chart-box span{

    color:#94A3B8;

}



/*==================================================
    INDUSTRY TAGS
==================================================*/


.industry-tags{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}



.tag{

    padding:12px 25px;

    border-radius:50px;

    background:

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

    border:

    1px solid rgba(255,255,255,.15);

    transition:.3s;

}



.tag:hover{

    background:#10B981;

    color:#07111F;

}



/*==================================================
    CONTACT SECTION
==================================================*/


.contact{

    padding:120px 8%;

    position:relative;

}


.contact-container{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:60px;

}



/* LEFT */


.contact-info h2{

    font-size:50px;

    margin-bottom:25px;

}


.contact-info p{

    color:#CBD5E1;

    font-size:18px;

}



.contact-item{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:30px;

}



.contact-item i{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(

    135deg,

    #2563EB,

    #10B981

    );

}



/* RIGHT FORM */


.contact-form{

    padding:40px;

    background:

    rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

    border-radius:25px;

    border:

    1px solid rgba(255,255,255,.12);

}



.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px 20px;

    margin-bottom:20px;

    border-radius:15px;

    background:

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

    border:

    1px solid rgba(255,255,255,.1);

    color:white;

    font-family:Poppins;

}


.contact-form textarea{

    height:150px;

    resize:none;

}


.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:#10B981;

}



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


footer{

    padding:70px 8%;

    background:#020617;

    text-align:center;

    border-top:

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

}



footer h2{

    font-size:35px;

    margin-bottom:15px;

}


footer p{

    color:#94A3B8;

}



.footer-links{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:25px;

}


.footer-links a{

    color:#CBD5E1;

    transition:.3s;

}


.footer-links a:hover{

    color:#10B981;

}



/*==================================================
    SOCIAL ICON
==================================================*/


.social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:30px;

}


.social a{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

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

    transition:.3s;

}



.social a:hover{

    background:#10B981;

    color:#07111F;

    transform:translateY(-5px);

}



/*==================================================
    UTILITY CLASSES
==================================================*/


.container{

    width:90%;

    max-width:1400px;

    margin:auto;

}


.flex{

    display:flex;

}


.center{

    display:flex;

    justify-content:center;

    align-items:center;

}


.grid{

    display:grid;

}


.mt-20{

    margin-top:20px;

}


.mt-50{

    margin-top:50px;

}


.mb-20{

    margin-bottom:20px;

}


.mb-50{

    margin-bottom:50px;

}


.p-30{

    padding:30px;

}


.round{

    border-radius:50%;

}


.gradient-text{

    background:

    linear-gradient(

    90deg,

    #2563EB,

    #10B981,

    #7C3AED

    );

    -webkit-background-clip:text;

    color:transparent;

}



.glass{

    background:

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

    backdrop-filter:

    blur(20px);

    border:

    1px solid rgba(255,255,255,.12);

}



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


@media(max-width:1000px){


.dashboard{

    grid-template-columns:1fr;

}


.card-large,

.card-medium,

.card-full{

    grid-column:span 1;

}


.contact-container{

    grid-template-columns:1fr;

}


.kpi-container{

    grid-template-columns:1fr;

}


}



@media(max-width:600px){


.dashboard-title h2{

    font-size:34px;

}


.contact-info h2{

    font-size:36px;

}


.contact-form{

    padding:25px;

}


}
/*=========================
CHAT BUTTON
=========================*/

#chatToggle{

position:fixed;

right:35px;

bottom:35px;

width:70px;

height:70px;

border:none;

border-radius:50%;

background:linear-gradient(
135deg,
#2563EB,
#10B981
);

color:white;

font-size:28px;

cursor:pointer;

z-index:9999;

box-shadow:0 20px 45px rgba(0,0,0,.35);

transition:.3s;

}

#chatToggle:hover{

transform:scale(1.08);

}

/*=========================
CHAT WINDOW
=========================*/

#chatWindow{

position:fixed;

right:35px;

bottom:50px;

width:420px;

height:650px;

background:#07111F;

border-radius:22px;

display:none;

flex-direction:column;

overflow:hidden;

box-shadow:0 30px 70px rgba(0,0,0,.45);

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

z-index:9999;

}

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

.chat-header{

padding:20px;

display:flex;

justify-content:space-between;

align-items:center;

background:#0F172A;

}

.chat-title{

display:flex;

gap:15px;

align-items:center;

}

.chat-title i{

font-size:34px;

color:#10B981;

}

.status{

font-size:12px;

color:#10B981;

}

#closeChat{

background:none;

border:none;

color:white;

font-size:22px;

cursor:pointer;

}

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

.chat-body{

flex:1;

padding:20px;

overflow-y:auto;

display:flex;

flex-direction:column;

gap:20px;

background:#081321;

}

.message{

padding:16px;

border-radius:16px;

max-width:80%;

line-height:1.6;

}

.ai{

align-self:flex-start;

background:#1E293B;

}

.user{

align-self:flex-end;

background:#2563EB;

}

/*=========================
INPUT
=========================*/

.chat-input{

display:flex;

padding:15px;

gap:10px;

background:#0F172A;

}

.chat-input input{

flex:1;

padding:15px;

border:none;

border-radius:12px;

background:#1E293B;

color:white;

}

.chat-input button{

width:55px;

border:none;

border-radius:12px;

background:#10B981;

color:white;

cursor:pointer;

}