@charset "utf-8";
/* CSS Document */

/* ---------------------------------------------------
BRAND VARIABLES
--------------------------------------------------- */

:root{

--brand-primary:#1463A3;
--brand-primary-dark:#0F4F82;

--brand-accent:#19A463;

--brand-white:#ffffff;
--brand-text:#1f2937;

}


/* ---------------------------------------------------
SECTION SYSTEM
--------------------------------------------------- */

section{

padding:90px 0;

}

.section-alt{

background:#f7f9fc;

}

.section-header{

margin-bottom:60px;

}

.section-divider{

width:100%;
height:80px;

background:linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(0,0,0,.03)
);

margin-top:60px;

}

/* ---------------------------------------------------
BUTTON SYSTEM
--------------------------------------------------- */

.btn-call{

background:var(--brand-primary);
color:white;

border-radius:10px;

padding:14px 28px;

font-weight:600;

box-shadow:0 10px 25px rgba(0,0,0,.15);

transition:.25s;

}

.btn-call:hover{

background:var(--brand-primary-dark);

transform:translateY(-2px);

}

.btn-text{

background:var(--brand-accent);
color:white;

border-radius:10px;

padding:14px 28px;

font-weight:600;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.btn-text:hover{

transform:translateY(-2px);

}

/* ---------------------------------------------------
SITE NAVBAR
--------------------------------------------------- */

.site-navbar{

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

z-index:1000;

background:rgba(15,23,42,.75);
backdrop-filter:blur(10px);

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

padding:18px 0;

transition:all .35s ease;

}

/* ---------------------------------------------------
LOGO
--------------------------------------------------- */

.site-logo{

max-height:60px;
width:auto;
transition:transform .25s ease;

}

.site-logo:hover{

transform:scale(1.05);

}

.brand-text{

font-weight:700;
font-size:22px;
color:white;

}

.site-navbar.scrolled .site-logo{

max-height:48px;

}

/* ---------------------------------------------------
NAV LINKS
--------------------------------------------------- */

.navbar-nav .nav-link{

color:#e5e7eb;
margin-left:24px;
font-weight:500;
font-size:15px;

transition:color .2s ease;

}

.navbar-nav .nav-link:hover{

color:white;

}

/* ---------------------------------------------------
NAV CTA BUTTON
--------------------------------------------------- */

.btn-call{

background:var(--brand-primary);
color:white;

padding:10px 18px;
border-radius:8px;

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

transition:all .2s ease;

}

.btn-call:hover{

transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,.25);

color:white;

}

/* ---------------------------------------------------
STICKY NAVBAR
--------------------------------------------------- */

.site-navbar{

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

z-index:1000;

background:rgba(15,23,42,.65);
backdrop-filter:blur(10px);

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

padding:18px 0;

transition:all .35s ease;

}

/* Navbar after scroll */

.site-navbar.scrolled{

background:rgba(15,23,42,.95);

padding:10px 0;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}

/* ---------------------------------------------------
HERO PREMIUM LAYOUT
--------------------------------------------------- */

.hero{

position:relative;
background:url('/assets/img/hero.webp') center/cover no-repeat;
/*background:url('https://dkialpha.com/alpha_img/junk/1920/junk-042.webp') center/cover no-repeat;*/

min-height:700px;

display:flex;
align-items:center;

color:white;
padding-top:140px;
}

.hero{
animation:heroZoom 20s ease infinite alternate;
}

@keyframes heroZoom{
from{
background-size:100%;
}
to{
background-size:110%;
}
}

.hero-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
to right,
rgba(0,0,0,.75) 0%,
rgba(0,0,0,.55) 35%,
rgba(0,0,0,.35) 60%,
rgba(0,0,0,.2) 100%
);
}

.hero-container{

position:relative;
z-index:2;


}

.hero-left{

max-width:540px;

}

.hero-title{

font-size:64px;
font-weight:800;

line-height:1.1;

margin-bottom:20px;

text-shadow:0 10px 30px rgba(0,0,0,.5);

}

.hero-subtitle{

font-size:22px;

opacity:.95;

margin-bottom:30px;

}

.hero-buttons{

margin-bottom:20px;

}

.hero-right{

text-align:center;

}

.hero-image{

max-width:520px;
width:100%;

filter:drop-shadow(0 25px 40px rgba(0,0,0,.4));

}

.hero-trust{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-top:15px;

font-size:16px;

}

.hero-trust i{

color:#FFD700;

}

/* ---------------------------------------------------
HERO WAVE DIVIDER
--------------------------------------------------- */

.hero-wave{
position:absolute;
bottom:0;
left:0;
width:100%;
line-height:0;
z-index:2;
}

.hero-wave svg{
display:block;
width:100%;
height:90px;
}

.hero-wave path{
fill:var(--brand-primary);
}

