/*====================================================
                ERTRAG GO v2.0
          Premium Consulting Website
======================================================*/

/*========================
Google Fonts
========================*/

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

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

:root{

--primary:#0F2A4A;
--secondary:#0D9488;
--accent:#5EEAD4;
--dark:#0A1F38;

--white:#ffffff;
--light:#F8FAFC;
--gray:#64748B;
--border:#E2E8F0;

--radius:24px;

--shadow:
0 20px 60px rgba(15,42,74,.08);

--transition:.35s ease;

}

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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

overflow-x:hidden;

}

body{

font-family:'DM Sans',sans-serif;

background:var(--light);

color:var(--primary);

overflow-x:hidden;

line-height:1.7;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

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

border-radius:100px;

}

/*========================
Container
========================*/

.container{

width:min(1200px,92%);

margin:auto;

}

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

h1,h2,h3,h4{

font-family:'Cormorant Garamond',serif;

font-weight:600;

letter-spacing:-1px;

}

p{

color:var(--gray);

}

a{

text-decoration:none;

}

/*========================
Page Background
========================*/

.page-bg{

position:fixed;

inset:0;

z-index:-2;

overflow:hidden;

max-width:100vw;

background:

linear-gradient(
180deg,
#ffffff,
#f8fafc);

}

.bg-grid{

position:absolute;

inset:0;

background-image:

linear-gradient(rgba(15,42,74,.04) 1px, transparent 1px),

linear-gradient(90deg, rgba(15,42,74,.04) 1px, transparent 1px);

background-size:60px 60px;

}

.bg-gradient{

position:absolute;

border-radius:50%;

filter:blur(90px);

opacity:.35;

}

.bg-one{

width:520px;

height:520px;

background:#5EEAD4;

top:-160px;

right:-120px;

}

.bg-two{

width:450px;

height:450px;

background:#0D9488;

left:-120px;

bottom:-120px;

opacity:.22;

}

.bg-one{

animation:floatOne 12s ease-in-out infinite;

}

.bg-two{

animation:floatTwo 15s ease-in-out infinite;

}

@keyframes floatOne{

0%,100%{

transform:translateY(0) translateX(0);

}

50%{

transform:translateY(30px) translateX(-20px);

}

}

@keyframes floatTwo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-25px) translateX(30px);

}

}

/*========================
Scroll Progress
========================*/

#progressBar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:

linear-gradient(
90deg,
var(--secondary),
var(--accent));

z-index:99999;

}

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

.header{

position:fixed;

top:20px;

left:0;

width:100%;

display:flex;

justify-content:center;

z-index:1000;

}

.navbar{

width:min(1200px,94%);

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 28px;

border-radius:22px;

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

backdrop-filter:blur(18px);

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.logo{

font-size:1.8rem;

font-family:'Cormorant Garamond',serif;

font-weight:700;

color:var(--primary);

}

.logo span{

background:

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

background-clip:text;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.nav-links{

display:flex;

gap:34px;

list-style:none;

}

.nav-links li{

position:relative;

}

.nav-links a,
.nav-links .dropdown-trigger{

font-size:.92rem;

font-weight:600;

color:var(--primary);

position:relative;

transition:.3s;

}

.nav-links a::after,
.nav-links .dropdown-trigger::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--secondary);

transition:.3s;

}

.nav-links a:hover,
.nav-links .dropdown-trigger:hover{

color:var(--secondary);

}

.nav-links a:hover::after,
.nav-links .dropdown-trigger:hover::after{

width:100%;

}

.dropdown-trigger{

display:inline-flex;

align-items:center;

gap:6px;

cursor:pointer;

}

.dropdown-trigger i{

font-size:.7rem;

transition:.3s;

}

.dropdown-menu{

position:absolute;

top:calc(100% + 14px);

left:0;

min-width:180px;

padding:12px;

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

border:1px solid rgba(15,42,74,.08);

border-radius:16px;

box-shadow:0 20px 45px rgba(15,42,74,.12);

display:flex;

flex-direction:column;

gap:8px;

opacity:0;

visibility:hidden;

transform:translateY(8px);

transition:.25s ease;

z-index:1001;

}

.dropdown-menu a{

padding:10px 12px;

border-radius:10px;

font-size:.9rem;

}

