/*=========================================================
  TechNest v2 - styles.css
  Part 1A
  -----------------------------------------
  • CSS Variables
  • Reset
  • Global Typography
  • Utility Classes
  • Buttons
  • Glass Navigation
  • Hero
  • Dashboard
==========================================================*/

/*==============================
Google Font
==============================*/

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

/*==============================
Variables
==============================*/

:root{

--primary:#2563eb;
--primary-light:#60a5fa;
--primary-dark:#1d4ed8;

--accent:#4f46e5;
--accent-light:#818cf8;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--dark:#0f172a;
--dark-2:#172554;
--dark-3:#1e293b;

--light:#ffffff;
--light-bg:#f8fafc;
--section:#eef4ff;

--text:#334155;
--text-light:#64748b;

--border:#e2e8f0;

--radius-sm:12px;
--radius:20px;
--radius-lg:28px;

--shadow-sm:
0 8px 20px rgba(15,23,42,.06);

--shadow:
0 15px 40px rgba(15,23,42,.10);

--shadow-lg:
0 25px 60px rgba(15,23,42,.18);

--transition:.35s ease;

}


/*==============================
Reset
==============================*/

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--light-bg);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

/*==============================
Scrollbar
==============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eef2ff;

}

::-webkit-scrollbar-thumb{

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

border-radius:20px;

}

/*==============================
Typography
==============================*/

h1,
h2,
h3,
h4{

color:var(--dark);

line-height:1.15;

font-weight:700;

}

h1{

font-size:4rem;

letter-spacing:-2px;

}

h2{

font-size:2.8rem;

margin-bottom:18px;

}

h3{

font-size:1.35rem;

}

p{

color:var(--text-light);

margin:18px 0;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

transition:var(--transition);

}

section{

padding:110px 8%;

position:relative;

}

/*==============================
Containers
==============================*/

.container{

max-width:1300px;

margin:auto;

}

/*==============================
Section Title
==============================*/

.section-title{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-title span{

display:inline-block;

padding:8px 18px;

background:#dbeafe;

color:var(--primary);

border-radius:40px;

font-size:.85rem;

font-weight:700;

margin-bottom:18px;

}

.section-title p{

font-size:1.05rem;

}

/*==============================
Buttons
==============================*/

.btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:16px 34px;

border-radius:50px;

font-weight:600;

transition:var(--transition);

cursor:pointer;

}

.btn-primary{

background:

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

color:white;

box-shadow:

0 15px 35px rgba(37,99,235,.30);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 22px 45px rgba(37,99,235,.40);

}


.dark{

background:var(--dark);

color:white;

border:none;

}

/*==============================
Header
==============================*/

header{

position:relative;

overflow:hidden;

background:

radial-gradient(circle at top right,
rgba(96,165,250,.25),
transparent 40%),

radial-gradient(circle at bottom left,
rgba(79,70,229,.18),
transparent 45%),

linear-gradient(
180deg,
#f8fbff,
#eef4ff
);

}

/*==============================
Glass Navigation
==============================*/

.navbar{

position:fixed;

top:2px;

left:50%;

transform:translateX(-50%);

width:min(94%,1280px);

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 28px;

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

backdrop-filter:blur(18px);

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

border-radius:18px;

box-shadow:var(--shadow);

z-index:999;

}

.logo{

font-size:1.8rem;

font-weight:800;

color:var(--dark);

}

.logo span{

color:var(--primary);

}

.nav-links{

display:flex;

list-style:none;

gap:34px;

}

.nav-links a{

position:relative;

font-weight:500;

color:var(--dark);

}

.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:var(--primary);

}

.nav-links a:hover::after{

width:100%;

}

.nav-button{

padding:13px 24px;

border-radius:40px;

background:var(--primary);

color:white;

font-weight:600;

box-shadow:0 12px 28px rgba(37,99,235,.28);

}

.nav-button:hover{

background:var(--primary-dark);

}

/*==============================
Hero
==============================*/

