/* ===========================
   CYBROX ROBOTICS
   Premium Futuristic Theme
=========================== */

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

:root{

    --bg:#071018;
    --bg2:#0d1825;
    --card:#111d2b;
    --primary:#ff2d55;
    --secondary:#00e5ff;
    --blue:#4f8cff;
    --white:#ffffff;
    --text:#d6e3f3;
    --border:rgba(255,255,255,.08);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:linear-gradient(180deg,#050b12,#08131f,#0b1724);
    color:var(--text);
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    color:inherit;

}

ul{

    list-style:none;

}

section{

    padding:120px 8%;

}

.container{

    width:100%;
    max-width:1400px;
    margin:auto;

}

/* Glow Background */

body::before{

    content:"";
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at 15% 20%,rgba(255,45,85,.15),transparent 30%),
    radial-gradient(circle at 85% 20%,rgba(0,229,255,.12),transparent 30%),
    radial-gradient(circle at 50% 90%,rgba(79,140,255,.12),transparent 35%);
    z-index:-1;

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

header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    background:rgba(8,15,25,.85);
    backdrop-filter:blur(18px);

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

}

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

.navbar{

    max-width:1400px;

    height:85px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

}

/* ===========================
   LOGO
=========================== */

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:58px;

    height:58px;

    object-fit:contain;

    transition:.4s;

}

.logo img:hover{

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

}

.logo h2{

    color:white;

    font-size:24px;

    font-weight:700;

}

.logo span{

    color:var(--primary);

}

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

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-links a{

    color:#dce6f3;

    font-size:16px;

    font-weight:500;

    transition:.35s;

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.nav-links a:hover{

    color:white;

}

.nav-links a:hover::after{

    width:100%;

}

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

.nav-btn{

    padding:13px 28px;

    border-radius:40px;

    background:linear-gradient(90deg,#ff2d55,#ff5b76);

    color:white;

    font-weight:600;

    transition:.35s;

}

.nav-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(255,45,85,.35);

}

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

.menu-toggle{

    display:none;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:28px;

    height:3px;

    margin:5px;

    border-radius:20px;

    background:white;

}/* =====================================
   HERO SECTION
===================================== */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:100px;

}

.hero-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.hero-content h5{

    color:var(--secondary);

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:20px;

    text-transform:uppercase;

}

.hero-content h1{

    font-size:68px;

    line-height:1.1;

    font-weight:800;

    color:white;

    margin-bottom:25px;

}

.hero-content h1 span{

    color:var(--primary);

}

.hero-content p{

    font-size:18px;

    color:#b8c8dc;

    line-height:1.8;

    margin-bottom:40px;

    max-width:650px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    padding:16px 36px;

    border-radius:50px;

    background:linear-gradient(90deg,#ff2d55,#ff5b76);

    color:#fff;

    font-weight:600;

    transition:.4s;

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(255,45,85,.35);

}

.btn-secondary{

    padding:16px 36px;

    border:2px solid var(--secondary);

    border-radius:50px;

    color:var(--secondary);

    font-weight:600;

    transition:.4s;

}

.btn-secondary:hover{

    background:var(--secondary);

    color:#000;

}

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

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:100%;

    max-width:600px;

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

    filter:drop-shadow(0 0 40px rgba(0,229,255,.25));

}

/* Glow Behind Rover */

.hero-image::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:radial-gradient(circle,
    rgba(0,229,255,.18),
    transparent 70%);

    border-radius:50%;

    z-index:-1;

}

/* Floating Animation */

@keyframes floatRobot{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}/* =====================================
   STATS SECTION
===================================== */

.stats{

    padding:90px 8%;

}

.stats-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.stat-card{

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

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

    border-radius:25px;

    padding:45px 25px;

    text-align:center;

    backdrop-filter:blur(15px);

    transition:.4s;

}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:var(--secondary);

    box-shadow:0 20px 45px rgba(0,229,255,.15);

}

.stat-card h2{

    font-size:48px;

    color:var(--primary);

    margin-bottom:15px;

    font-weight:800;

}

.stat-card h4{

    color:white;

    font-size:20px;

    margin-bottom:10px;

}

.stat-card p{

    color:#b8c8dc;

    line-height:1.7;

    font-size:15px;

}/* =====================================
   ABOUT SECTION
===================================== */

.about{

    padding:130px 8%;

}

.about-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    max-width:550px;

    margin:auto;

    border-radius:30px;

    transition:.5s;

    filter:drop-shadow(0 0 35px rgba(0,229,255,.2));

}

.about-image img:hover{

    transform:scale(1.03);

}

