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

*{

margin:0;

padding:0;

box-sizing:border-box;

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

}


body{
    margin: 0;
    padding: 0;
    font-family: 'Inter',sans-serif;
    background: radial-gradient(circle at top, #15151a,#0b0b0f 60%);
    
    color: beige;

    position: relative;
    
}




body::before{
content:'';
position:fixed;
top:10%;
left:50%;
transform:translateX(-50%);
width:500px;
height:500px;
background:radial-gradient(circle, rgba(255,255,255,0.04), transparent 70%);

filter:blur(120px);

pointer-events: none;
}
h1,h2,h3{
    color: #ffffff;

}
p{
    color: #c4c4c4;
}
.subtext{
    color: #9a9a9a;
}




.navbar{
position:fixed;
top:0;
left: 0;
width: 100%;
z-index:1000;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
background: #0b0b0f;


}
.navbar.scrolled{
    background: rgba(11,11,15,0.7);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}



.nav-links{
display:flex;
gap:20px;
align-items: center;
list-style: none;
padding: 0;
margin: 0;

}
.nav-links li{
    list-style: none;
}

.nav-links a{
color:#A1A1AA;
text-decoration:none;
transition:0.3s;
}

.nav-links a:hover{
color:#4338ca;
}

.signature{
    
    position: absolute;
    left: 40px;
    top: 80px;

}
.signature img{
    width: 240px;
    opacity: 0.8;
    filter: brightness(1.1);
    height: auto;
}


.container{
padding: 80px 20px;

max-width:1100px;

margin:auto;

}
h3{
    font-size: 28px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    color: #fff;

}
p{
    color: #A1A1AA;
    font-size: 15px;
    line-height: 1.7;
}

/* HERO */




.hero{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80vh;
    padding:100px 20px;
    max-width:1000px;
    margin:auto;
    padding-bottom: 30px;

}
.hero-tag{

color:#8aa27c;

font-size:13px;

letter-spacing:3px;

text-transform:uppercase;

line-height:1.8;

margin-bottom:20px;

font-weight:500;
}

.hero h1{
font-size:46px;
font-weight:600;
letter-spacing:-1px;
color:#ffffff;
margin-bottom:8px;
}

.hero p{
font-size:16px;
color:#b5b5b5;
margin-bottom:6px;
}

.subtext{
font-size:14px;
color:#8a8a8a;
line-height:1.7;
max-width:500px;
margin:auto;
}
.hero-text{
    max-width: 500px;
    z-index: 2;
}

.hero-text h1{
    font-size: 18px;
    color: #b5b5b5;
}

.hero-text h2{
    font-size: 44px;
    color: #fff;
    margin: 10x 0;
}
.hero-text p{
    color: #9a9a9a;
    margin-bottom: 15px;
}
.hero-image{
    position:relative;
display:flex;
right: -20px;
justify-content:flex-end;
align-items:center;
}


.hero-image img{
    width:240px;   /* control size */
height:auto;
background: transparent;
mix-blend-mode: normal;
margin-left: 40px;
object-fit:contain;

position:relative;
z-index:2;
box-shadow: 0 25px 60px rgba(0,0,0,0.35);
-webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
mask-image: radial-gradient(circle, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
}

.blob{
    position:absolute;

top:50%;
right:40px;

transform:translateY(-50%);

width:400px;
height:400px;

background:#8aa27c;

border-radius:60% 40% 55% 65% / 50% 60% 40% 60%;

/* magic */
opacity:0.5;


z-index:1;
}


.btn{

display:inline-block;
padding:10px 28px;
background:#8aa27c;
color:#fff;
border-radius:10px;
text-decoration:none;
}

.hero{

text-align:center;
}

.hero-image{
margin-top:30px;
}


    




/* SECTION */

section{

padding:70px 0;

}

h3{

font-size:26px;

margin-bottom:20px;

}

/* ABOUT */

.about p{

color:#A1A1AA;

max-width:800px;

}
about-highlight{
font-size:20px;
font-weight:600;
color:#8aa27c;  /* matches your blob */
margin:15px 0 20px;
line-height:1.4;
border-left:4px solid #8aa27c;
padding-left: 12px;
letter-spacing: 0.3px;
}
#about{
position:relative;
overflow:hidden;

}

#about::before{
content:"";
position:absolute;

width:300px;
height:300px;

background:radial-gradient(circle, #8aa27c 0%, transparent 70%);

top:-50px;
left:-50px;

opacity:0.25;
filter:blur(60px);

z-index:0;
}

/* SKILLS */

.blob-svg{
    position: absolute;
    top: 50%px;
    left: 50%px;
    transform: translate(-50%, -50%);
    width: 800px;
  z-index: 1;  
    opacity: 0.2;
    
    
}
.container{
    position: relative;
    z-index: 2;
}
section{
    position: relative;
    padding: 60px 20px;
}
.blob-layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 1;
    pointer-events: none;
}


