/*=========================================
NOVEATECH
MAIN STYLESHEET
=========================================*/


/* ROOT */

:root{

--primary:#00A8FF;
--primary-deep:#0066FF;
--accent:#00E5FF;

--navy:#07111F;
--background:#050505;
--surface:#111827;
--surface-2:#0B1220;

--white:#FFFFFF;
--gray:#F5F7FA;
--text:#CBD5E1;
--muted:#94A3B8;

--border:rgba(255,255,255,.12);
--border-soft:rgba(255,255,255,.08);

--gradient:
linear-gradient(
135deg,
var(--primary-deep),
var(--accent)
);

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

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

--shadow-glow:
0 20px 60px rgba(0,168,255,.18);

--radius:24px;
--radius-sm:16px;

--transition:.35s cubic-bezier(.4,0,.2,1);
--transition-slow:.6s cubic-bezier(.16,1,.3,1);

}



/* RESET */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

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

background:var(--background);

color:var(--white);

overflow-x:hidden;

}



a{

text-decoration:none;

color:inherit;

}



button{

font-family:inherit;

}



img{

max-width:100%;

display:block;

}



ul{

list-style:none;

}



.container{

width:90%;

max-width:1200px;

margin:auto;

}



.eyebrow,
.section-label{

display:inline-block;

padding:8px 18px;

border-radius:50px;

border:1px solid rgba(0,229,255,.3);

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

color:var(--accent);

font-size:12px;

font-weight:700;

letter-spacing:1.5px;

margin-bottom:20px;

}



.gradient-text{

background:var(--gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}







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


.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

transition:var(--transition);

}



.navbar{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo{

font-size:28px;

font-weight:800;

letter-spacing:-1px;

display:flex;

align-items:center;

gap:8px;

}



.logo span{

color:var(--accent);

}



.logo::before{

content:"";

width:10px;

height:10px;

border-radius:3px;

background:var(--gradient);

transform:rotate(45deg);

box-shadow:0 0 16px rgba(0,229,255,.6);

}




.desktop-menu{

display:flex;

gap:35px;

}



.desktop-menu li{

position:relative;

}



.desktop-menu a{

color:var(--text);

font-size:15px;

transition:var(--transition);

position:relative;

padding:6px 0;

}



.desktop-menu a::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:2px;

background:var(--gradient);

transition:var(--transition);

}



.desktop-menu a:hover{

color:white;

}



.desktop-menu a:hover::after,
.desktop-menu a.active::after{

width:100%;

}



.desktop-menu a.active{

color:white;

}





.nav-cta{

padding:14px 30px;

border-radius:50px;

background:var(--gradient);

font-weight:700;

font-size:14px;

box-shadow:

0 0 35px rgba(0,229,255,.25);


transition:var(--transition);

position:relative;

overflow:hidden;

}



.nav-cta:hover{

transform:translateY(-4px);

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

}






/* MOBILE MENU BUTTON */


.menu-toggle{

display:none;

background:none;

border:none;

cursor:pointer;

}



.menu-toggle span{


display:block;

width:30px;

height:3px;

background:white;

margin:6px;

border-radius:10px;

transition:.3s;


}







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


.mobile-menu{

display:none;

}







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


.hero{


min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

padding-top:90px;


}





.hero-bg{


position:absolute;

inset:0;


background:

radial-gradient(
circle at 20% 20%,
rgba(0,102,255,.35),
transparent 35%
),


radial-gradient(
circle at 80% 60%,
rgba(0,229,255,.25),
transparent 35%
);


}



.hero-bg::after{


content:"";

position:absolute;

inset:0;


background-image:

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


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


background-size:60px 60px;


opacity:.4;


}



.hero-glow{

position:absolute;

width:500px;

height:500px;

border-radius:50%;

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

pointer-events:none;

z-index:1;

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

transition:opacity .3s ease;

filter:blur(10px);

}



.hero-particles{

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

}



.particle{

position:absolute;

width:4px;

height:4px;

border-radius:50%;

background:var(--accent);

opacity:.5;

box-shadow:0 0 8px var(--accent);

}




.hero-content{


display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

position:relative;

z-index:2;


}






.hero-text{

max-width:650px;

}