.dropdown-menu a:hover{

background:rgba(13,148,136,.08);

color:var(--secondary);

}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.open .dropdown-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.has-dropdown:hover .dropdown-trigger i,
.has-dropdown:focus-within .dropdown-trigger i,
.has-dropdown.open .dropdown-trigger i{

transform:rotate(180deg);

}

.nav-btn{

padding:14px 26px;

border-radius:16px;

background:

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

color:white;

font-size:.85rem;

font-weight:700;

box-shadow:

0 12px 35px rgba(13,148,136,.25);

transition:.35s;

}

.nav-btn:hover{

transform:translateY(-4px);

}

.menu-toggle{

display:none;

background:none;

border:none;

font-size:1.5rem;

cursor:pointer;

color:var(--primary);

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding:170px 0 100px;

position:relative;

}

.hero-container{

width:min(1200px,92%);

margin:auto;

display:grid;

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

align-items:center;

gap:80px;

}

.hero-content{

animation:fadeUp 1s ease;

}

.hero h1{

animation:fadeUp 1s ease .2s both;

}

.hero p{

animation:fadeUp 1s ease .45s both;

}

.hero-buttons{

animation:fadeUp 1s ease .7s both;

}

.hero-badge{

display:inline-flex;

align-items:center;

padding:10px 20px;

border-radius:100px;

background:rgba(13,148,136,.08);

border:1px solid rgba(13,148,136,.15);

color:var(--secondary);

font-size:.82rem;

font-weight:700;

letter-spacing:.08em;

text-transform:uppercase;

margin-bottom:25px;

}

.hero h1{

font-size:clamp(3.8rem,7vw,6.5rem);

line-height:.95;

margin-bottom:28px;

color:var(--primary);

}

.hero h1 span{

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

background-clip:text;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:1.12rem;

max-width:620px;

margin-bottom:45px;

line-height:1.9;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

/*========================
Primary Button
========================*/

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:18px;

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

color:#fff;

font-weight:700;

letter-spacing:.04em;

transition:var(--transition);

box-shadow:

0 20px 45px rgba(13,148,136,.25);

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:

0 30px 70px rgba(13,148,136,.45);

filter:brightness(1.05);

}

/*========================
Secondary Button
========================*/

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:18px;

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

border:1px solid rgba(15,42,74,.08);

backdrop-filter:blur(16px);

color:var(--primary);

font-weight:700;

transition:var(--transition);

}

.btn-secondary:hover{

background:white;

transform:translateY(-6px);

box-shadow:var(--shadow);

}

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

.hero-card{

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

backdrop-filter:blur(22px);

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

border-radius:30px;

padding:40px;

box-shadow:

0 30px 80px rgba(15,42,74,.12);

position:relative;

overflow:hidden;

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

}

.hero-card::before{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:radial-gradient(

circle,

rgba(94,234,212,.35),

transparent 70%

);

top:-120px;

right:-120px;

}

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

.card-header{

display:flex;

align-items:center;

gap:10px;

margin-bottom:30px;

font-size:.85rem;

font-weight:700;

color:var(--secondary);

text-transform:uppercase;

letter-spacing:.08em;

}

.live-dot{

width:10px;

height:10px;

border-radius:50%;

background:var(--secondary);

box-shadow:

0 0 15px rgba(13,148,136,.8);

animation:pulse 2s infinite;

}

/*========================
Metrics
========================*/

.metric{

padding:22px 0;

border-bottom:1px solid rgba(15,42,74,.08);

}

.metric:last-child{

border-bottom:none;

}

.metric h2{

font-size:2.8rem;

color:var(--secondary);

margin-bottom:5px;

}

.metric p{

margin:0;

font-size:.95rem;

color:var(--gray);

}

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

.hero::before{

content:"";

position:absolute;

width:600px;

height:600px;

border-radius:50%;

background:radial-gradient(

circle,

rgba(94,234,212,.15),

transparent 70%

);

top:-250px;

right:-180px;

filter:blur(50px);

z-index:-1;

}

.hero::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:radial-gradient(

circle,

rgba(13,148,136,.10),

transparent 70%

);

bottom:-200px;

left:-150px;

filter:blur(50px);

z-index:-1;

}

/*====================================================
                TRUST STRIP
======================================================*/

.trust-strip{

padding:60px 0;

position:relative;

}

.trust-title{

text-align:center;

font-size:1rem;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

color:var(--secondary);

margin-bottom:35px;

}