.about-content h5{

    color:var(--secondary);

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:20px;

}

.about-content h2{

    color:white;

    font-size:52px;

    line-height:1.2;

    margin-bottom:25px;

}

.about-content span{

    color:var(--primary);

}

.about-content p{

    color:#b9c7d8;

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;

}

/* Feature Cards */

.about-features{

    display:grid;

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

    gap:20px;

}

.feature-box{

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

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

    border-radius:20px;

    padding:25px;

    transition:.4s;

}

.feature-box:hover{

    transform:translateY(-8px);

    border-color:var(--secondary);

    box-shadow:0 15px 30px rgba(0,229,255,.15);

}

.feature-box h3{

    color:white;

    margin-bottom:12px;

    font-size:20px;

}

.feature-box p{

    color:#b8c8dc;

    font-size:15px;

    line-height:1.7;

    margin:0;

}/* =====================================
   FEATURED PROJECTS
===================================== */

.projects{

    padding:130px 8%;

}

.projects-title{

    text-align:center;

    margin-bottom:70px;

}

.projects-title h5{

    color:var(--secondary);

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:18px;

}

.projects-title h2{

    color:white;

    font-size:52px;

}

.projects-title span{

    color:var(--primary);

}

.projects-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:35px;

}

.project-card{

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

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

    border-radius:30px;

    overflow:hidden;

    transition:.45s;

    backdrop-filter:blur(15px);

}

.project-card:hover{

    transform:translateY(-15px);

    border-color:var(--secondary);

    box-shadow:0 20px 45px rgba(0,229,255,.18);

}

.project-card img{

    width:100%;

    height:250px;

    object-fit:cover;

}

.project-content{

    padding:30px;

}

.project-content h3{

    color:white;

    font-size:28px;

    margin-bottom:15px;

}

.project-content p{

    color:#b8c8dc;

    line-height:1.8;

    margin-bottom:25px;

}

.project-btn{

    display:inline-block;

    padding:14px 28px;

    border-radius:50px;

    background:linear-gradient(90deg,#ff2d55,#ff5b76);

    color:white;

    font-weight:600;

    transition:.35s;

}

.project-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(255,45,85,.35);

}/* =====================================
   WHY CHOOSE CYBROX
===================================== */

.why{

    padding:130px 8%;

}

.why-title{

    text-align:center;

    margin-bottom:70px;

}

.why-title h5{

    color:var(--secondary);

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:18px;

}

.why-title h2{

    color:white;

    font-size:52px;

}

.why-title span{

    color:var(--primary);

}

.why-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:35px;

}

.why-card{

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

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

    border-radius:30px;

    padding:45px 35px;

    text-align:center;

    transition:.45s;

    backdrop-filter:blur(18px);

}

.why-card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

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

}

.why-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#ff2d55,#00e5ff);

    color:white;

    font-size:40px;

    margin-bottom:25px;

}

.why-card h3{

    color:white;

    font-size:26px;

    margin-bottom:18px;

}

.why-card p{

    color:#b8c8dc;

    line-height:1.8;

    font-size:16px;

}/* =====================================
   FOUNDER SECTION
===================================== */

.founder{

    padding:140px 8%;

}

.founder-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:80px;

    align-items:center;

}

.founder-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.founder-image img{

    width:100%;

    max-width:380px;

    border-radius:30px;

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

    transition:.5s;

    box-shadow:0 20px 60px rgba(0,229,255,.15);

}

.founder-image img:hover{

    transform:scale(1.04);

    box-shadow:0 25px 70px rgba(255,45,85,.25);

}

.founder-content h5{

    color:var(--secondary);

    letter-spacing:3px;

    font-size:18px;

    margin-bottom:20px;

}

.founder-content h2{

    font-size:54px;

    color:white;

    margin-bottom:20px;

}

.founder-content h2 span{

    color:var(--primary);

}

.founder-content h4{

    color:var(--secondary);

    font-size:24px;

    margin-bottom:25px;

}

.founder-content p{

    color:#b8c8dc;

    line-height:1.9;

    font-size:17px;

    margin-bottom:35px;

}

.founder-info{

    display:grid;

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

    gap:20px;

}

.info-card{

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

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

    border-radius:20px;

    padding:22px;

    transition:.35s;

}

.info-card:hover{

    transform:translateY(-8px);

    border-color:var(--secondary);

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

}

.info-card h3{

    color:white;

    font-size:18px;

    margin-bottom:10px;

}

.info-card p{

    margin:0;

    color:#b8c8dc;

    font-size:15px;

}