.hero-label{


display:inline-flex;

align-items:center;

gap:8px;


padding:8px 18px;


border-radius:50px;


border:1px solid rgba(0,229,255,.3);


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


color:var(--accent);


font-size:12px;


font-weight:700;


letter-spacing:1px;


margin-bottom:25px;


}



.hero-label::before{

content:"";

width:7px;

height:7px;

border-radius:50%;

background:var(--accent);

box-shadow:0 0 0 4px rgba(0,229,255,.2);

animation:pulseDot 1.6s ease-in-out infinite;

}




.hero h1{


font-size:clamp(55px,7vw,85px);


line-height:1;


letter-spacing:-4px;


font-weight:800;


}



.hero h1 span{


background:var(--gradient);


-webkit-background-clip:text;


-webkit-text-fill-color:transparent;


}




.hero-description{


margin-top:30px;


font-size:18px;


line-height:1.8;


color:var(--muted);


max-width:560px;


}






/* HERO BUTTONS */


.hero-buttons{


display:flex;

gap:20px;

margin-top:40px;


}




.primary-btn,
.secondary-btn{


padding:16px 35px;


border-radius:50px;


font-weight:700;


transition:var(--transition);

position:relative;

overflow:hidden;

isolation:isolate;


}



.primary-btn{


background:var(--gradient);


box-shadow:

0 15px 40px rgba(0,102,255,.35);


}



.primary-btn::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(135deg,var(--accent),var(--primary-deep));

opacity:0;

transition:opacity var(--transition);

z-index:-1;

}



.primary-btn:hover::before{

opacity:1;

}



.primary-btn:hover,
.secondary-btn:hover{

transform:translateY(-5px);

}



.secondary-btn{


border:1px solid var(--border);


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


}



.secondary-btn:hover{

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

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

}





/* HERO STATS STRIP */


.hero-mini-stats{

display:flex;

gap:40px;

margin-top:55px;

padding-top:35px;

border-top:1px solid var(--border-soft);

}



.hero-mini-stats div h4{

font-size:28px;

font-weight:800;

letter-spacing:-1px;

}



.hero-mini-stats div p{

font-size:13px;

color:var(--muted);

margin-top:4px;

}








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


.hero-visual{


width:420px;

height:420px;


display:flex;

align-items:center;

justify-content:center;


position:relative;


}




.tech-circle{


position:absolute;


width:350px;


height:350px;


border-radius:50%;


background:var(--gradient);


filter:blur(80px);


opacity:.35;


}



.tech-ring{

position:absolute;

width:400px;

height:400px;

border-radius:50%;

border:1px dashed rgba(0,229,255,.25);

animation:spin 30s linear infinite;

}



.tech-ring::before,
.tech-ring::after{

content:"";

position:absolute;

width:10px;

height:10px;

border-radius:50%;

background:var(--accent);

box-shadow:0 0 12px var(--accent);

}



.tech-ring::before{

top:-5px;

left:50%;

}



.tech-ring::after{

bottom:-5px;

left:50%;

}



.tech-card{


width:280px;


height:320px;


border-radius:30px;


background:

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



border:

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



backdrop-filter:blur(20px);


display:flex;


align-items:center;


justify-content:center;


flex-direction:column;

gap:14px;


box-shadow:var(--shadow);

position:relative;

z-index:2;

transform-style:preserve-3d;

will-change:transform;


}



.tech-card .badge-live{

position:absolute;

top:22px;

right:22px;

display:flex;

align-items:center;

gap:6px;

font-size:11px;

font-weight:700;

letter-spacing:.5px;

color:var(--accent);

}



.tech-card .badge-live span{

width:7px;

height:7px;

border-radius:50%;

background:var(--accent);

box-shadow:0 0 8px var(--accent);

animation:pulseDot 1.6s ease-in-out infinite;

}



.tech-card h3{


font-size:35px;


}



.tech-card p{


color:var(--muted);


}



.tech-card .card-bars{

display:flex;

gap:6px;

align-items:flex-end;

height:36px;

margin-top:6px;

}



.tech-card .card-bars span{

width:6px;

border-radius:4px;

background:var(--gradient);

animation:barPulse 1.8s ease-in-out infinite;

}



