/* ==========================================================
   AMJ VISUALS
   Premium Website Stylesheet
========================================================== */

/* 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:#050505;

    color:#fff;

    overflow-x:hidden;

    line-height:1.7;

}

.logo img{
    height:60px;
    width:auto;
    display:block;
}

@media (max-width:768px){
    .logo img{
        height:45px;
    }
}


.clients{
    padding:100px 0;
}

.clients .section-title{
    text-align:center;
    margin-bottom:60px;
}

.clients .section-title h2{
    font-size:42px;
    color:#fff;
    margin-top:10px;
}

.clients-slider{
    overflow:hidden;
    position:relative;
}

.clients-track{
    display:flex;
    gap:35px;
    width:max-content;
    animation:clientsMove 20s linear infinite;
}

.client-box{

    width:220px;
    height:130px;

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

    border-radius:22px;

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

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

    backdrop-filter:blur(18px);

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

    transition:.4s ease;

    cursor:pointer;

}

.client-box:hover{

    transform:translateY(1.03);

    border-color:#00e5ff;

    box-shadow:
        0 25px 55px rgba(0,229,255,.35),
        0 0 30px rgba(0,229,255,.25);

}

.client-box img{

    max-width:140px;
    max-height:70px;

    object-fit:contain;

    

    transition:.4s;

}

.client-box a{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.client-box:hover img{

    filter:none;

    transform:scale(1.08);

}

.clients-slider:hover .clients-track{

    animation-play-state:paused;

}

@keyframes clientsMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* VARIABLES */

:root{

    --primary:#00e5ff;

    --secondary:#0066ff;

    --dark:#050505;

    --card:#111111;

    --white:#ffffff;

    --text:#cfcfcf;

    --radius:18px;

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

    --transition:.4s ease;

}

/* CUSTOM SCROLLBAR */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

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

border-radius:100px;

}

/* CONTAINER */

.container{

width:90%;

max-width:1300px;

margin:auto;

}

/* LINKS */

a{

text-decoration:none;

color:white;

transition:.35s;

}

img{

width:100%;

display:block;

}

/* SECTION */

section{

padding:100px 0;

position:relative;

}

/* SECTION TITLE */

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-tag{

display:inline-block;

padding:8px 22px;

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

border-radius:50px;

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

backdrop-filter:blur(15px);

color:var(--primary);

font-size:.85rem;

letter-spacing:2px;

margin-bottom:20px;

}

.section-title h2{

font-size:3rem;

margin-bottom:15px;

font-weight:700;

}

.section-title p{

color:#aaa;

max-width:700px;

margin:auto;

}

/* BUTTON */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

border-radius:100px;

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

color:#fff;

font-weight:600;

letter-spacing:.5px;

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

transition:.35s;

position:relative;

overflow:hidden;

cursor:pointer;

}

.btn:hover{

transform:translateY(-5px);

box-shadow:0 25px 50px rgba(0,229,255,.45);

}

.btn:active{

transform:scale(.96);

}

/* HEADER */

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:20px 0;

transition:.4s;

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

backdrop-filter:blur(18px);

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo h2{

font-size:2rem;

font-weight:800;

}

.logo span{

color:var(--primary);

}

nav ul{

display:flex;

gap:40px;

list-style:none;

}

nav ul li a{

font-weight:500;

position:relative;

}

nav ul li a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

nav ul li a:hover::after{

width:100%;

}

.menu{

display:none;

font-size:2rem;

cursor:pointer;

}

/* HERO */

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

overflow:hidden;

position:relative;

}

.hero video{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

top:0;

left:0;

z-index:-3;

}

.video-overlay{

position:absolute;

width:100%;

height:100%;

background:linear-gradient(to bottom,
rgba(0,0,0,.65),
rgba(0,0,0,.85));

z-index:-2;

}

.hero-content{

max-width:900px;

padding:20px;

animation:fadeUp 1.2s ease;

}

.hero h4{

color:var(--primary);

letter-spacing:3px;

margin-bottom:15px;

}

