/* ================= GLOBAL ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

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

background:#f7f8fc;
color:#0f172a;

overflow-x:hidden;

}


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

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

.navbar{

position:fixed;
top:0;
left:0;
width:100%;

z-index:1000;

padding:24px 40px;

background-color:rgba(246,248,255,0); /* match hero base */

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

transition:
background-color .35s ease,
backdrop-filter .35s ease,
box-shadow .35s ease,
padding .35s ease;

}


/* ================= FAKE BORDER USING PSEUDO ELEMENT ================= */

.navbar::after{

content:"";

position:absolute;
bottom:0;
left:0;
width:100%;
height:1px;

background:rgba(0,0,0,0.06);

opacity:0;

transition:opacity .35s ease;

}

.nav-container{

max-width:1200px;

margin:0 auto;

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

/* padding: 0px 50px; */
padding-left: 0px;
padding-right: 60px;

}


/* Navbar dropdown menu about me */
/* ================= NAVBAR ================= */

.navbar{

position:fixed;
top:0;
left:0;
width:100%;

z-index:1000;

padding:20px 60px;

background:rgba(246,248,255,0);

backdrop-filter:blur(0px);

transition:
background .35s ease,
backdrop-filter .35s ease,
box-shadow .35s ease;

}


.nav-container{

max-width:1200px;

margin:0 auto;

display:flex;

align-items:center;

}


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

.logo{

display:flex;
align-items:center;
gap:14px;

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

}