.tech-card .card-bars span:nth-child(1){height:40%;animation-delay:0s;}
.tech-card .card-bars span:nth-child(2){height:70%;animation-delay:.15s;}
.tech-card .card-bars span:nth-child(3){height:100%;animation-delay:.3s;}
.tech-card .card-bars span:nth-child(4){height:55%;animation-delay:.45s;}
.tech-card .card-bars span:nth-child(5){height:80%;animation-delay:.6s;}
/*=========================================
SECTION HEADER (shared)
=========================================*/


.section-header{

text-align:center;

max-width:700px;

margin:auto;

}



.section-label{


color:var(--accent);

font-size:13px;

font-weight:700;

letter-spacing:2px;

margin-bottom:20px;


}



.section-header h2{


font-size:48px;

letter-spacing:-2px;

margin-bottom:20px;


}



.section-header p:last-child{


color:var(--muted);

font-size:18px;

line-height:1.7;


}




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


.services{

padding:120px 0;

background:#070B14;

position:relative;

}



.services-grid{


margin-top:70px;


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:25px;


}






.service-card{


padding:35px;


border-radius:var(--radius);


background:

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



border:

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



backdrop-filter:blur(15px);



transition:.35s ease;

position:relative;

overflow:hidden;


}



.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:var(--gradient);

transform:scaleX(0);

transform-origin:left;

transition:transform var(--transition-slow);

}



.service-card:hover::before{

transform:scaleX(1);

}



.service-card:hover{


transform:translateY(-10px);



border-color:

rgba(0,229,255,.5);



box-shadow:

0 20px 50px rgba(0,229,255,.15);


}





.service-icon{


font-size:45px;


margin-bottom:25px;

display:inline-flex;

width:76px;

height:76px;

align-items:center;

justify-content:center;

border-radius:20px;

background:var(--gradient-soft);

transition:var(--transition);

}



.service-card:hover .service-icon{

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

}





.service-card h3{


font-size:25px;


margin-bottom:15px;


}




.service-card p{


color:var(--muted);


line-height:1.7;


margin-bottom:25px;


}




.service-card button{


background:none;


border:none;


color:var(--accent);


font-size:15px;


font-weight:700;


cursor:pointer;

display:inline-flex;

align-items:center;

gap:6px;

transition:var(--transition);


}



.service-card button:hover{

gap:12px;

}



/*=========================================
TRUSTED TECHNOLOGIES
=========================================*/


.trusted{

padding:60px 0;

border-top:1px solid var(--border-soft);

border-bottom:1px solid var(--border-soft);

background:var(--background);

}



.trusted-label{

text-align:center;

font-size:12px;

letter-spacing:2px;

color:var(--muted);

font-weight:700;

margin-bottom:34px;

}



.marquee{

overflow:hidden;

position:relative;

-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);

mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);

}



.marquee-track{

display:flex;

gap:70px;

width:max-content;

animation:marquee 28s linear infinite;

}



.marquee-item{

display:flex;

align-items:center;

gap:10px;

font-size:20px;

font-weight:700;

color:var(--muted);

white-space:nowrap;

transition:color .3s ease;

}



.marquee-item span{

font-size:22px;

}



.marquee:hover .marquee-track{

animation-play-state:paused;

}



/*=========================================
WHY CHOOSE US
=========================================*/


.why-choose{

padding:120px 0;

background:#070B14;

}



.why-grid{

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:70px;

align-items:center;

margin-top:60px;

}



.why-copy h2{

font-size:42px;

letter-spacing:-1.5px;

margin-bottom:22px;

}



.why-copy p{

color:var(--muted);

font-size:17px;

line-height:1.8;

margin-bottom:30px;

}



.why-list{

display:flex;

flex-direction:column;

gap:18px;

}



.why-list li{

display:flex;

align-items:center;

gap:14px;

font-size:15.5px;

color:var(--text);

}



.why-list li .check{

width:26px;

height:26px;

border-radius:50%;

background:var(--gradient-soft);

border:1px solid rgba(0,229,255,.35);

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

color:var(--accent);

font-size:13px;

}



.why-cards{

display:grid;

grid-template-columns:1fr 1fr;

gap:22px;

}