.hero h1{

font-size:5rem;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero h1 span{

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

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:1.15rem;

color:#ddd;

margin-bottom:40px;

}

.hero-btn{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn2{

background:transparent;

border:2px solid white;

}

.btn2:hover{

background:white;

color:#000;

}

.scroll{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

animation:float 2s infinite;

}

.scroll span{

display:block;

font-size:.85rem;

margin-bottom:10px;

}

/* ANIMATION */

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(80px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes float{

0%{

transform:translate(-50%,0);

}

50%{

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

}

100%{

transform:translate(-50%,0);

}

}

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

.about-content{

display:grid;

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

gap:80px;

align-items:center;

}

.about-left h2{

font-size:3rem;

margin:20px 0;

line-height:1.2;

}

.about-left p{

color:#bdbdbd;

margin-bottom:25px;

font-size:1.05rem;

}

.about-features{

margin:40px 0;

}

.feature{

display:flex;

align-items:center;

gap:15px;

margin-bottom:18px;

font-size:1rem;

}

.feature i{

width:45px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

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

border-radius:50%;

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

}

.about-right{

position:relative;

}

.about-right img{

border-radius:25px;

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

transition:.5s;

}

.about-right:hover img{

transform:scale(1.03);

}

/* Floating Glow */

.about-right::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:#00e5ff;

filter:blur(140px);

opacity:.25;

top:-50px;

right:-40px;

z-index:-1;

}

/* ==========================================================
SERVICES
========================================================== */

.services-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.service-card{

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

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

backdrop-filter:blur(18px);

padding:45px 35px;

border-radius:25px;

transition:.45s;

position:relative;

overflow:hidden;

cursor:pointer;

}

.service-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:250px;

height:250px;

background:radial-gradient(circle,#00e5ff55,transparent);

transition:.5s;

}

.service-card:hover::before{

transform:scale(1.4);

}

.service-card:hover{

transform:translateY(-15px);

border-color:#00e5ff;

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

}

.service-card i{

font-size:3rem;

margin-bottom:25px;

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

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.service-card h3{

font-size:1.5rem;

margin-bottom:15px;

}

.service-card p{

color:#bdbdbd;

}

/* Ripple Hover */

.service-card::after{

content:"";

position:absolute;

left:50%;

top:50%;

width:0;

height:0;

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

border-radius:50%;

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

transition:.6s;

}

.service-card:hover::after{

width:700px;

height:700px;

}

/* ==========================================================
SECTION HOVER EFFECT
========================================================== */

section:hover .section-tag{

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

color:white;

transition:.4s;

}

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

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

width:0;

height:0;

left:50%;

top:50%;

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

border-radius:50%;

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

transition:.6s;

}

.btn:hover::before{

width:400px;

height:400px;

}

.btn span{

position:relative;

z-index:2;

}

/* ==========================================================
PORTFOLIO
========================================================== */

.portfolio-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.portfolio-item{

position:relative;

overflow:hidden;

border-radius:25px;

cursor:pointer;

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

}

.portfolio-item img{

width:100%;

height:320px;

object-fit:cover;

transition:1s;

}

.portfolio-item:hover img{

transform:scale(1.15);

}

.overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:30px;

background:linear-gradient(to top,
rgba(0,0,0,.95),
rgba(0,0,0,.15));

transform:translateY(100%);

transition:.5s;

}

.portfolio-item:hover .overlay{

transform:translateY(0);

}

.overlay h3{

font-size:1.7rem;

margin-bottom:10px;

}

.overlay p{

color:#00e5ff;

font-size:15px;

letter-spacing:1px;

}

/* Glow */

.portfolio-item::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(135deg,
transparent,
rgba(0,229,255,.15),
transparent);

opacity:0;

transition:.5s;

z-index:2;

}

.portfolio-item:hover::before{

opacity:1;

}

/* ==========================================================
GALLERY
========================================================== */

.gallery-grid{

display:grid;

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

gap:20px;

margin-top:60px;

}

.gallery-item{

overflow:hidden;

border-radius:20px;

position:relative;

cursor:pointer;

}

.gallery-item img{

width:100%;

height:260px;

object-fit:cover;

transition:.8s;

}