.logo-icon{

width:44px;
height:44px;

border-radius:14px;

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

color:white;

font-weight:700;

background:
linear-gradient(145deg,#6366f1,#4f46e5);

box-shadow:
0 12px 20px rgba(79,70,229,0.35),
inset 0 1px 1px rgba(255,255,255,0.2);

transition:.25s ease;

}


.logo-icon:hover{

transform:translateY(-2px);

}


/* ================= NAV MENU ================= */

.nav-menu{

display:flex;

align-items:center;

gap:8px;

margin-left:auto;

}


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

.nav-link,
.nav-dropdown-toggle{

display:flex;
align-items:center;

padding:10px 18px;

border-radius:999px;

font-size:16px;
font-weight:500;

color:#0f172a;

text-decoration:none;

cursor:pointer;

background:transparent;

transition:
background .18s ease,
color .18s ease,
transform .12s ease;

}


/* Hover animation EXACT match */

.nav-link:hover,
.nav-dropdown-toggle:hover{

background:#eef2ff;

color:#4338ca;

transform:translateY(-1px);

}


/* ================= DROPDOWN ================= */

.nav-dropdown{

position:relative;

}


/* ================= DROPDOWN MENU ================= */

.nav-dropdown-menu{

position:absolute;

top:56px;
left:0;

background:white;

border-radius:18px;

padding:10px;

min-width:240px;

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

opacity:0;

visibility:hidden;

transform:
translateY(8px)
scale(.98);

transition:
opacity .18s ease,
transform .18s ease,
visibility .18s;

}


/* SHOW ON HOVER */

.nav-dropdown:hover .nav-dropdown-menu{

opacity:1;

visibility:visible;

transform:
translateY(0)
scale(1);

}


/* ================= DROPDOWN ITEMS ================= */

.dropdown-item{

display:block;

padding:14px 18px;

border-radius:12px;

font-size:15px;
font-weight:500;

color:#0f172a;

text-decoration:none;

transition:
background .18s ease,
color .18s ease,
transform .12s ease;

}


/* Hover EXACT animation */

.dropdown-item:hover{

background:#eef2ff;

color:#4338ca;

transform:translateX(2px);

}


/* ================= SCROLLED STATE ================= */

.navbar.scrolled{

background-color:rgba(255,255,255,0.72);

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

box-shadow:
0 4px 20px rgba(0,0,0,0.04);

padding:16px 80px;

}


/* fade border smoothly */

.navbar.scrolled::after{

opacity:1;

}



.logo{

display:flex;
align-items:center;
gap:12px;

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

}

.logo-icon{

width:44px;
height:44px;

border-radius:12px;

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

font-weight:700;
font-size:18px;

color:white;

/* 3D gradient surface */
background:
linear-gradient(145deg,#6366f1,#4f46e5);

/* depth shadows */
box-shadow:
0 10px 20px rgba(79,70,229,0.35),
0 4px 8px rgba(0,0,0,0.15),
inset 0 1px 1px rgba(255,255,255,0.25),
inset 0 -2px 4px rgba(0,0,0,0.15);

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

cursor:pointer;

position:relative;

}

nav{

display:flex;
gap:28px;

}

nav a{

text-decoration:none;
color:#334155;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:#5b5fff;

}

.hire-btn{

background:#ff8a3d;

border:none;

padding:12px 24px;

border-radius:12px;

color:white;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.hire-btn:hover{

transform:translateY(-2px);

}




/* ================= FADE ANIMATION ================= */

.fade-up{

opacity:0;
transform:translateY(40px);

animation:fadeUp .9s ease forwards;

}

.delay-1{animation-delay:.2s;}
.delay-2{animation-delay:.4s;}
.delay-3{animation-delay:.6s;}
.delay-4{animation-delay:.8s;}
.delay-5{animation-delay:1s;}
.delay-6{animation-delay:1.2s;}

@keyframes fadeUp{

to{
opacity:1;
transform:translateY(0);
}

}


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

.parallax-container{

position:relative;

}

.parallax-layer{

will-change:transform;

transition:transform .15s linear;

}



/* contact me */
/* ================= CONTACT SECTION ================= */

.contact {

padding: 120px 0;

background: linear-gradient(
135deg,
#0f172a 0%,
#0b1a3a 40%,
#1e1b4b 100%
);

color: white;

}


.contact-container {

max-width: 1200px;

margin: auto;

display: flex;

gap: 80px;

align-items: center;

padding: 0 40px;

}


/* LEFT SIDE */

.contact-left {

flex: 1;

}

.contact-label {

font-size: 12px;

letter-spacing: 1px;

color: #94a3b8;

margin-bottom: 10px;

}

.contact-title {

font-size: 48px;

font-weight: 800;

line-height: 1.2;

margin-bottom: 20px;

}

.contact-desc {

color: #cbd5e1;

line-height: 1.6;

margin-bottom: 30px;

max-width: 420px;

}


/* CONTACT INFO */

.contact-item {

display: flex;

gap: 14px;

align-items: center;

margin-bottom: 18px;

}

.contact-icon {

width: 44px;
height: 44px;

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

border-radius: 50%;

display: flex;

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

font-size: 18px;

}

.contact-heading {

font-size: 14px;

font-weight: 600;

}

.contact-text {

font-size: 14px;

color: #94a3b8;

}


/* SOCIAL */

.contact-social {

display: flex;

gap: 14px;

margin-top: 20px;

}

.social-btn {

width: 42px;
height: 42px;

border-radius: 50%;

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

display: flex;

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

cursor: pointer;

transition: 0.3s;

}

.social-btn:hover {

background: white;

color: black;

}


/* RIGHT SIDE */

.contact-right {

flex: 1;

display: flex;

justify-content: center;

}

.contact-card {

background: white;

color: black;

padding: 32px;

border-radius: 20px;

width: 420px;

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

}

.contact-card h3 {

margin-bottom: 20px;

}


/* INPUT */

.contact-card input,
.contact-card textarea {

width: 100%;

padding: 14px;

border-radius: 10px;

border: 1px solid #e2e8f0;

margin-bottom: 14px;

font-family: inherit;

}

.contact-card textarea {

height: 120px;

resize: none;

}


/* BUTTON */

.contact-btn {

width: 100%;

padding: 16px;

border-radius: 12px;

border: none;

color: white;

font-weight: 600;

cursor: pointer;

background: linear-gradient(
90deg,
#6366f1,
#7c3aed
);

transition: 0.3s;

}

.contact-btn:hover {

transform: translateY(-2px);

box-shadow:
0 10px 25px rgba(99,102,241,0.4);

}


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

.footer {

background: #020617;

padding: 22px 0;

text-align: center;

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

}


.footer-container {

color: #94a3b8;

font-size: 14px;

letter-spacing: 0.3px;

}


/* ================= SPEAKING SECTION ================= */

.speaking {

padding: 70px 0;

background:
linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);

position: relative;

overflow: hidden;

}

.section-header{
text-align:center;
margin-bottom:40px;
}

.section-sub {

max-width: 700px;

margin: 10px auto 60px auto;

color: #64748b;

text-align: center;

}


/* GRID */

.speaking-grid {

display: grid;

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

gap: 28px;

max-width: 1100px;

margin: auto;

}


/* CARD */

.speaking-card {

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

backdrop-filter: blur(10px);

border-radius: 18px;

overflow: hidden;

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

transition: 0.35s;

cursor: pointer;

}


.speaking-card:hover {

transform: translateY(-10px);

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

}


/* IMAGE */

.speaking-image {

position: relative;

height: 160px;

overflow: hidden;

}

.speaking-image img {

width: 100%;

height: 100%;

object-fit: cover;

}


/* TAG */

.speaking-tag {

position: absolute;

top: 12px;
left: 12px;

background: rgba(99,102,241,0.1);

color: #6366f1;

font-size: 12px;

padding: 4px 10px;

border-radius: 20px;

font-weight: 600;

}


/* BODY */

.speaking-body {

padding: 18px;

}

.speaking-role {

color: #6366f1;

font-size: 13px;

margin-bottom: 6px;

}

.speaking-body h3 {

font-size: 18px;

margin-bottom: 6px;

}

.speaking-meta {

color: #64748b;

font-size: 14px;

margin-bottom: 10px;

}

.speaking-type {

font-size: 13px;

color: #475569;

}


/* DOTS */

.speaking-dots {

display: flex;

justify-content: center;

gap: 8px;

margin-top: 30px;

}

.dot {

width: 8px;
height: 8px;

background: #cbd5e1;

border-radius: 50%;

}

.dot.active {

background: #6366f1;

}



/* ================= BRANDS SECTION ================= */

/* SECTION */

.brands {

padding: 80px 0;

background: white;

overflow: hidden;

}


/* CONTAINER */

.brands-container {

max-width: 1200px;

margin: auto;

display: flex;

align-items: center;

gap: 10px;

padding: 0 10px;

}


/* LEFT TEXT */

.brands-left {

min-width: 280px;

z-index: 2;

/* #6366f1,#4f46e5 */

color: #3d40d6;
padding: 0 20px;

}

.brands-left h2 {

font-size: 36px;

font-weight: 700;

}


/* DIVIDER */

.brands-divider {

width: 2px;

height: 70px;

background: #0ea5a4;

z-index: 3;

position: relative;

}


/* SCROLL MASK */

.brands-scroll {

overflow: hidden;

flex: 1;

position: relative;

}


/* TRACK */

.brands-track {

display: flex;

gap: 60px;

width: max-content;

animation: scrollLeft 25s linear infinite;

}


/* LOGOS */

.brands-track img {

height: 36px;

opacity: 1;

/* filter: grayscale(100%); */

transition: 0.3s;

}

.brands-track img:hover {

opacity: 1;

filter: grayscale(0%);

}


/* ANIMATION */

@keyframes scrollLeft {

0% {

transform: translateX(0);

}

100% {

transform: translateX(-50%);

}

}