.why-card{

padding:30px 26px;

border-radius:var(--radius-sm);

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

border:1px solid var(--border);

backdrop-filter:blur(15px);

transition:var(--transition);

}



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

margin-top:30px;

}



.why-card:nth-child(4){

margin-top:-30px;

}



.why-card:hover{

transform:translateY(-8px);

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

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

}



.why-card .icon{

font-size:30px;

margin-bottom:16px;

display:block;

}



.why-card h4{

font-size:17px;

margin-bottom:8px;

}



.why-card p{

font-size:13.5px;

color:var(--muted);

line-height:1.6;

}



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


.stats{

padding:100px 0;

position:relative;

background:

linear-gradient(180deg,#070B14,var(--navy) 50%,#070B14);

overflow:hidden;

}



.stats::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at 15% 30%,rgba(0,168,255,.14),transparent 45%),

radial-gradient(circle at 85% 70%,rgba(0,229,255,.12),transparent 45%);

}



.stats-grid{

position:relative;

z-index:1;

display:grid;

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

gap:30px;

text-align:center;

}



.stat-item{

padding:20px;

}



.stat-item .num{

font-size:clamp(38px,4.4vw,56px);

font-weight:800;

letter-spacing:-2px;

background:var(--gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.stat-item p{

margin-top:10px;

color:var(--muted);

font-size:14.5px;

letter-spacing:.3px;

}



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


.portfolio{

padding:120px 0;

background:#070B14;

}



.portfolio-filters{

display:flex;

justify-content:center;

gap:12px;

margin-top:50px;

margin-bottom:50px;

flex-wrap:wrap;

}



.filter-btn{

padding:10px 24px;

border-radius:50px;

border:1px solid var(--border);

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

color:var(--muted);

font-size:14px;

font-weight:600;

cursor:pointer;

transition:var(--transition);

}



.filter-btn:hover{

color:var(--white);

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

}



.filter-btn.active{

background:var(--gradient);

color:var(--white);

border-color:transparent;

}



.portfolio-grid{

display:grid;

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

gap:26px;

}



.portfolio-card{

border-radius:var(--radius);

overflow:hidden;

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

border:1px solid var(--border);

transition:var(--transition);

opacity:1;

transform:scale(1);

}



.portfolio-card.hide{

display:none;

}



.portfolio-card:hover{

transform:translateY(-8px);

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

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

}



.portfolio-thumb{

height:200px;

position:relative;

display:flex;

align-items:center;

justify-content:center;

font-size:44px;

overflow:hidden;

}



.portfolio-thumb::after{

content:"";

position:absolute;

inset:0;

background-image:

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

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

background-size:26px 26px;

}



.thumb-1{background:linear-gradient(135deg,#0066FF,#00E5FF);}
.thumb-2{background:linear-gradient(135deg,#5B21B6,#00A8FF);}
.thumb-3{background:linear-gradient(135deg,#0F766E,#00E5FF);}
.thumb-4{background:linear-gradient(135deg,#B91C1C,#0066FF);}
.thumb-5{background:linear-gradient(135deg,#0066FF,#22C55E);}
.thumb-6{background:linear-gradient(135deg,#7C3AED,#00A8FF);}


.portfolio-body{

padding:26px;

}



.portfolio-tag{

font-size:11.5px;

font-weight:700;

letter-spacing:.5px;

color:var(--accent);

text-transform:uppercase;

}



.portfolio-body h3{

font-size:20px;

margin:12px 0 10px;

}



.portfolio-body p{

font-size:14px;

color:var(--muted);

line-height:1.6;

margin-bottom:18px;

}



.portfolio-link{

font-size:14px;

font-weight:700;

color:var(--white);

display:inline-flex;

align-items:center;

gap:6px;

transition:var(--transition);

}



.portfolio-link:hover{

gap:12px;

color:var(--accent);

}



/*=========================================
PROCESS
=========================================*/


.process{

padding:120px 0;

background:var(--navy);

position:relative;

}



.process-track{

margin-top:80px;

display:grid;

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

gap:0;

position:relative;

}



.process-line{

position:absolute;

top:34px;

left:10%;

right:10%;

height:1px;

background:

repeating-linear-gradient(90deg,rgba(0,229,255,.35) 0 10px,transparent 10px 20px);

z-index:0;

}



.process-step{

position:relative;

z-index:1;

text-align:center;

padding:0 16px;

}



.process-num{

width:68px;

height:68px;

border-radius:50%;

margin:0 auto 26px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:800;

background:var(--surface);

border:1px solid var(--border);

color:var(--accent);

transition:var(--transition);

}



.process-step:hover .process-num{

background:var(--gradient);

color:var(--white);

border-color:transparent;

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

transform:scale(1.08);

}



.process-step h3{

font-size:18px;

margin-bottom:10px;

}



.process-step p{

font-size:13.5px;

color:var(--muted);

line-height:1.6;

}



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


.testimonials{

padding:120px 0;

background:#070B14;

}



.testimonial-slider{

margin-top:60px;

max-width:820px;

margin-left:auto;

margin-right:auto;

position:relative;

}



.testimonial-track{

overflow:hidden;

}



.testimonial-slides{

display:flex;

transition:transform .6s cubic-bezier(.16,1,.3,1);

}



.testimonial-slide{

min-width:100%;

padding:8px;

}



.testimonial-card{

padding:50px;

border-radius:var(--radius);

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

border:1px solid var(--border);

text-align:center;

backdrop-filter:blur(15px);

}



.testimonial-stars{

color:var(--accent);

font-size:16px;

letter-spacing:3px;

margin-bottom:24px;

}



.testimonial-card p.quote{

font-size:19px;

line-height:1.75;

color:var(--text);

margin-bottom:32px;

}



.testimonial-person{

display:flex;

align-items:center;

justify-content:center;

gap:14px;

}



.testimonial-avatar{

width:48px;

height:48px;

border-radius:50%;

background:var(--gradient);

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

font-size:16px;

}



.testimonial-person .name{

font-weight:700;

font-size:15px;

}



.testimonial-person .role{

font-size:13px;

color:var(--muted);

}



.slider-controls{

display:flex;

align-items:center;

justify-content:center;

gap:26px;

margin-top:40px;

}



.slider-arrow{

width:46px;

height:46px;

border-radius:50%;

border:1px solid var(--border);

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

color:var(--white);

font-size:18px;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

transition:var(--transition);

}



.slider-arrow:hover{

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

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

}



.slider-dots{

display:flex;

gap:10px;

}



.slider-dots span{

width:8px;

height:8px;

border-radius:50%;

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

cursor:pointer;

transition:var(--transition);

}



.slider-dots span.active{

background:var(--gradient);

width:24px;

border-radius:6px;

}



/*=========================================
FAQ
=========================================*/


.faq{

padding:120px 0;

background:var(--navy);

}



.faq-list{

max-width:780px;

margin:60px auto 0;

}



.faq-item{

border:1px solid var(--border);

border-radius:var(--radius-sm);

margin-bottom:16px;

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

overflow:hidden;

transition:var(--transition);

}



.faq-item.open{

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

}



.faq-question{

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

padding:24px 28px;

background:none;

border:none;

color:var(--white);

font-size:16.5px;

font-weight:600;

text-align:left;

cursor:pointer;

}



.faq-question .icon{

width:32px;

height:32px;

border-radius:50%;

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

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

margin-left:20px;

font-size:16px;

transition:var(--transition);

}



.faq-item.open .faq-question .icon{

background:var(--gradient);

transform:rotate(135deg);

}



.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

}



.faq-answer p{

padding:0 28px 26px;

color:var(--muted);

font-size:15px;

line-height:1.7;

max-width:640px;

}



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


.contact{

padding:120px 0;

background:#070B14;

}



.contact-grid{

margin-top:60px;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

}



.contact-form{

padding:44px;

border-radius:var(--radius);

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

border:1px solid var(--border);

backdrop-filter:blur(15px);

}



.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}



.contact-form label{

display:block;

font-size:13px;

color:var(--muted);

margin-bottom:8px;

margin-top:18px;

}



.contact-form label:first-of-type{

margin-top:0;

}



.contact-form input,
.contact-form select,
.contact-form textarea{

width:100%;

padding:14px 16px;

border-radius:12px;

border:1px solid var(--border);

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

color:var(--white);

font-family:inherit;

font-size:14.5px;

transition:var(--transition);

}



.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

outline:none;

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

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

}



.contact-form textarea{

resize:vertical;

min-height:110px;

}



.contact-form button{

margin-top:28px;

width:100%;

padding:16px;

border:none;

border-radius:50px;

background:var(--gradient);

color:var(--white);

font-weight:700;

font-size:15px;

cursor:pointer;

transition:var(--transition);

}



.contact-form button:hover{

transform:translateY(-3px);

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

}



.contact-side{

display:flex;

flex-direction:column;

gap:20px;

}



.contact-banner{

padding:38px;

border-radius:var(--radius);

background:var(--gradient);

flex-grow:1;

display:flex;

flex-direction:column;

justify-content:center;

position:relative;

overflow:hidden;

}



.contact-banner::after{

content:"";

position:absolute;

inset:0;

background-image:

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

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

background-size:30px 30px;

}



.contact-banner h3{

font-size:26px;

margin-bottom:12px;

position:relative;

}



.contact-banner p{

font-size:14.5px;

color:rgba(255,255,255,.85);

line-height:1.6;

position:relative;

}



.contact-info-row{

display:flex;

gap:16px;

}



.contact-info-card{

flex:1;

padding:24px;

border-radius:var(--radius-sm);

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

border:1px solid var(--border);

}



.contact-info-card .icon{

font-size:22px;

margin-bottom:12px;

display:block;

}



.contact-info-card h4{

font-size:14px;

margin-bottom:6px;

}



.contact-info-card p{

font-size:13px;

color:var(--muted);

line-height:1.5;

}



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


footer{

background:var(--background);

border-top:1px solid var(--border-soft);

padding:80px 0 0;

}



.footer-grid{

display:grid;

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

gap:50px;

padding-bottom:60px;

}



.footer-brand p{

color:var(--muted);

font-size:14.5px;

line-height:1.7;

margin:18px 0 24px;

max-width:280px;

}



.footer-social{

display:flex;

gap:12px;

}



.footer-social a{

width:38px;

height:38px;

border-radius:50%;

border:1px solid var(--border);

display:flex;

align-items:center;

justify-content:center;

font-size:15px;

transition:var(--transition);

}



.footer-social a:hover{

background:var(--gradient);

border-color:transparent;

transform:translateY(-3px);

}



footer h4{

font-size:14px;

margin-bottom:22px;

letter-spacing:.5px;

}



footer .footer-links li{

margin-bottom:13px;

}



footer .footer-links a{

color:var(--muted);

font-size:14.5px;

transition:var(--transition);

}



footer .footer-links a:hover{

color:var(--accent);

padding-left:4px;

}



.newsletter-form{

display:flex;

margin-top:16px;

border:1px solid var(--border);

border-radius:50px;

overflow:hidden;

padding:4px;

}



.newsletter-form input{

flex:1;

background:none;

border:none;

padding:10px 16px;

color:var(--white);

font-family:inherit;

font-size:13.5px;

}



.newsletter-form input:focus{

outline:none;

}



.newsletter-form button{

border:none;

border-radius:50px;

padding:10px 20px;

background:var(--gradient);

color:var(--white);

font-weight:700;

font-size:13px;

cursor:pointer;

}



.footer-bottom{

border-top:1px solid var(--border-soft);

padding:26px 0;

display:flex;

align-items:center;

justify-content:space-between;

flex-wrap:wrap;

gap:14px;

font-size:13px;

color:var(--muted);

}



.footer-bottom .legal-links{

display:flex;

gap:24px;

}



.footer-bottom .legal-links a{

color:var(--muted);

transition:var(--transition);

}



.footer-bottom .legal-links a:hover{

color:var(--white);

}



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


.back-to-top{

position:fixed;

bottom:30px;

right:30px;

width:50px;

height:50px;

border-radius:50%;

background:var(--gradient);

display:flex;

align-items:center;

justify-content:center;

color:var(--white);

font-size:18px;

cursor:pointer;

z-index:900;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:var(--transition);

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

}



.back-to-top.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}