.social-links{

    display:flex;

    gap:18px;

    margin-top:35px;

}

.social-links a{

    width:55px;

    height:55px;

    border-radius:50%;

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

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

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    color:white;

    transition:.35s;

}

.social-links a:hover{

    background:var(--primary);

    transform:translateY(-6px);

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

.contact{

    padding:140px 8%;

}

.contact-title{

    text-align:center;

    margin-bottom:70px;

}

.contact-title h5{

    color:var(--secondary);

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:20px;

}

.contact-title h2{

    color:white;

    font-size:54px;

}

.contact-title span{

    color:var(--primary);

}

.contact-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contact-card{

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

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

    border-radius:25px;

    padding:28px;

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:var(--secondary);

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

}

.contact-card h3{

    color:white;

    margin-bottom:12px;

}

.contact-card p{

    color:#b8c8dc;

}

.contact-form{

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

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

    border-radius:30px;

    padding:40px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px;

    margin-bottom:20px;

    background:#101c2a;

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

    border-radius:15px;

    color:white;

    font-size:16px;

}

.contact-form textarea{

    resize:none;

    height:180px;

}

.contact-form button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:linear-gradient(90deg,#ff2d55,#ff5b76);

    color:white;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.contact-form button:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(255,45,85,.30);

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

.footer{

    padding:80px 8% 30px;

    background:#050b12;

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

}

.footer-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

.footer-logo h2{

    color:white;

    font-size:34px;

    margin-bottom:20px;

}

.footer-logo span{

    color:var(--primary);

}

.footer-logo p{

    color:#b8c8dc;

    line-height:1.9;

    max-width:420px;

}

.footer-links h3{

    color:white;

    margin-bottom:25px;

    font-size:22px;

}

.footer-links ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-links a{

    color:#b8c8dc;

    transition:.35s;

}

.footer-links a:hover{

    color:var(--secondary);

    padding-left:8px;

}

.footer-social{

    display:flex;

    gap:18px;

    margin-top:30px;

}

.footer-social a{

    width:50px;

    height:50px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-5px);

}

.footer-bottom{

    max-width:1400px;

    margin:60px auto 0;

    padding-top:25px;

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

    text-align:center;

    color:#9fb3c9;

    font-size:15px;

}/* =====================================
   RESPONSIVE DESIGN
===================================== */

/* Large Laptop */

@media(max-width:1400px){

.hero-grid,
.about-grid,
.founder-grid,
.contact-grid{

max-width:1200px;

}

}

/* Laptop */

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-content{

order:2;

}

.hero-image{

order:1;

}

.hero-content p{

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.about-grid{

grid-template-columns:1fr;

text-align:center;

}

.projects-grid{

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

}

.why-grid{

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

}

.stats-grid{

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

}

.founder-grid{

grid-template-columns:1fr;

text-align:center;

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

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

}

}

/* Tablet */

@media(max-width:992px){

.nav-links{

display:none;

position:absolute;

top:85px;

left:0;

width:100%;

background:#08131f;

flex-direction:column;

padding:30px;

gap:25px;

}

.nav-links.active{

display:flex;

}

.menu-toggle{

display:block;

}

.projects-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.about-features{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:52px;

}

.about-content h2,

.projects-title h2,

.why-title h2,

.contact-title h2,

.founder-content h2{

font-size:42px;

}

}

/* Mobile */

@media(max-width:768px){

section{

padding:90px 6%;

}

.navbar{

padding:0 20px;

}

.logo h2{

font-size:20px;

}

.logo img{

width:45px;

height:45px;

}

.hero-content h1{

font-size:40px;

}

.hero-content p{

font-size:16px;

}

.btn-primary,

.btn-secondary{

width:100%;

text-align:center;

}

.hero-buttons{

flex-direction:column;

}

.about-content h2,

.projects-title h2,

.why-title h2,

.contact-title h2,

.founder-content h2{

font-size:34px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo p{

margin:auto;

}

.footer-social{

justify-content:center;

}

}

/* Small Phones */

@media(max-width:480px){

.hero-content h1{

font-size:32px;

}

.hero-content h5{

font-size:14px;

}

.stat-card h2{

font-size:38px;

}

.project-content h3{

font-size:24px;

}

}/* =====================================
   PREMIUM SCROLLBAR
===================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#08131f;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(180deg,#ff2d55,#00e5ff);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:linear-gradient(180deg,#ff5b76,#4f8cff);

}

/* Firefox */

html{

    scrollbar-width:thin;

    scrollbar-color:#ff2d55 #08131f;

}

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

::selection{

    background:#ff2d55;

    color:white;

}

::-moz-selection{

    background:#ff2d55;

    color:white;

}

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

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* Left */

.reveal-left{

    opacity:0;

    transform:translateX(-80px);

    transition:1s ease;

}

.reveal-left.active{

    opacity:1;

    transform:translateX(0);

}

/* Right */

.reveal-right{

    opacity:0;

    transform:translateX(80px);

    transition:1s ease;

}

.reveal-right.active{

    opacity:1;

    transform:translateX(0);

}

/* Zoom */

.reveal-scale{

    opacity:0;

    transform:scale(.8);

    transition:1s ease;

}

.reveal-scale.active{

    opacity:1;

    transform:scale(1);

}/* =====================================
   MOUSE GLOW EFFECT
===================================== */

.cursor-glow{

    position:fixed;

    width:450px;

    height:450px;

    border-radius:50%;

    pointer-events:none;

    background:radial-gradient(circle,
        rgba(0,229,255,.18),
        transparent 70%);

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

    z-index:-1;

    transition:
        width .25s,
        height .25s;

}<div id="loader">

    <div class="loader-logo">

        <img src="assets/images/logo.png" alt="CYBROX">

        <h2>CYBROX <span>Robotics</span></h2>

    </div>

</div>/* =====================================
   ANIMATED HERO BACKGROUND
===================================== */

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
        rgba(255,45,85,.12),
        transparent 70%);

    top:-200px;

    left:-150px;

    animation:blob1 10s ease-in-out infinite;

    z-index:-1;

}