.gallery-item:hover img{

transform:scale(1.12) rotate(2deg);

}

.gallery-item::after{

position:absolute;

top:50%;

left:50%;

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

width:70px;

height:70px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(0,229,255,.85);

font-size:38px;

font-weight:bold;

transition:.4s;

}

.gallery-item:hover::after{

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

}

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

.gallery-item::before{

content:"";

position:absolute;

inset:0;

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

opacity:0;

transition:.35s;

z-index:1;

}

.gallery-item:hover::before{

opacity:1;

}

/* ==========================================================
PREMIUM CARD EFFECT
========================================================== */

.portfolio-item,
.gallery-item{

transition:.35s;

}

.portfolio-item:hover,
.gallery-item:hover{

box-shadow:

0 20px 60px rgba(0,229,255,.18),

0 0 30px rgba(0,229,255,.15);

}

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

#portfolio,
#gallery{

position:relative;

overflow:hidden;

}

#portfolio::before,
#gallery::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:#00e5ff;

filter:blur(220px);

opacity:.08;

top:-100px;

right:-150px;

z-index:-1;

}

#portfolio::after,
#gallery::after{

content:"";

position:absolute;

width:350px;

height:350px;

background:#0066ff;

filter:blur(180px);

opacity:.08;

bottom:-100px;

left:-100px;

z-index:-1;

}

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

#stats{
    background:#080808;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    margin-top:60px;
}

.stat-box{

    text-align:center;

    padding:50px 30px;

    border-radius:25px;

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

    backdrop-filter:blur(20px);

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

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.stat-box::before{

    content:"";

    position:absolute;

    inset:0;

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

    transform:translateX(-100%);

    transition:.8s;

}

.stat-box:hover::before{

    transform:translateX(100%);

}

.stat-box:hover{

    transform:translateY(-12px);

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

}

.stat-box i{

    font-size:55px;

    color:#00e5ff;

    margin-bottom:25px;

}

.stat-box h2{

    font-size:3rem;

    margin-bottom:10px;

    color:white;

}

.stat-box p{

    color:#bdbdbd;

    font-size:17px;

}

/* ==========================================================
TESTIMONIALS
========================================================== */

#reviews{

    background:#050505;

}

.testimonial-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.testimonial-card{

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

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

    border-radius:25px;

    padding:40px;

    backdrop-filter:blur(18px);

    transition:.4s;

    position:relative;

}

.testimonial-card:hover{

    transform:translateY(-12px);

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

}

.stars{

    color:#FFD54A;

    font-size:22px;

    margin-bottom:20px;

}

.testimonial-card p{

    color:#d7d7d7;

    line-height:1.8;

    margin-bottom:30px;

}

.client{

    display:flex;

    align-items:center;

    gap:18px;

}

.client img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #00e5ff;

}

.client h4{

    margin-bottom:4px;

}

.client span{

    color:#00e5ff;

    font-size:14px;

}

/* ==========================================================
CARD GLOW
========================================================== */

.testimonial-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:#00e5ff;

    filter:blur(120px);

    opacity:.10;

    right:-60px;

    top:-60px;

    z-index:-1;

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.stat-box:nth-child(1){

    animation:floating 5s infinite;

}

.stat-box:nth-child(2){

    animation:floating 6s infinite;

}

.stat-box:nth-child(3){

    animation:floating 7s infinite;

}

.stat-box:nth-child(4){

    animation:floating 8s infinite;

}

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

.contact-wrapper {
    margin-top: 60px;
    width: 100%;
}


/* CONTACT INFO GRID */

.contact-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    width: 100%;
}


/* CONTACT BOX */

.info-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    padding: 30px;

    border-radius: 20px;

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

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition: 0.35s ease;
}


/* HOVER EFFECT */

.info-box:hover {
    transform: translateY(-6px);

    border-color: rgba(0, 229, 255, 0.25);

    box-shadow:
        0 20px 40px rgba(0, 229, 255, 0.12);
}


/* ICON */

.info-box i {
    flex-shrink: 0;

    font-size: 26px;

    color: #00e5ff;

    width: 60px;
    height: 60px;

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

    border-radius: 50%;

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

    border: 1px solid rgba(0, 229, 255, 0.15);
}