#skills{
    position: relative;
    background-image: url("img/blob.sv");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 900px;
    background-position: 30% 60%;
    
    min-height: 600px;

    padding-top: 40px;
}

#skills *{
    position: relative;
    
}
#skills{
    position: relative;
    z-index: 2;
}
#about{
    position: relative;
    

}




.grid{

display:grid;

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

gap:20px;

margin-top: 20px;

}

.card{

    background: rgba(255,255,255,0.03);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.05);
padding: 16px;
border-radius:14px;
transition:0.3s;
max-width: 25s0px;
min-height: 160px;
justify-items: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;


}

.card:hover{
transform:translateY(-6px);
border-color:#4338ca;
box-shadow: 0 15px 30px rgba(0,0,0,0,4);
}



.card h4{

margin-bottom:10px;
font-size: 18px;
color: #fff;

}

.card p{
    color: #A1A1AA;
    line-height: 1.6;
}

#why{
text-align:center;
padding:60px 20px;
}

.why-cards{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:20px;
max-width:900px;
margin:auto;
}

.why-card{
background:#1a1a1f;
padding:20px;
border-radius:12px;
text-align: center;
}

.why-card i{
    font-size: 28px;
    color: #8aa27c;
    margin-bottom: 10px;
}
#why h2{
    margin-bottom: 30px;

}
/* ===== Project Showcase Grid ===== */

.section-title{
    width:100%;
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    display:inline-block;
    color:#4fd1ff;
    font-size:15px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.section-title h2{
    color:#ffffff;
    font-size:3rem;
    font-weight:700;
    margin:0;
}

.section-title p{
    color:#bfbfbf;
    font-size:1.1rem;
    margin-top:15px;
}
.showcase-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    width: 100%;
    gap: 10px;
}
.project-showcase{
height: auto;
width: 100%;
max-width: 2000px;
    padding: 70px 40px;
    margin: auto;
}


.project-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,.4);
}

.project-card{
    background:#161616;
    border-radius:30px;
    padding:35px;
    min-height:550px;
    position:relative;   /* Keep this */
    overflow:hidden;

}

.project-card h3{
    position:absolute;
    bottom:55px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    color:#ffffff;
    font-size:24px;
    font-weight:700;
    letter-spacing: 0.8px;
}
.project-card p{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;

    color: rgba(255,255,255,.65);
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    
}
.project-logo{
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
    margin: 10px auto 8px;
}
.photo-collage{
    position:relative;
    height:260px;
    margin-bottom: 20px;
}

.photo{
    position:absolute;
    width:170px;
    background:#fff;
    padding:10px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    transition:.3s;
    cursor:pointer;
    overflow: hidden;
}



.play-icon{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.35);
    color:#fff;
    font-size:30px;
    opacity:0;
    transition:.3s;
}
.play-icon i{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #00c896;
    color: #fff;

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

    font-size: 24px;
    transform: scale(.8);
    transition: .3s;
}

.photo:hover .play-icon{
    opacity:1;
}
.photo:hover .play-icon i{
    transform: scale(1);

}
.photo:hover{
    transform: scale(1.08) rotate(0deg);
}


.photo img{
    width:100%;
    display:block;
    border-radius:10px;
}