.trust-items{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:22px;

}

.trust-box{

display:flex;

align-items:center;

gap:12px;

padding:18px 28px;

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

backdrop-filter:blur(16px);

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

border-radius:18px;

box-shadow:var(--shadow);

font-weight:600;

transition:var(--transition);

}

.trust-box i{

font-size:1.3rem;

color:var(--secondary);

}

.trust-box:hover{

transform:translateY(-8px);

box-shadow:

0 25px 60px rgba(13,148,136,.18);

}

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

.about{

padding:120px 0;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.section-tag{

display:inline-block;

padding:10px 20px;

background:rgba(13,148,136,.08);

border-radius:50px;

font-size:.8rem;

font-weight:700;

letter-spacing:.08em;

text-transform:uppercase;

color:var(--secondary);

margin-bottom:22px;

}

.about h2{

font-size:3.3rem;

line-height:1.1;

margin-bottom:25px;

}

.about h2 span{

background:

linear-gradient(

135deg,

var(--secondary),

var(--accent));

background-clip:text;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.about p{

font-size:1.05rem;

margin-bottom:20px;

line-height:1.9;

}

.about-features{

display:grid;

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

gap:18px;

margin-top:35px;

}

.feature{

display:flex;

align-items:center;

gap:12px;

padding:16px;

background:white;

border-radius:16px;

box-shadow:var(--shadow);

transition:var(--transition);

}

.feature:hover{

transform:translateY(-6px);

}

.feature i{

width:38px;

height:38px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(

135deg,

var(--secondary),

var(--accent));

color:white;

border-radius:50%;

}

/*====================================================
                DASHBOARD CARD
======================================================*/

.about-card{

display:flex;

justify-content:center;

}

.glass-card{

width:100%;

max-width:480px;

padding:38px;

background:linear-gradient(
135deg,
rgba(255,255,255,.88),
rgba(255,255,255,.68));

backdrop-filter:blur(22px);

border-radius:30px;

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

box-shadow:

0 35px 80px rgba(15,42,74,.12);

position:relative;

overflow:hidden;

}

.glass-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:240px;

height:240px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(94,234,212,.3),

transparent 70%);

}

.glass-top{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

color:var(--secondary);

text-transform:uppercase;

letter-spacing:.08em;

margin-bottom:28px;

}

.pulse{

width:10px;

height:10px;

border-radius:50%;

background:var(--secondary);

box-shadow:0 0 16px rgba(13,148,136,.8);

animation:pulse 2s infinite;

}

.glass-card::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
120deg,
rgba(94,234,212,.12),
transparent 42%,
rgba(13,148,136,.10));

pointer-events:none;

}

.glass-card > *{

position:relative;

z-index:1;

}

.form-group{

display:flex;

flex-direction:column;

gap:8px;

margin-bottom:16px;

}

.form-group label{

font-size:.72rem;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

color:var(--secondary);

}

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

width:100%;

padding:14px 16px;

border:1px solid rgba(15,42,74,.10);

border-radius:16px;

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

color:var(--primary);

font-family:inherit;

font-size:.95rem;

outline:none;

transition:all .25s ease;

box-shadow:inset 0 1px 2px rgba(15,42,74,.04);

}

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

border-color:rgba(13,148,136,.45);

box-shadow:0 0 0 4px rgba(13,148,136,.12);

background:white;

transform:translateY(-1px);

}

.form-group textarea{

min-height:120px;

resize:vertical;

}

.field-help{

font-size:.78rem;

color:rgba(15,42,74,.62);

margin-top:-2px;

}

.form-msg{

margin-top:16px;

padding:14px 16px;

border-radius:12px;

font-weight:600;

display:none;

}

.form-msg.success{
	display:block;

background:rgba(16,185,129,.12);

color:#0f766e;

border:1px solid rgba(16,185,129,.25);

}

.form-msg.error{
	display:block;

background:rgba(239,68,68,.12);

color:#b91c1c;

border:1px solid rgba(239,68,68,.25);

}

.form-submit{

width:100%;

padding:16px 20px;

border:none;

border-radius:16px;

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

color:white;

font-size:.95rem;

font-weight:700;

cursor:pointer;

transition:all .3s ease;

box-shadow:0 16px 35px rgba(13,148,136,.25);

}

.form-submit:hover{

transform:translateY(-3px);

box-shadow:0 24px 45px rgba(13,148,136,.32);

}