.hero{

display:grid;

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

align-items:center;

gap:70px;

min-height:100vh;

padding-top:140px;

}

.hero-content{

max-width:620px;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

background:white;

border-radius:40px;

font-size:.85rem;

font-weight:700;

color:var(--primary);

box-shadow:var(--shadow-sm);

}

.hero h1{

margin:28px 0;

}

.hero p{

font-size:1.1rem;

max-width:580px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-top:35px;

flex-wrap:wrap;

}

.hero-stats{

display:flex;

gap:50px;

margin-top:55px;

}

.hero-stats h3{

font-size:2rem;

color:var(--primary);

margin-bottom:6px;

}

.hero-stats p{

font-size:.9rem;

margin:0;

}

/*==============================
Dashboard
==============================*/

.hero-dashboard{

display:flex;

justify-content:center;

}

.dashboard{

width:100%;

max-width:500px;

background:white;

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow-lg);

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

}

.dashboard-header{

display:flex;

gap:10px;

padding:18px 20px;

background:#f8fafc;

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

}

.dot{

width:12px;

height:12px;

border-radius:50%;

}

.red{

background:#ef4444;

}

.yellow{

background:#f59e0b;

}

.green{

background:#22c55e;

}

.dashboard-body{

padding:26px;

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

.widget{

padding:22px;

background:#f8fbff;

border-radius:18px;

border:1px solid #dbeafe;

transition:var(--transition);

}

.widget:hover{

transform:translateY(-5px);

box-shadow:var(--shadow-sm);

}

.widget h4{

font-size:.85rem;

color:var(--primary);

margin-bottom:12px;

}

.widget strong{

display:block;

font-size:1.15rem;

color:var(--dark);

margin-bottom:6px;

}

.widget span{

font-size:.85rem;

color:var(--text-light);

}

.large{

grid-column:1 / -1;

}

.large ul{

margin-top:12px;

padding-left:18px;

}

.large li{

margin-bottom:10px;

color:var(--text);

}


/* Try Reality Checks */
.reality-check{

padding:140px 8%;

background:#ffffff;

}


.reality-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

margin-top:60px;

}


.reality-main{

padding:50px;

background:
linear-gradient(
120deg,
#1E4E8C 0%,
#3B82F6 45%,
#93C5FD 100%
);

color:white;

border-radius:28px;

position:relative;

overflow:hidden;

}


.reality-main::before{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:220px;

height:220px;

border-radius:50%;

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

}


.reality-label{

display:inline-block;

padding:8px 18px;

background:#2563EB;

border-radius:40px;

font-size:.85rem;

font-weight:700;

margin-bottom:20px;

}


.reality-main h3{

font-size:2.3rem;

margin-bottom:20px;

color:white;

}


.reality-main p{

color:#dbeafe;

}


.reality-main a{

display:inline-block;

margin-top:30px;

color:white;

font-weight:700;

}


.weekly-question{

padding:40px;

border-radius:28px;

background:#F8FAFC;

border:1px solid #E2E8F0;

}


.weekly-question span{

display:inline-block;

padding:8px 16px;

background:#DBEAFE;

border-radius:40px;

font-weight:700;

margin-bottom:18px;

}


.weekly-question h3{

margin-bottom:18px;

}


.weekly-question a{

display:inline-block;

margin-top:25px;

font-weight:700;

color:#0F3D91;

}


/* Try Tech News and Global Trends*/

.global-trends{

padding:140px 8%;

background:#F4F8FC;

}


.trend-grid{

display:grid;

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

gap:40px;

margin-top:60px;

}


.trend-card{

background:white;

border-radius:28px;

overflow:hidden;

border:1px solid #E2E8F0;

transition:.35s;

}


.trend-card:hover{

transform:translateY(-8px);

box-shadow:

0 20px 45px rgba(15,23,42,.12);

}


.trend-image{

height:280px;

overflow:hidden;

}


.trend-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}


.trend-card:hover img{

transform:scale(1.05);

}