/* TITLE */

.info-box h4 {
    margin: 3px 0 10px;

    font-size: 20px;
    font-weight: 600;

    color: #ffffff;
}


/* TEXT */

.info-box p {
    margin: 0;

    color: #b8b8b8;

    font-size: 15px;
    line-height: 1.8;
}


/* LINKS */

.info-box a {
    color: #b8b8b8;

    text-decoration: none;

    font-size: 15px;
    line-height: 1.8;

    transition: 0.3s ease;
}


.info-box a:hover {
    color: #00e5ff;
}


/* ==========================================================
   MAP
========================================================== */

.map iframe {
    display: block;

    width: 100%;
    height: 450px;

    border: 0;

    filter: grayscale(0.9) invert(0.92);
}


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

@media (max-width: 900px) {

    .contact-info {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 600px) {

    .contact-wrapper {
        margin-top: 40px;
    }

    .contact-info {
        gap: 18px;
    }

    .info-box {
        padding: 22px;
        gap: 15px;
    }

    .info-box i {
        width: 50px;
        height: 50px;

        font-size: 22px;
    }

    .info-box h4 {
        font-size: 18px;
    }

    .info-box p,
    .info-box a {
        font-size: 14px;
    }

    .map iframe {
        height: 350px;
    }

}

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

footer{

background:#030303;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

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

gap:50px;

}

.footer-col h2,
.footer-col h3{

margin-bottom:25px;

}

.footer-col p,
.footer-col li{

color:#bdbdbd;

margin-bottom:15px;

}

.footer-col ul{

list-style:none;

}

.footer-col ul li a{

color:#bdbdbd;

transition:.3s;

}

.footer-col ul li a:hover{

color:#00e5ff;

padding-left:8px;

}

.social-icons{

display:flex;

gap:15px;

margin-top:20px;

}

.social-icons a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#111;

transition:.35s;

font-size:18px;

}

.social-icons a:hover{

background:#00e5ff;

color:#000;

transform:translateY(-6px);

}

footer hr{

margin:60px 0 30px;

border:none;

height:1px;

background:#222;

}

.copyright{

text-align:center;

color:#888;

}

/* ==========================================================
BACK TO TOP
========================================================== */

.back-to-top{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

color:white;

font-size:20px;

z-index:999;

transition:.35s;

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

}

.back-to-top:hover{

transform:translateY(-8px);

}

/* ==========================================================
WHATSAPP
========================================================== */