.dashboard-stat{

padding:22px 0;

border-bottom:1px solid rgba(15,42,74,.08);

}

.dashboard-stat:last-child{

border-bottom:none;

}

.dashboard-stat h3{

font-size:2.6rem;

color:var(--primary);

margin-bottom:6px;

}

.dashboard-stat p{

margin:0;

}

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

.services{

padding:120px 0;

}

.section-heading{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-heading span{

display:inline-block;

padding:10px 20px;

border-radius:50px;

background:rgba(13,148,136,.08);

font-size:.8rem;

font-weight:700;

text-transform:uppercase;

letter-spacing:.08em;

color:var(--secondary);

margin-bottom:20px;

}

.section-heading h2{

font-size:3.4rem;

margin-bottom:20px;

}

.section-heading p{

font-size:1.05rem;

}

.services-grid{

display:grid;

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

gap:32px;

}

.service-card{

display:flex;

flex-direction:column;

gap:22px;

padding:40px;

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

backdrop-filter:blur(16px);

border-radius:28px;

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

box-shadow:var(--shadow);

transition:all .35s ease;

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:

linear-gradient(

90deg,

var(--secondary),

var(--accent));

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.service-card::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:80%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transition:.8s;

}

.service-card:hover::after{

left:130%;

}

.service-card:hover::before{

transform:scaleX(1);

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:

0 30px 70px rgba(13,148,136,.18);

}

.service-icon{

width:72px;

height:72px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:1.7rem;

background:

linear-gradient(

135deg,

var(--secondary),

var(--accent));

color:white;

margin-bottom:28px;

}

.service-card h3{

font-size:2rem;

margin-bottom:8px;

}

.service-card p{

font-size:1rem;

line-height:1.8;

}

.section-inner,
.container{

width:min(1200px,92%);

margin:0 auto;

}

.section-heading,
.section-inner{

max-width:860px;

margin:0 auto 56px;

text-align:center;

}

.section-label{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:rgba(13,148,136,.12);

color:var(--secondary);

font-size:.82rem;

font-weight:700;

letter-spacing:.14em;

text-transform:uppercase;

margin-bottom:22px;

}

.section-heading span,
.section-inner .section-label{

color:var(--secondary);

}

.section-heading h2,
.section-inner h2{

font-size:3.2rem;

margin-bottom:16px;

line-height:1.1;

}

.section-heading p,
.section-sub,
.section-inner .section-sub{

font-size:1.03rem;

line-height:1.9;

color:var(--body);

max-width:760px;

margin:0 auto;

}

.svc-num{
	display:inline-block;

margin-bottom:18px;

font-size:.82rem;

font-weight:700;

letter-spacing:.14em;

text-transform:uppercase;

color:var(--secondary);

}

.svc-bullets{

list-style:none;

padding:0;

margin:18px 0 0;

display:flex;

flex-direction:column;

gap:10px;

}

.svc-bullets li{

position:relative;

padding-left:18px;

color:var(--body);

font-size:.95rem;

line-height:1.7;

}

.svc-bullets li::before{

content:"•";

position:absolute;

left:0;

top:0;

color:var(--secondary);

font-weight:700;

}

.verticals-grid{

display:grid;

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

gap:28px;

margin-top:50px;

}

.vertical-card{

position:relative;

overflow:hidden;

padding:40px 34px;

z-index:1;

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

backdrop-filter:blur(16px);

border-radius:30px;

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

box-shadow:var(--shadow);

min-height:100%;

}

.vertical-card h3{

font-size:2rem;

margin-bottom:16px;

}

.v-tag{

display:inline-block;

padding:8px 14px;

border-radius:999px;

background:rgba(13,148,136,.12);

color:var(--secondary);

font-size:.8rem;

font-weight:700;

letter-spacing:.14em;

text-transform:uppercase;

margin-bottom:18px;

}

.v-industries{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:22px;

}

.v-pill{

padding:10px 14px;

border-radius:999px;

background:rgba(13,148,136,.08);

color:var(--secondary);

font-size:.82rem;

font-weight:600;

}

.v-bg-num{

position:absolute;

right:-8px;

bottom:-18px;

font-size:5.6rem;

font-weight:700;

color:var(--primary);

opacity:.05;

pointer-events:none;

z-index:0;

}

.process-list{

display:grid;

gap:20px;

margin-top:50px;

}

.process-item{

display:grid;

grid-template-columns:90px 1fr;

gap:20px;

padding:26px 30px;

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

backdrop-filter:blur(16px);

border-radius:24px;

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

box-shadow:var(--shadow);

}

.process-n{

display:flex;

align-items:center;

justify-content:center;

width:72px;

height:72px;

border-radius:20px;

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

color:white;

font-weight:700;

font-size:1.1rem;

}

.process-content h3{

font-size:1.35rem;

margin-bottom:10px;

}

.process-content p{

line-height:1.8;

color:var(--body);

}

.pricing-grid{

display:grid;

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

gap:28px;

margin-top:54px;

}

.pricing-card{

padding:38px 34px;

border-radius:30px;

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

backdrop-filter:blur(16px);

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

box-shadow:var(--shadow);

}

.pricing-card.dark{

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

color:white;

}

.pricing-label{

display:inline-block;

padding:8px 14px;

border-radius:999px;

background:rgba(13,148,136,.12);

color:var(--secondary);

font-size:.78rem;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

}

.pricing-card.dark .pricing-label{

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

color:white;

}

.pricing-card h3{

font-size:1.8rem;

margin:18px 0 10px;

}

.pricing-desc{

line-height:1.8;

color:var(--body);

}

.pricing-card.dark .pricing-desc,
.pricing-card.dark .pricing-unit,
.pricing-card.dark .pricing-features li{

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

}

.pricing-amt{

font-size:3rem;

font-weight:700;

color:var(--secondary);

margin:22px 0 8px;

}

.pricing-card.dark .pricing-amt{

color:white;

}

.pricing-unit{

font-size:.95rem;

line-height:1.7;

color:var(--body);

}

.pricing-features{

list-style:none;

padding:0;

margin:24px 0 0;

display:flex;

flex-direction:column;

gap:10px;

}

.pricing-features li{

position:relative;

padding-left:18px;

font-size:.95rem;

line-height:1.7;

}

.pricing-features li::before{

content:"•";

position:absolute;

left:0;

top:0;

color:var(--secondary);

font-weight:700;

}

.conversion-pill{

display:inline-block;

margin-top:22px;

padding:10px 16px;

border-radius:999px;

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

color:white;

font-size:.84rem;

font-weight:600;

}

.why-grid{

display:grid;

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

gap:24px;

margin-top:44px;

}

.why-card{

padding:26px 24px;

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

backdrop-filter:blur(16px);

border-radius:24px;

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

box-shadow:var(--shadow);

}

.why-card .why-n{

display:inline-block;

margin-bottom:14px;

font-size:.8rem;

font-weight:700;

letter-spacing:.14em;

text-transform:uppercase;

color:#7dd3fc;

}

.why-card h3{

font-size:1.3rem;

margin-bottom:10px;

color:white;

}

.why-card p{

line-height:1.8;

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

}

.faq-list{

display:grid;

gap:16px;

margin-top:44px;

max-width:940px;

margin-left:auto;

margin-right:auto;

}

.faq{

padding:20px 22px;

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

backdrop-filter:blur(16px);

border-radius:20px;

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

box-shadow:var(--shadow);

}

.faq summary{

cursor:pointer;

font-weight:700;

color:var(--primary);

list-style:none;

}

.faq summary::-webkit-details-marker{

display:none;

}

.faq[open] summary{

color:var(--secondary);

}

.faq-a{

margin-top:12px;

line-height:1.8;

color:var(--body);

}

.cta-section{

padding:80px 0 40px;

text-align:center;

}

.cta-section h2{

font-size:3rem;

line-height:1.1;

margin-bottom:18px;

}

.cta-sub{

max-width:680px;

margin:0 auto 32px;

font-size:1.04rem;

line-height:1.8;

color:var(--body);

}

.cta-actions{

display:flex;

justify-content:center;

gap:16px;

flex-wrap:wrap;

}

.btn-amber,
.btn-ghost-w{
	display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 22px;

border-radius:999px;

font-weight:700;

transition:.3s ease;

}

.btn-amber{

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

color:white;

box-shadow:0 20px 45px rgba(13,148,136,.24);

}

.btn-ghost-w{

color:white;

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

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

}

.footer-grid.footer-grid-5{

display:grid;

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

gap:36px;

align-items:start;

}

.footer-brand{

max-width:320px;

}

.footer-brand p{

line-height:1.9;

color:#CBD5E1;

}

.footer-social{

display:flex;

gap:12px;

margin-top:18px;

}

.footer-social a{
	display:inline-flex;

align-items:center;

justify-content:center;

width:42px;

height:42px;

border-radius:50%;

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

color:white;

transition:.3s;

}

.footer-social a:hover{

background:rgba(13,148,136,.24);

}

.footer-col h4{

font-size:1.05rem;

margin-bottom:18px;

color:white;

}

.footer-col ul{

list-style:none;

padding:0;

margin:0;

display:flex;

flex-direction:column;

gap:10px;

}

.footer-col ul li,
.footer-col ul li a{

color:#CBD5E1;

font-size:.95rem;

line-height:1.7;

}

.footer-col ul li a:hover{

color:var(--accent);

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:16px;

padding-top:24px;

margin-top:34px;

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

color:#CBD5E1;

font-size:.95rem;

}

.footer-tagline{

color:var(--accent);

font-weight:600;

}

.member-photo{

min-height:220px;

border-radius:24px;

background:

linear-gradient(135deg, rgba(13,148,136,.16), rgba(59,130,246,.16));

border:1px solid rgba(13,148,136,.18);

display:flex;

align-items:center;

justify-content:center;

color:var(--secondary);

font-weight:600;

letter-spacing:.08em;

text-transform:uppercase;

font-size:.92rem;

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

}

.member-info{

display:flex;

flex-direction:column;

gap:6px;

}

.member-name{

margin:0;

font-size:1.55rem;

}

.member-role{

margin:0;

font-weight:700;

color:var(--secondary);

}

.member-bio{

margin:0;

color:var(--body);

}

/*====================================================
                INDUSTRIES
======================================================*/

.industries{

padding:120px 0;

position:relative;

}

.industry-grid{

display:grid;

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

gap:28px;

margin-top:60px;

}

.industry-card{

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

backdrop-filter:blur(18px);

padding:40px 30px;

border-radius:28px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s ease;

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

}

.industry-card:hover{

transform:translateY(-10px);

box-shadow:

0 35px 80px rgba(13,148,136,.18);

}

.industry-card i{

font-size:3rem;

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

background-clip:text;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:25px;

}

.industry-card h3{

font-size:2rem;

margin-bottom:15px;

}

.industry-card p{

font-size:.96rem;

line-height:1.8;

}

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

.why-us{

padding:120px 0;

background:linear-gradient(135deg, rgba(2,22,48,.96), rgba(8,35,72,.96));

color:white;

}

.why-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.why-grid h2{

font-size:3.5rem;

margin-bottom:25px;

color:white;

}

.why-grid>div:first-child p{

font-size:1.05rem;

line-height:1.9;

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

}

.why-list{

display:flex;

flex-direction:column;

gap:24px;

}

.why-item{

display:flex;

gap:22px;

padding:25px;

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


border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

}

.why-item:hover{

transform:translateX(10px);

}

.why-item i{

width:60px;

height:60px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

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

color:white;

font-size:1.3rem;

flex-shrink:0;

}

.why-item h4{

font-size:1.5rem;

margin-bottom:10px;

}

/*====================================================
                TIMELINE
======================================================*/

.process{

padding:130px 0;

}

.timeline{

display:grid;

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

gap:30px;

margin-top:70px;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

top:38px;

left:8%;

width:84%;

height:4px;

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

z-index:0;

}

.timeline-item{

position:relative;

background:white;

padding:35px;

border-radius:26px;

box-shadow:var(--shadow);

z-index:2;

transition:.35s;

}

.timeline-item:hover{

transform:translateY(-10px);

}

.timeline-item span{

display:flex;

align-items:center;

justify-content:center;

width:70px;

height:70px;

margin:0 auto 25px;

border-radius:50%;

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

color:white;

font-size:1.6rem;

font-weight:700;

}

.timeline-item h3{

text-align:center;

margin-bottom:15px;

font-size:2rem;

}

.timeline-item p{

text-align:center;

}

/*====================================================
                STATS
======================================================*/

.stats{

padding:100px 0;

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

color:white;

border-radius:40px;

margin:80px auto;

width:min(1200px,92%);

}

.stats-grid{

display:grid;

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

gap:30px;

text-align:center;

}

.stat-box h2{

font-size:4rem;

color:var(--accent);

margin-bottom:12px;

}

.stat-box p{

color:#dbeafe;

font-size:1rem;

}

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

.cta{

padding:140px 0;

}

.cta-box{

background:

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

padding:80px;

border-radius:40px;

text-align:center;

color:white;

position:relative;

overflow:hidden;

box-shadow:

0 35px 80px rgba(15,42,74,.25);

}

.cta-box::before{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:

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

top:-180px;

right:-120px;

}

.cta-box span{

display:inline-block;

padding:10px 20px;

border-radius:50px;

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

margin-bottom:25px;

font-size:.85rem;

letter-spacing:.08em;

text-transform:uppercase;

}

.cta-box h2{

font-size:3.8rem;

margin-bottom:25px;

color:white;

}

.cta-box p{

color:#E2E8F0;

max-width:700px;

margin:0 auto 40px;

font-size:1.08rem;

line-height:1.9;

}

.cta .btn-primary{

background:white;

color:var(--primary);

box-shadow:none;

}

.cta .btn-primary:hover{

background:var(--accent);

transform:translateY(-6px);

}

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

.footer{

padding:90px 0 30px;

background:#081A2F;

color:#fff;

margin-top:100px;

}

.footer-grid{

display:grid;

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

gap:60px;

}

.footer-logo{

font-family:'Cormorant Garamond',serif;

font-size:2rem;

font-weight:700;

color:#fff;

display:inline-block;

margin-bottom:20px;

}

.footer-logo span{

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

background-clip:text;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.footer p{

color:#CBD5E1;

line-height:1.9;

}

.footer-column h3{

font-size:1.4rem;

margin-bottom:20px;

color:#fff;

}

.footer-column ul{

list-style:none;

}

.footer-column ul li{

margin-bottom:14px;

color:#CBD5E1;

}

.footer-column ul li a{

color:#CBD5E1;

transition:.3s;

}

.footer-column ul li a:hover{

color:var(--accent);

}

.contact-list li{

display:flex;

align-items:center;

gap:12px;

}

.contact-list i{

color:var(--accent);

}

.social-links{

display:flex;

gap:15px;

margin-top:25px;

}

.social-links a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

color:#fff;

transition:.35s;

}

.social-links a:hover{

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

transform:translateY(-5px);

}

.footer-bottom{

margin-top:70px;

padding-top:25px;

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

text-align:center;

color:#94A3B8;

}

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

#backToTop{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

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

color:#fff;

font-size:1.2rem;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 15px 40px rgba(13,148,136,.35);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

#backToTop.show{

opacity:1;

visibility:visible;

}