.photo:hover{
    transform:scale(1.08) rotate(0deg);
    z-index:10;
}
.photo1{
    top:10px;
    left:10px;
    transform:rotate(-12deg);
}

.photo2{
    top:20px;
    right:15px;
    transform:rotate(10deg);
}

.photo3{
    top:75px;
    left:70px;
    transform:rotate(-4deg);
}
.showcase-wrapper{
    width: 100%;
    height: auto;
    margin:0 auto;
}
.showcase-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(380px,1fr));
    width: 100%;

}
.video-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    z-index:9999;

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

.video-content{
    width:auto;
    max-width:420px;
    position:relative;
}

.video-content video{
    width:100%;
    max-width: 360px;
    border-radius:20px;
    max-height: 75vh;
    height: auto;
    display: block;
    margin: auto;

}

.close-video{
    position:absolute;
    top:-45px;
    right:0;
    color:white;
    font-size:40px;
    cursor:pointer;
}

.video-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:20px;
}

.video-buttons button{
    padding:10px 20px;
    border:none;
    border-radius:30px;
    cursor:pointer;
    background:#00c896;
    color:#fff;
}
.video-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    z-index:9999;

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

.video-content{
    width:90%;
    max-width:900px;
    background:#111;
    padding:25px;
    border-radius:20px;
    position:relative;
}

.video-content video{
    width:100%;
    border-radius:15px;
}

.close-video{
    position:absolute;
    top:15px;
    right:20px;
    font-size:40px;
    color:white;
    cursor:pointer;
}

.video-list{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:20px;
}

.video-list button{
    padding:10px 18px;
    border:none;
    border-radius:30px;
    background:#00c896;
    color:white;
    cursor:pointer;
    font-weight:bold;
}

/* RESULT SECTION */

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

.results-section{

padding:90px 6%;

background:linear-gradient(
    135deg,
    #0d0d0d,
    #131611,
    #0a0a0a
);

position:relative;
}


/* HEADER */

.results-header{

text-align:center;

margin-bottom:40px;
}               

.results-tag{

color:#8aa27c;

font-size:13px;

letter-spacing:3px;

text-transform:uppercase;

margin-bottom:18px;
}

.results-header h2{

font-size:56px;

color:white;

margin-bottom:18px;
}

.results-sub{

max-width:650px;

margin:auto;

color:#888;

line-height:1.7;
}


/* GRID */

.results-grid{

display:grid;

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

gap:22px;
}


/* CARD */

.results-card{

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

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

border-radius:28px;

min-height: 500px;
overflow:hidden;

backdrop-filter:blur(12px);

transition:0.4s ease;

box-shadow:
0 0 30px rgba(138,162,124,0.08);
}


/* IMAGE */

.results-card img{

width:100%;
height: 100%;
object-fit: cover;


display:block;
}


/* HOVER */

.results-card:hover{

transform:
translateY(-10px)
scale(1.02);

border-color:
rgba(138,162,124,0.22);

box-shadow:
0 0 45px rgba(138,162,124,0.15);
}
/* ===== INDUSTRIES ===== */

.industries-section{

padding:170px 6%;
}

.section-title{

font-size:38px;

margin-bottom:50px;

color:white;
}


/* GRID */

.industries-grid{

display:grid;

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

gap:30px;
justify-content: center;
}


/* CARD */

.industry-card{

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

border:
1px solid rgba(138,162,124,0.10);

border-radius:28px;

padding:26px;

backdrop-filter:blur(12px);

transition:0.4s ease;

box-shadow:
0 0 30px rgba(138,162,124,0.05);
}




/* HOVER */

.industry-card:hover{

transform:
translateY(-8px);

border-color:
rgba(138,162,124,0.22);

box-shadow:
0 0 40px rgba(138,162,124,0.10);
}


/* TITLE */

.industry-card h3{

font-size:22px;

margin-bottom:12px;

color:white;
}


/* LOCATION */

.industry-card h4{

font-size:15px;

font-weight:500;

letter-spacing:1px;

color:#8aa27c;

margin-bottom:18px;
}