.hero::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:radial-gradient(circle,
        rgba(0,229,255,.10),
        transparent 70%);

    bottom:-200px;

    right:-100px;

    animation:blob2 12s ease-in-out infinite;

    z-index:-1;

}

@keyframes blob1{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(80px,40px);

    }

}

@keyframes blob2{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-70px,-60px);

    }

}.project-card,
.feature-box,
.why-card,
.stat-card,
.info-card{

    position:relative;

}

.project-card::after,
.feature-box::after,
.why-card::after,
.stat-card::after,
.info-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        rgba(255,45,85,.08),
        rgba(0,229,255,.08)
    );

    opacity:0;

    transition:.4s;

}

.project-card:hover::after,
.feature-box:hover::after,
.why-card:hover::after,
.stat-card:hover::after,
.info-card:hover::after{

    opacity:1;

}.project-card{

    overflow:hidden;

}

.project-card img{

    transition:.6s;

}

.project-card:hover img{

    transform:scale(1.08);

}.float{

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

}

@keyframes floatIcon{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}.gradient-text{

    background:linear-gradient(
        90deg,
        #ff2d55,
        #00e5ff,
        #4f8cff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}.section-divider{

    width:180px;

    height:5px;

    margin:25px auto;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #ff2d55,
        #00e5ff
    );

}/* =====================================
   PREMIUM GLASS NAVBAR
===================================== */

header{

backdrop-filter:blur(25px);

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

background:rgba(5,12,20,.65);

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

box-shadow:

0 10px 40px rgba(0,0,0,.25);

}.gradient-border{

position:relative;

border-radius:30px;

overflow:hidden;

}

.gradient-border::before{

content:"";

position:absolute;

inset:-2px;

background:linear-gradient(

90deg,

#ff2d55,

#00e5ff,

#4f8cff,

#ff2d55

);

background-size:400%;

animation:borderMove 6s linear infinite;

z-index:-1;

}

@keyframes borderMove{

0%{

background-position:0%;

}

100%{

background-position:400%;

}

}.ai-grid{

position:fixed;

inset:0;

z-index:-5;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

background-size:60px 60px;

opacity:.45;

}.btn-primary{

box-shadow:

0 0 25px rgba(255,45,85,.25),

0 0 60px rgba(255,45,85,.12);

}

.btn-primary:hover{

box-shadow:

0 0 40px rgba(255,45,85,.45),

0 0 90px rgba(255,45,85,.25);

}.section-title{

position:relative;

display:inline-block;

}

.section-title::after{

content:"";

position:absolute;

left:50%;

bottom:-15px;

transform:translateX(-50%);

width:0;

height:4px;

border-radius:50px;

background:linear-gradient(

90deg,

#ff2d55,

#00e5ff

);

animation:titleLine 3s infinite;

}

@keyframes titleLine{

0%{

width:0;

}

50%{

width:120px;

}

100%{

width:0;

}

}img{

transition:.6s;

}

img:hover{

filter:

brightness(1.08)

contrast(1.05)

drop-shadow(0 0 25px rgba(0,229,255,.25));

}