/*====================================================
                CURSOR GLOW
======================================================*/

.cursor-glow{

position:fixed;

width:220px;

height:220px;

border-radius:50%;

background:radial-gradient(circle,
rgba(94,234,212,.22),
transparent 70%);

pointer-events:none;

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

filter:blur(30px);

z-index:-1;

}

/*====================================================
                ANIMATIONS
======================================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes pulse{

0%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(13,148,136,.5);

}

70%{

transform:scale(1.15);

box-shadow:0 0 0 18px rgba(13,148,136,0);

}

100%{

transform:scale(1);

}

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

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

@media(max-width:1100px){

.hero-container,

.about-grid,

.why-grid{

grid-template-columns:1fr;

gap:60px;

}

.services-grid{

grid-template-columns:1fr;

}

.industry-grid{

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

}

.timeline{

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

}

.timeline::before{

display:none;

}

.stats-grid{

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

}

.footer-grid{

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

}

}

@media(max-width:768px){

.header{

top:10px;

}

.navbar{

width:min(1200px,96%);

padding:14px 16px;

}

.logo{

font-size:1.4rem;

}

.menu-toggle{

display:block;

z-index:1001;

}

.nav-links{

position:absolute;

top:84px;

left:3%;

width:94%;

padding:20px;

display:flex;

flex-direction:column;

gap:18px;

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

backdrop-filter:blur(20px);

border-radius:20px;

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

opacity:0;

visibility:hidden;

transform:translateY(-20px);

transition:.4s;

}

.nav-links.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.has-dropdown .dropdown-menu{

position:static;

margin-top:8px;

box-shadow:none;

border:1px solid rgba(15,42,74,.06);

opacity:1;

visibility:visible;

transform:none;

display:none;

}

.has-dropdown.open .dropdown-menu{

display:flex;

}

.nav-btn{

display:none;

}

.hero{

min-height:auto;

padding-top:130px;

padding-bottom:70px;

text-align:center;

}

.hero-container,

.about-grid,

.why-grid{

grid-template-columns:1fr;

gap:35px;

}

.hero-container{

width:min(1200px,96%);

}

.hero h1{

font-size:clamp(2.2rem, 8vw, 3rem);

line-height:1.05;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

justify-content:center;

flex-direction:column;

width:100%;

}

.hero-buttons a{

width:100%;

justify-content:center;

}

.hero-card{

padding:24px;

}

.services-grid,

.industry-grid,

.timeline,

.stats-grid,

.footer-grid{

grid-template-columns:1fr;

}

body{

overflow-x:hidden;

}

img,
svg,
video{

max-width:100%;

height:auto;

}

.bg-one{

        width:300px;

        height:300px;

        top:-120px;

        right:-30px;

    }

    .bg-two{

        width:260px;

        height:260px;

        left:-70px;

        bottom:-70px;

    }

}

@media(max-width:480px){

.hero h1{

    font-size:clamp(2rem, 8vw, 2.5rem);

}

.hero p{

    font-size:.95rem;

    line-height:1.7;

}

.hero-buttons{

    gap:12px;

}

.btn-primary,
.btn-secondary{

    width:100%;

    padding:15px 20px;

}

    .bg-one{

        width:320px;

        height:320px;

        top:-125px;

        right:-70px;

    }

    .bg-two{

        width:280px;

        height:280px;

        left:-80px;

        bottom:-80px;

    }

}

.location-card{
    grid-column: 1 / -1;
    justify-self: center;
    width: 48%;
}

/* ===== APPLY FORM — MOBILE RESPONSIVENESS ===== */