@media (max-width:992px){

.hero{

text-align:center;

}

.hero-left{

margin:auto;

}

.hero-right{

margin-top:40px;

}

.hero-title{

font-size:42px;

}

}

/* ---------------------------------------------------
QUICK CALL BAR
--------------------------------------------------- */

.quick-call-bar{

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

padding:40px 0;

}

.quick-call-text{

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

}

.quick-call-text span{

display:block;
font-size:18px;
font-weight:400;
margin-top:5px;

}

.quick-call-bar .btn{

margin:5px;

}

.btn-call{

background:#0d6efd;
color:white;

}

.btn-text{

background:#28c76f;
color:white;

}

/* ---------------------------------------------------
QUICK CALL TRUST ICONS
--------------------------------------------------- */

.quick-trust{

margin-top:12px;
font-size:15px;

display:flex;
justify-content:center;
flex-wrap:wrap;

gap:12px;

}

.quick-trust span{

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

}

.quick-trust i{

color:#FFD700;
font-size:16px;

}

.quick-trust .divider{

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

}


/* ---------------------------------------------------
SERVICE TOGGLE
--------------------------------------------------- */

.service-toggle-section{

padding:80px 0;
background:#f7f7f7;

}

.toggle-title{

font-size:36px;
font-weight:700;
margin-bottom:40px;

}

.toggle-buttons{

margin-bottom:40px;

}

.toggle-btn{

padding:14px 26px;
margin:5px;

border:none;
background:#e5e5e5;

font-weight:600;

cursor:pointer;

border-radius:8px;

}

.toggle-btn.active{

background:#1E90FF;
color:white;

}

.toggle-content{

max-width:1000px;
margin:auto;

}

.toggle-panel{

display:none;

}

.toggle-panel.active{

display:block;

}

.btn-call{

background:#1E90FF;
color:white;
margin-right:10px;

}

.btn-text{

background:#28c76f;
color:white;

}


/* ---------------------------------------------------
SERVICES
--------------------------------------------------- */

.services-section{

padding:80px 0;

}

.section-header h2{

font-size:40px;
font-weight:700;
margin-bottom:10px;

}

.section-header p{

font-size:18px;
max-width:600px;
margin:auto;
margin-bottom:50px;

}

.service-card{

background:white;
padding:35px;

border-radius:12px;

text-align:center;

box-shadow:0 6px 18px rgba(0,0,0,.08);

transition:.25s;

height:100%;

}

.service-card{

background:white;
padding:35px;

border-radius:14px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

transition:all .3s ease;

}

.service-card:hover{

transform:translateY(-10px);

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

}

.service-card i{

font-size:26px;

background:var(--brand-primary);
color:white;

width:60px;
height:60px;

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

border-radius:50%;

margin:auto;
margin-bottom:15px;

}

.service-card h4{

font-weight:700;
margin-bottom:10px;

}

.service-card p{

font-size:15px;
opacity:.8;

}

.services-cta{

margin-top:40px;

}


/* ---------------------------------------------------
STEPS SECTION
--------------------------------------------------- */

.steps-section{

padding:90px 0;

}

.step-card{

background:white;

padding:40px 30px;

border-radius:14px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

transition:.3s;

position:relative;

height:100%;

}

.step-card:hover{

transform:translateY(-8px);

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

}

.step-number{

position:absolute;

top:-15px;
left:50%;

transform:translateX(-50%);

background:var(--brand-primary);
color:white;

width:40px;
height:40px;

border-radius:50%;

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

font-weight:700;

}

.step-card i{

font-size:38px;

color:#1E90FF;

margin-bottom:15px;

margin-top:10px;

}

.step-card h4{

font-weight:700;

margin-bottom:10px;

}

.steps-cta{

margin-top:50px;

}


/* ---------------------------------------------------
MOBILE CALL BAR
--------------------------------------------------- */

.mobile-call-bar{

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

display:flex;

box-shadow:0 -4px 12px rgba(0,0,0,.25);

z-index:9999;

}

.mobile-call-bar a{

flex:1;
text-align:center;
padding:16px;

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

text-decoration:none;
color:white;

transition:.2s;

}

.mobile-call-bar a:active{

transform:scale(.96);

}

.mobile-call-btn{

background:#1E90FF;

}

.mobile-text-btn{

background:#28c76f;

}

/* ---------------------------------------------------
FOOTER
--------------------------------------------------- */

.site-footer{

background:#111;
color:white;
padding:60px 0 30px;

}

.site-footer h5{

margin-bottom:20px;
font-weight:700;

}

.footer-links{

list-style:none;
padding:0;

}

.footer-links li{

margin-bottom:10px;

}

.footer-links a{

color:#ccc;
text-decoration:none;

}

.footer-links a:hover{

color:white;

}

.footer-bottom{

text-align:center;
font-size:14px;
opacity:.7;

}

/* prevent content being hidden behind bar */

@media (max-width:768px){

body{
padding-bottom:70px;
}

}