.whatsapp{

position:fixed;

left:30px;

bottom:30px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:white;

z-index:999;

animation:pulse 2s infinite;

box-shadow:0 15px 40px rgba(37,211,102,.35);

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

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

@media(max-width:992px){

.about-content,
.contact-wrapper{

grid-template-columns:1fr;

}

.hero h1{

font-size:3.5rem;

}

.section-title h2{

font-size:2.3rem;

}

nav{

display:none;

}

.menu{

display:block;

}

}

@media(max-width:768px){

.hero{

padding:120px 20px;

}

.hero h1{

font-size:2.7rem;

}

.hero p{

font-size:1rem;

}

.hero-btn{

flex-direction:column;

}

.btn{

width:100%;

}

.section{

padding:70px 0;

}

.portfolio-grid,
.gallery-grid,
.services-grid,
.stats-grid,
.testimonial-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social-icons{

justify-content:center;

}

}

@media(max-width:480px){

.hero h1{

font-size:2.2rem;

}

.section-title h2{

font-size:1.8rem;

}

.container{

width:92%;

}

.back-to-top{

right:15px;

bottom:15px;

}

.whatsapp{

left:15px;

bottom:15px;

}

}

/* Reveal Animation */

.hidden{

opacity:0;

transform:translateY(80px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

/* Mobile Menu */

nav.active{

display:block;

position:absolute;

top:100%;

left:0;

width:100%;

background:#050505;

padding:25px;

}



nav.active ul{

flex-direction:column;

gap:20px;

}

/* Active Navigation */

nav ul li a.active{

color:#00e5ff;

}

/* Ripple */

.btn{

overflow:hidden;

position:relative;

}

/* ==========================================

/* MAP */

.map{
    margin-top:60px;
}

.map iframe{
    width:100%;
    height:450px;
    border:none;
    border-radius:20px;
    filter:grayscale(.8);
}

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

@media (max-width:1200px){

    .contact-wrapper{
        grid-template-columns:320px 1fr;
    }

}

@media (max-width:992px){

    .contact-wrapper{
        grid-template-columns:1fr;
        gap:30px;
    }

    .contact-form{
        padding:30px;
    }

}

@media (max-width:768px){

    .contact-wrapper{
        margin-top:40px;
    }

    .info-box{
        padding:20px;
    }

    .info-box i{
        width:50px;
        min-width:50px;
        height:50px;
        font-size:20px;
    }

    .contact-form{
        padding:25px;
    }

    .contact-form button,
    .contact-form .btn{
        width:100%;
    }

    .map iframe{
        height:320px;
    }

}

@media (max-width:480px){

    .contact-wrapper{
        gap:20px;
    }

    .info-box{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .info-box i{
        margin-bottom:10px;
    }

    .contact-form{
        padding:20px;
    }

    .contact-form input,
    .contact-form textarea{
        padding:15px;
        font-size:15px;
    }

    .map iframe{
        height:250px;
    }

}

/* Scroll Progress */

#scroll-progress{

position:fixed;

top:0;

left:0;

width:0;

height:4px;

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

z-index:99999;

transition:.15s;

}

/* Lightbox */

.lightbox{

position:fixed;

inset:0;

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

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.lightbox.active{

display:flex;

}

.lightbox-image{

max-width:90%;

max-height:85vh;

border-radius:12px;

}

.lightbox-close,
.lightbox-prev,
.lightbox-next{

position:absolute;

color:#fff;

font-size:40px;

cursor:pointer;

user-select:none;

}

.lightbox-close{

top:30px;

right:40px;

}

.lightbox-prev{

left:40px;

top:50%;

transform:translateY(-50%);

}

.lightbox-next{

right:40px;

top:50%;

transform:translateY(-50%);

}

/* Portfolio Hover */

.portfolio-item{

transition:.35s ease;

cursor:pointer;

}

.lightbox-image{

animation:zoomIn .35s ease;

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.85);

}

to{

opacity:1;

transform:scale(1);

}

}

/* ==============================
Custom Cursor
==============================*/



.custom-cursor{

position:fixed;

width:34px;

height:34px;

border:2px solid #00e5ff;

border-radius:50%;

pointer-events:none;

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

transition:

width .25s,

height .25s,

background .25s,

border .25s,

transform .08s;

z-index:999999;

}



.cursor-dot{

position:fixed;

width:8px;

height:8px;

background:#00e5ff;

border-radius:50%;

pointer-events:none;

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

z-index:999999;

}

.cursor-hover{

width:60px;

height:60px;

background:rgba(0,229,255,.15);

}

/* ==============================
Mouse Glow
==============================*/

.mouse-glow{

position:fixed;

width:320px;

height:320px;

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

border-radius:50%;

pointer-events:none;

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

filter:blur(40px);

z-index:-1;

transition:left .12s linear,
top .12s linear;

}

.btn{

transition:
transform .25s ease,
box-shadow .25s ease;

will-change:transform;

}


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

.hero-content,
.hero-image,
.floating,
.shape,
.blob{

transition:transform .2s linear;

will-change:transform;

}

/* Floating Animation */

.floating,
.blob{

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

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}


}

/* responsive patch */
html,body{overflow-x:hidden}img,video,iframe{max-width:100%;height:auto}.container{width:min(94%,1300px);padding:0 15px}.hero h1{font-size:clamp(2.2rem,7vw,5rem)}.services-grid,.portfolio-grid,.gallery-grid,.stats-grid,.testimonial-grid,.footer-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}@media(max-width:768px){section{padding:70px 0}.about-content,.contact-wrapper{grid-template-columns:1fr}.hero-btn{flex-direction:column}.btn{width:100%}}