/* Tablets and small laptops */
@media(max-width:900px){
  #apply-form-section .container{
    width:94%;
  }
  .glass-card{
    padding:36px 28px;
  }
}

/* Mobile phones */
@media(max-width:768px){
  .hero{
    padding-top:130px;
    padding-bottom:40px;
  }
  .hero h1{
    font-size:clamp(2.1rem,8vw,2.8rem);
  }
  .hero p{
    font-size:1rem;
    padding:0 10px;
  }
  .glass-card{
    padding:26px 20px;
    border-radius:22px;
  }
  .glass-top{
    font-size:.85rem;
    margin-bottom:20px;
  }
  .apply-form .form-row.two,
  .apply-form .form-row.three{
    grid-template-columns:1fr;
    gap:0;
  }
  .apply-form .form-group{
    margin-bottom:18px;
  }
  .form-group label{
    font-size:.7rem;
  }
  .form-group input,
  .form-group select,
  .form-group textarea{
    padding:13px 14px;
    font-size:.92rem;
  }
  .phone-row{
    flex-wrap:wrap;
  }
  .phone-row select{
    min-width:100px;
  }
  .checkbox-row{
    font-size:.85rem;
    gap:10px;
  }
  .form-submit{
    padding:15px 18px;
    font-size:.9rem;
  }
}

/* Very small phones */
@media(max-width:400px){
  .glass-card{
    padding:20px 16px;
  }
  .phone-row{
    flex-direction:column;
  }
  .phone-row select,
  .phone-row input{
    width:100%;
  }
  .prefix{
    width:100%;
    justify-content:flex-start;
    padding:12px 16px;
    margin-bottom:6px;
  }
}

.apply-container{
    width:min(1400px,94%);
    margin:auto;
}

.form-row.one{

display:grid;

grid-template-columns:1fr;

gap:24px;

}


.form-row{

display:grid;

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

gap:24px 28px;

width:100%;

}

@media(max-width:768px){

.form-row{

grid-template-columns:1fr;

}

.phone-row{

flex-direction:column;

}

.phone-row select{

width:100%;

}

.phone-row input{

width:100%;

}

}

textarea{

min-height:140px;

resize:vertical;

}

.phone-row{

display:flex;

align-items:center;

gap:12px;

}


.phone-row.salary{

display:flex;

align-items:center;

gap:12px;

}
.prefix{

width:28px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

flex-shrink:0;

}

.phone-row.salary input{

flex:1;

}


.glass-card{

padding:45px;

border-radius:18px;

max-width:100%;

}