.trend-content{

padding:35px;

}


.trend-category{

display:inline-block;

padding:8px 16px;

background:#DBEAFE;

color:#0F3D91;

border-radius:999px;

font-size:.8rem;

font-weight:700;

margin-bottom:18px;

}


.trend-content h3{

font-size:1.6rem;

line-height:1.35;

color:#081A36;

margin-bottom:18px;

}


.trend-content p{

color:#475569;

line-height:1.7;

}


.trend-content a{

display:inline-block;

margin-top:20px;

color:#0F3D91;

font-weight:700;

text-decoration:none;

}


/*==================================
 Technology Showcase Banner
==================================*/

.tech-banner{

padding:80px 8%;

background:
linear-gradient(
135deg,
#081A36,
#0F3D91
);

}


.banner-content{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}


.banner-text span{

display:inline-block;

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

color:white;

padding:8px 18px;

border-radius:999px;

font-size:.85rem;

font-weight:700;

margin-bottom:20px;

}


.banner-text h2{

color:white;

font-size:2.5rem;

line-height:1.2;

margin-bottom:20px;

}


.banner-text p{

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

font-size:1.1rem;

line-height:1.7;

}


.banner-images{

position:relative;

height:360px;

}


.banner-image{

position:absolute;

width:260px;

height:330px;

border-radius:25px;

overflow:hidden;

box-shadow:

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

}


.banner-image img{

width:100%;

height:100%;

object-fit:cover;

}


.banner-image label{

position:absolute;

bottom:20px;

left:20px;

background:white;

color:#0F3D91;

padding:8px 16px;

border-radius:999px;

font-weight:700;

font-size:.85rem;

}


.ai-image{

left:20px;

top:0;

}


.security-image{

right:20px;

top:40px;

}


/* Mobile */

@media(max-width:768px){

.banner-content{

grid-template-columns:1fr;

}


.banner-images{

height:320px;

}

}


/*Try Tech Lifestyle / Tech for Everyday Life*/

/*==================================
    Tech For Everyday Life
==================================*/

.tech-life{

padding:140px 8%;

background:#F4FAF7;

}


.tech-life-container{

max-width:1250px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}


.life-tag{

display:inline-block;

padding:10px 18px;

background:#0F3D91;

color:white;

font-weight:700;

border-radius:999px;

margin-bottom:24px;

letter-spacing:.3px;

}


.tech-life-content h2{

font-size:3rem;

line-height:1.15;

margin-bottom:25px;

color:#081A36;

}


.tech-life-content p{

font-size:1.1rem;

line-height:1.9;

color:#475569;

margin-bottom:35px;

}


.life-button{

display:inline-flex;

align-items:center;

padding:15px 28px;

background:#0F3D91;

color:white;

border-radius:999px;

font-weight:600;

text-decoration:none;

transition:.3s;

}


.life-button:hover{

background:#163E7A;

transform:translateY(-3px);

}


.image-card{

background:white;

position:relative;

overflow:hidden;

border-radius:30px;

box-shadow:
0 25px 60px rgba(15,23,42,.12);

}


.image-card img{

display:block;

width:100%;

height:500px;

object-fit:cover;

transition:.6s;

}


.image-card:hover img{

transform:scale(1.05);

}


.image-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:35px;

background:linear-gradient(

transparent,

rgba(8,26,54,.95)

);

color:white;

}



.image-overlay span{

display:inline-block;

padding:8px 14px;

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

border-radius:999px;

font-size:.8rem;

margin-bottom:15px;

}


.image-overlay h3{

font-size:1.5rem;

line-height:1.4;

}


/*=========================================================
  TechNest v2 - styles.css
  Part 1B
  -----------------------------------------
  • Technologies
  • Services
  • Featured Article
==========================================================*/

/*==============================
Technologies Section
==============================*/

.tech-stack{

background:#ffffff;

position:relative;

overflow:hidden;

}