/* TEXT */

.industry-card p{

color:#bdbdbd;

line-height:1.7;
}


#form-modern{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
position: relative;
overflow: hidden;
background: linear-gradient(
135deg, rgba(255,255,255,0.03)

);

backdrop-filter: blur(10px);
}

.form-wrapper{
display:grid;
grid-template-columns:1fr 1fr;

max-width:90%;
width:800px;

border-radius:20px;
overflow:hidden;

position: relative;
z-index: 1;
box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.form-left{


overflow: hidden;
min-height: 450px;
position:relative;
display:flex;
height: 100%;
align-items: center;
padding: 30px;
color: beige;
filter: saturate(1.1) contrast(0.95);

}
.form-left::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(to right,
    
    rgba(255,255,255,0.2),
    rgba(255,255,255,0)
    );
}


/* dark overlay */
#form-modern::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: radial-gradient(circle,#8aa27c, translate 70%)    ;

filter:blur(8px);
opacity:0.5;

z-index:0;
}

/* keep text above */
.overlay-text{
position:relative;
z-index:1;
color: rgb(15, 14, 14);
}

.overlay-text h2{
font-size:26px;
margin-bottom:10px;
color: #000;
}

.form-right{
background: #fff;;
padding:40px;
display: flex;
flex-direction: column;
justify-content: center;
color: #333;
font-weight: 600;
}

.form-right h2{
margin-bottom:20px;
color: #8aa27c;
}

.form-right form{
display:flex;
flex-direction:column;
gap:12px;
}

.form-right input,
.form-right textarea{
padding:12px;
border-radius:6px;
border:1px solid #ccc;
}

.form-right button{
padding:12px;
background:black;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}

.form-right button:hover{
background:#333;
}


/* .end-thanks{
    text-align: center;
    padding: 80px 20px;
}
.bounce-text span{
display:inline-block;
font-size:60px;
font-weight:600;
color:#8aa27c;   /* blob color */

/* animation:bounce 1.2s infinite;
}

@keyframes bounce{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
}

.bounce-text span:nth-child(1){animation-delay:0s;}
.bounce-text span:nth-child(2){animation-delay:0.1s;}
.bounce-text span:nth-child(3){animation-delay:0.2s;}
.bounce-text span:nth-child(4){animation-delay:0.3s;}
.bounce-text span:nth-child(5){animation-delay:0.4s;}
.bounce-text span:nth-child(6){animation-delay:0.5s;} */ 











footer{

text-align:center;

padding:30px;

color:#666;

font-size:14px;

}
/* timeline{
margin-top:20px;
display:flex;
flex-direction:column;
gap:20px;
border-left:2px solid rgba(255,255,255,0.1);
padding-left:20px;
}

.item{
position:relative;
padding-left:10px;
}

.item::before{
content:'';
position:absolute;
left:-28px;
top:5px;
width:10px;
height:10px;
background:#4338ca;
border-radius:50%;
}

.item h4{
color:#fff;
font-size:18px;
margin-bottom:5px;
}

.item h4 span{
font-size:14px;
color:#6b7280;
margin-left:10px;
font-weight:500;
opacity: 0.9;
}

.item p{
color:#A1A1AA;
font-size:15px;
line-height:1.6;
} */


.projects-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 15px;
}

.project{
    background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);
border-radius:16px;
overflow:hidden;
transition:0.3s;
padding-bottom: 10px;
}
.project:hover{
    transform: translateY(-6px);
}

.project-img{
    width: 100%;
    height: 70%;
    object-fit: cover;
    background: #0b0b0f;
    display: block;
}

.project h4{
margin:10px 12px 4px;
color:#fff;
font: size 14px;
}

.project-text{
margin:0 12px 10px;
color:#a9a9a9;
font-size:12px;
}

.hamburger{
    display: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer;

}

    .hero h1{
        font-size: 32px;

    }
    .hero p{
        font-size: 14px;
    }

    .social-icons{
display:flex;
justify-content:center;
gap:20px;
margin-top:20px;
flex-wrap:wrap;
}