.tech-stack::before{

content:"";

position:absolute;

top:-220px;

right:-180px;

width:500px;

height:500px;

border-radius:50%;

background:radial-gradient(
circle,
rgba(37,99,235,.08),
transparent 70%
);

pointer-events:none;

}

.tech-grid{

display:grid;

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

gap:24px;

margin-top:50px;

}

.tech-card{

background:white;

padding:35px 25px;

border-radius:20px;

text-align:center;

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

box-shadow:var(--shadow-sm);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.tech-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

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

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.tech-card:hover{

transform:translateY(-8px);

box-shadow:
0 10px 35px rgba(15,23,42,.14),
0 2px 8px rgba(15,23,42,.06);

}

.tech-card:hover::before{

transform:scaleX(1);

}

.tech-icon{

width:70px;

height:70px;

margin:auto;

margin-bottom:22px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

background:linear-gradient(
135deg,
#dbeafe,
#eef2ff
);

}

.tech-card h3{

margin-bottom:8px;

}

.tech-card p{

margin:0;

font-size:.92rem;

}

/*==============================
Services
==============================*/

.services{

background:

linear-gradient(
180deg,
#f8fbff,
#eef4ff
);

position:relative;

}

.service-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.service-card{

background:white;

padding:40px;

border-radius:24px;

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

box-shadow:var(--shadow-sm);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:6px;

height:100%;

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

opacity:0;

transition:.35s;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

.service-card:hover::before{

opacity:1;

}

.service-icon{

width:78px;

height:78px;

display:flex;

justify-content:center;

align-items:center;

font-size:2rem;

border-radius:20px;

margin-bottom:28px;

background:

linear-gradient(
135deg,
#dbeafe,
#eef2ff
);

}

.service-card h3{

margin-bottom:18px;

}

.service-card p{

margin-bottom:28px;

}

.service-card a{

font-weight:700;

color:var(--primary);

display:inline-flex;

align-items:center;

gap:8px;

}

.service-card a:hover{

gap:14px;

color:var(--primary-dark);

}

/*==============================
Featured Article
==============================*/

.featured{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

background:#fff;

position:relative;

overflow:hidden;

}

.featured::after{

content:"";

position:absolute;

bottom:-180px;

left:-120px;

width:420px;

height:420px;

border-radius:50%;

background:radial-gradient(
circle,
rgba(79,70,229,.08),
transparent 70%
);

pointer-events:none;

}

.featured-image{

display:flex;

justify-content:center;

}

.feature-placeholder{

width:100%;

min-height:450px;

border-radius:28px;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(
135deg,
#2563eb,
#4f46e5
);

color:white;

font-size:2rem;

font-weight:700;

letter-spacing:2px;

box-shadow:var(--shadow-lg);

position:relative;

overflow:hidden;

}

.feature-placeholder::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

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

top:-60px;

right:-60px;

}

.feature-placeholder::after{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

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

bottom:-50px;

left:-50px;

}

.featured-content{

max-width:580px;

}

.featured-label{

display:inline-block;

padding:9px 18px;

background:#dbeafe;

color:var(--primary);

border-radius:50px;

font-size:.85rem;

font-weight:700;

margin-bottom:24px;

}

.featured-content h2{

font-size:2.7rem;

margin-bottom:24px;

}

.article-meta{

display:flex;

gap:16px;

flex-wrap:wrap;

margin-bottom:28px;

}

.article-meta span{

padding:8px 16px;

border-radius:40px;

background:#f1f5f9;

font-size:.85rem;

font-weight:600;

color:var(--text);

}

.featured-content p{

font-size:1.05rem;

margin-bottom:20px;

}

.featured .btn{

margin-top:18px;

}

/*==============================
Section Dividers
==============================*/

.services,
.featured,
.tech-stack{

border-top:1px solid rgba(226,232,240,.8);

}

/*==============================
Subtle Fade Animation
==============================*/

.tech-card,
.service-card,
.feature-placeholder{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=========================================================
  TechNest v2 - styles.css
  Part 2A
  -----------------------------------------
  • Resources
  • Latest Articles
  • Why Choose Me
  • Newsletter
==========================================================*/


/*==================================
  Resources
==================================*/

.resources{

background:#f8fafc;

position:relative;

overflow:hidden;

}

.resources::before{

content:"";

position:absolute;

top:-180px;

left:-180px;

width:420px;

height:420px;

border-radius:50%;

background:radial-gradient(circle,
rgba(37,99,235,.08),
transparent 70%);

}

.resource-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.resource-card{

background:#fff;

padding:38px;

border-radius:24px;

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

box-shadow:var(--shadow-sm);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.resource-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

.resource-card::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:100%;

height:5px;

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

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.resource-card:hover::after{

transform:scaleX(1);

}

.resource-icon{

width:75px;

height:75px;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

border-radius:18px;

margin-bottom:25px;

background:linear-gradient(
135deg,
#dbeafe,
#eef2ff
);

}

.resource-card h3{

margin-bottom:14px;

}

.resource-card a{

display:inline-flex;

margin-top:20px;

font-weight:700;

color:var(--primary);

gap:8px;

}

.resource-card a:hover{

gap:14px;

color:var(--primary-dark);

}


/*==================================
 Latest Articles
==================================*/

.articles{

background:#fff;

}

.article-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

align-items:start;

margin-top:60px;

}

.featured-post{

background:#fff;

border-radius:26px;

overflow:hidden;

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.featured-post:hover{

transform:translateY(-8px);

}

.article-image.large{

height:340px;

background:

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

position:relative;

overflow:hidden;

}

.article-image.large::before{

content:"TECH";

position:absolute;

right:35px;

bottom:25px;

font-size:3.2rem;

font-weight:800;

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

letter-spacing:6px;

}

.article-body{

padding:38px;

}

.category{

display:inline-block;

padding:8px 16px;

border-radius:40px;

background:#dbeafe;

color:var(--primary);

font-size:.85rem;

font-weight:700;

margin-bottom:18px;

}

.article-body h3{

font-size:2rem;

margin-bottom:20px;

}

.article-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:30px;

padding-top:25px;

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

}

.article-footer a{

font-weight:700;

color:var(--primary);

}

.article-footer a:hover{

color:var(--primary-dark);

}


/*==================================
 Sidebar
==================================*/

.article-sidebar{

display:flex;

flex-direction:column;

gap:24px;

}

.mini-post{

display:flex;

gap:18px;

align-items:center;

padding:18px;

background:#fff;

border-radius:18px;

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

box-shadow:var(--shadow-sm);

transition:var(--transition);

cursor:pointer;

}

.mini-post:hover{

transform:translateX(8px);

box-shadow:var(--shadow);

}

.thumb{

width:90px;

height:90px;

border-radius:16px;

background:linear-gradient(
135deg,
#2563eb,
#6366f1
);

flex-shrink:0;

}

.mini-post h4{

margin-bottom:8px;

font-size:1rem;

}

.mini-post p{

margin:0;

font-size:.9rem;

}


/*==================================
 Why Choose Me
==================================*/

.why-me{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

background:linear-gradient(
180deg,
#eef4ff,
#ffffff
);

}

.why-content span{

display:inline-block;

padding:8px 18px;

background:#dbeafe;

border-radius:40px;

font-size:.85rem;

font-weight:700;

color:var(--primary);

margin-bottom:20px;

}

.why-content h2{

margin-bottom:22px;

}

.why-content ul{

list-style:none;

margin-top:30px;

}

.why-content li{

padding:16px 0;

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

font-weight:500;

}

.why-content .btn{

margin-top:35px;

}

.why-card{

padding:45px;

border-radius:26px;

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

color:#fff;

box-shadow:var(--shadow-lg);

position:relative;

overflow:hidden;

}

.why-card::before{

content:"";

position:absolute;

top:-70px;

right:-70px;

width:220px;

height:220px;

border-radius:50%;

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

}

.why-card h3{

color:#fff;

margin-bottom:20px;

}

.why-card p{

color:#e5edff;

}


/*==================================
 Newsletter
==================================*/

.newsletter{

padding:110px 8%;

background:#fff;

}

.newsletter-box{

max-width:900px;

margin:auto;

padding:70px;

border-radius:32px;

text-align:center;

background:linear-gradient(
135deg,
#1d4ed8,
#4338ca
);

color:#fff;

box-shadow:var(--shadow-lg);

position:relative;

overflow:hidden;

}

.newsletter-box::before{

content:"";

position:absolute;

width:320px;

height:320px;

border-radius:50%;

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

top:-120px;

right:-80px;

}

.newsletter-box span{

display:inline-block;

padding:8px 18px;

border-radius:40px;

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

margin-bottom:18px;

font-size:.85rem;

font-weight:700;

}

.newsletter-box h2{

color:#fff;

margin-bottom:18px;

}

.newsletter-box p{

color:#dbeafe;

max-width:620px;

margin:0 auto 35px;

}

.newsletter form{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.newsletter input{

width:360px;

max-width:100%;

padding:18px 22px;

border:none;

outline:none;

border-radius:50px;

font-size:1rem;

font-family:inherit;

}

.newsletter button{

padding:18px 36px;

border:none;

border-radius:50px;

background:#fff;

color:var(--primary);

font-weight:700;

cursor:pointer;

transition:var(--transition);

}

.newsletter button:hover{

background:#dbeafe;

transform:translateY(-3px);

}

/*=========================================================
  TechNest v2 - styles.css
  Part 2B
  -----------------------------------------
  • Contact CTA
  • Footer
  • Utilities
  • Animations
  • Responsive
==========================================================*/


/*==================================
 Contact CTA
==================================*/

.contact-cta{

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

color:#fff;

text-align:center;

position:relative;

overflow:hidden;

}

.contact-cta::before{

content:"";

position:absolute;

top:-180px;

left:-180px;

width:420px;

height:420px;

border-radius:50%;

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

}

.contact-cta::after{

content:"";

position:absolute;

bottom:-200px;

right:-180px;

width:460px;

height:460px;

border-radius:50%;

background:
rgba(96,165,250,.08);

}

.cta-content{

max-width:760px;

margin:auto;

position:relative;

z-index:2;

}

.contact-cta h2{

font-size:3rem;

color:white;

margin-bottom:20px;

}

.contact-cta p{

color:#cbd5e1;

font-size:1.05rem;

margin-bottom:40px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.navbar.scrolled{

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

border-color:rgba(226,232,240,.9);

box-shadow:
0 15px 45px rgba(15,23,42,.16);

}



@media(max-width:768px){


.menu-toggle{

display:block;

}


.nav-links{

display:none;

flex-direction:column;

width:100%;

text-align:center;

}


.nav-links.active{

display:flex;

}

}


/*==================================
 Footer
==================================*/

footer{

background:#020617;

color:#94a3b8;

padding:90px 8% 35px;

}

.footer-grid{

display:grid;

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

gap:50px;

padding-bottom:55px;

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

}

.footer-about p{

margin-top:20px;

max-width:340px;

}

footer h3,
footer h4{

color:white;

margin-bottom:20px;

}

footer h3 span{

color:var(--primary-light);

}

footer a{

display:block;

margin-bottom:12px;

color:#94a3b8;

transition:var(--transition);

}

footer a:hover{

color:white;

padding-left:6px;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:28px;

gap:25px;

flex-wrap:wrap;

}

.social-links{

display:flex;

gap:16px;

}

.social-links a{

padding:10px 16px;

border-radius:40px;

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

margin:0;

}

.social-links a:hover{

background:var(--primary);

color:white;

padding-left:16px;

}


/*==================================
 Small Utilities
==================================*/

.text-center{

text-align:center;

}

.mt-1{

margin-top:20px;

}

.mt-2{

margin-top:40px;

}

.mt-3{

margin-top:70px;

}

.mb-1{

margin-bottom:20px;

}

.mb-2{

margin-bottom:40px;

}

.shadow{

box-shadow:var(--shadow);

}

.rounded{

border-radius:var(--radius);

}


/*==================================
 Hover Improvements
==================================*/

.service-card,
.tech-card,
.resource-card,
.featured-post,
.mini-post,
.dashboard,
.widget{

transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

}

.service-card:hover,
.tech-card:hover,
.resource-card:hover{

border-color:#bfdbfe;

}


/*==================================
 Fade Animation
==================================*/

.fade-up{

animation:fadeUp .8s ease both;

}

.delay-1{

animation-delay:.15s;

}

.delay-2{

animation-delay:.3s;

}

.delay-3{

animation-delay:.45s;

}

.delay-4{

animation-delay:.6s;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*==================================
 Floating Animation
==================================*/

.dashboard{

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

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}


/*==================================
 Smooth Image Zoom
==================================*/

.feature-placeholder,
.article-image,
.thumb{

transition:transform .6s ease;

}

.featured-post:hover .article-image{

transform:scale(1.05);

}

.feature-placeholder:hover{

transform:scale(1.02);

}

.mini-post:hover .thumb{

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

}


/*==================================
 Selection
==================================*/

::selection{

background:var(--primary);

color:white;

}


/*==================================
 Focus States
==================================*/

a:focus,
button:focus,
input:focus{

outline:3px solid rgba(37,99,235,.25);

outline-offset:3px;

}


/*==================================
 Tablet
==================================*/

@media (max-width:1100px){

.hero{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero-content{

margin:auto;

}

.hero-buttons,
.hero-stats{

justify-content:center;

}

.tech-grid{

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

}

.service-grid{

grid-template-columns:1fr 1fr;

}

.featured{

grid-template-columns:1fr;

}

.article-layout{

grid-template-columns:1fr;

}

.why-me{

grid-template-columns:1fr;

}

.footer-grid{

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

}

}


/*==================================
 Mobile
==================================*/

@media (max-width:768px){

section{

padding:80px 6%;

}

.navbar{

position:fixed;

top:8px;

left:50%;

transform:translateX(-50%);

width:min(94%,1280px);

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 30px;

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

backdrop-filter:blur(18px);

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

border-radius:18px;

box-shadow:
0 10px 35px rgba(15,23,42,.12);

transition:
background .35s ease,
box-shadow .35s ease,
border-color .35s ease;

z-index:999;

}

.nav-links{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.nav-button{

display:none;

}

.hero{

padding-top:70px;

min-height:auto;

}

.hero h1{

font-size:2.6rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-stats{

gap:25px;

flex-wrap:wrap;

}

.dashboard-body{

grid-template-columns:1fr;

}

.tech-grid{

grid-template-columns:1fr 1fr;

}

.service-grid{

grid-template-columns:1fr;

}

.resource-grid{

grid-template-columns:1fr;

}

.newsletter-box{

padding:45px 30px;

}

.newsletter form{

flex-direction:column;

}

.newsletter input{

width:100%;

}

.newsletter button{

width:100%;

}

.contact-cta h2{

font-size:2.2rem;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.social-links{

justify-content:center;

}

}


/*==================================
 Small Phones
==================================*/

@media (max-width:480px){

h1{

font-size:2.2rem;

}

h2{

font-size:1.8rem;

}

.hero-badge{

font-size:.75rem;

}

.tech-grid{

grid-template-columns:1fr;

}

.article-footer{

flex-direction:column;

align-items:flex-start;

gap:14px;

}

.btn{

width:100%;

}

.dashboard{

border-radius:20px;

}

.newsletter-box{

padding:35px 22px;

}

.contact-cta h2{

font-size:1.8rem;

}

}



/*==================================
 Optional Dark Theme Support
==================================*/

@media (prefers-color-scheme:dark){

body{

background:#0f172a;

}

}