.social-icons a{
font-size:22px;
color:#8aa27c;
transition:0.3s;
background: #1a1a1f;
padding: 10px;
border-radius: 50%;
}

.social-icons a:hover{
color:#ffffff;
transform:translateY(-3px);
}
    
    

.tools-grid{
display:grid;
grid-template-columns: repeat(4, 70px);
justify-content:center;
gap:15px;
margin-top:10px;
margin-bottom: 20px;
}

.tool-card{
width:70px;
height:70px;
background:#d8d0c5;
border-radius:12px;

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

.tool-card i{
font-size:22px;
color:#8aa27c;
}
 .brands{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:15px;
flex-wrap:wrap;
}

.brands img{
width:70px !important;
height:auto;
opacity:0.6;
transition:0.3s;
}

.brands img:hover{
opacity:1;
}

.brands-title{
text-align:center;
font-size:14px;
color:#8a8a8a;
margin-top:20px;
}

.contact-sticky{
position:fixed;
right:20px;
top:50%;
transform:translateY(-50%);

display:flex;
flex-direction:column;
gap:15px;

z-index:1000;
}

.contact-sticky a{
background:#1a1a1f;
color:#8aa27c;
text-decoration: none;

width:60px;
height:60px;

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

border-radius:50%;
font-size:28px;

transition:all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.contact-sticky a:hover{
background:#8aa27c;
color:#000;
transform:scale(1.1);
box-shadow: 0 0 15px rgba(138,162,124,0.6);
}
/* LEFT */
.reveal-left{
opacity:0;
transform:translateX(-80px);
transition:0.8s ease;
}

.reveal-left{
opacity:0;
transform:translateX(-60px);
transition:0.8s ease;
}

.reveal-right{
opacity:0;
transform:translateX(60px);
transition:0.8s ease;
}

.reveal-top{
opacity:0;
transform:translateY(-40px);
transition:0.8s ease;
}

.reveal-bottom{
opacity:0;
transform:translateY(40px);
transition:0.8s ease;
}

.active{
opacity:1;
transform:translate(0);
}


/*  mobile styles*/
@media(max-width:768px){

    .signature{
        top: 10px;
        margin-bottom:20px;
        z-index: 10;
    }
    .hero-container{
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 40px 20px;
display:block;
flex-direction:column ;
align-items:center;
text-align:center ;
}

.hero-text{
width:100%;
}

.hero-image{
width:100% ;
margin-top:20px;
}

.hero-image img{
width:80%;
margin:20px auto;
display:block;
}

.blob{
width:220px;
height:220px;
top:-20px;
position: absolute;
left:50% !important;
transform:translateX(-50%) !important;
}
    .form-wrapper{
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }
    .form-left{
        display: none;
    }
    .form-right{
        width: 100%;
        padding: 25px 20px;
        border-radius: 15px;
    }
    .form-right input,
    .form-right textarea{
        width: 100%;
        font-size: 14px;
    }
    .form-section{
        display: flex;
        justify-content: center;
    }
    .icons-grid{
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }

    section{
        padding: 40px 15px;
    }
    .contact-sticky{
        right: 10px;
    }

    .container{
        width:100% ;
        max-width: 100%;
        padding: 0 15px;

    
    
    
    }
    .cards-container{
        width: 100%;
        padding: 0 10px;
    }
    body{
        overflow-x:hidden ;
        
    }
    .navbar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
    }
 
.nav-links{
position:fixed;
top:0;
right:0;
width:100%;
height:100vh;
background:#0f0f1a;

display:none;
flex-direction:column;
justify-content:center;
align-items:center;
gap:30px;

text-align: center;
transition: 0.3s;
}

.nav-links.show{
display:flex;
}
.nav-links a{
    font-size: 22px;
}

}

.hamburger{
display:none;
font-size:28px;
color:white;
position:absolute;
right:20px;
top:20px;
cursor:pointer;
z-index:1000;
}


.close-btn{
position:absolute;
top:20px;
left:20px;
font-size:30px;
color:white;
cursor:pointer;
display: none;
}