/* =====================================
EKEDTRONICS GLOBAL VARIABLES
===================================== */

:root{

/* BRAND COLORS */
--primary:#1A8371;
--primary-dark:#14695a;

--accent:#F56921;
--accent-soft:#FFE6D8;

--muted:#8A8A8A;

--bg:#ffffff;
--surface:#ffffff;
--card:#f8fafb;

--glass: rgba(255,255,255,0.6);

--success:#1ea07a;
--danger:#e85a4f;

--heading-font:'Inter',system-ui;
--body-font:'Inter',system-ui;

--shadow:0 8px 24px rgba(2,6,23,0.06);
--radius:12px;
--max-width:1200px;
--container-gap:1rem;

--transition:240ms cubic-bezier(.2,.9,.3,1);

}

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

html,body{
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
}

body{
background:var(--bg);
color:#222;
}

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

#navbar{
background:rgba(255,255,255,0.98);
backdrop-filter:blur(6px);
box-shadow:0 6px 20px rgba(11,122,117,0.06);
}

.navbar{
border-bottom:3px solid var(--accent);
}

.navbar-brand img{
height:70px;
width:auto;
transition:0.3s;
}

.navbar-brand img:hover{
transform:scale(1.05);
}

.nav-link{
color:var(--muted);
font-weight:500;
}

.nav-link:hover{
color:var(--primary);
}

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

.hero{
padding-top:50px;
background:linear-gradient(120deg,#eef8f6,#fff7f2);
}

.hero .display-5{
color:var(--primary);
}

.highlight{
color:var(--accent);
}

/* =====================================
BUTTONS
===================================== */

.btn-cta{
background:var(--accent);
color:#fff;
border:none;
}

.btn-cta:hover{
background:#d95512;
}

.btn-primary{
background:var(--accent);
border:none;
}

.btn-primary:hover{
background:#d95512;
}

.btn-outline-primary{
border-color:var(--primary);
color:var(--primary);
}

.btn-outline-primary:hover{
background:var(--primary);
color:#fff;
}

/* =====================================
HEADINGS
===================================== */

h1,h2,h3{
color:var(--primary);
}

/* =====================================
CARDS
===================================== */

.card h4,
.card h5{
color:var(--primary);
}

/* =====================================
CAROUSEL
===================================== */

.carousel-item img{
object-fit:cover;
height:420px;
}

.hero-img{
max-height:420px;
object-fit:cover;
width:100%;
}

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

.about h1{
font-weight:700;
}

.about h1 span{
color:var(--primary);
}

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

.brands .brand-card{
display:flex;
justify-content:center;
align-items:center;
padding:1rem;
}

.brands img{
max-height:60px;
opacity:0.95;
}

/* =====================================
WHY US / PROCESS
===================================== */

.why-us .card{
border:none;
border-radius:14px;
padding:1.25rem;
box-shadow:0 6px 20px rgba(16,24,40,0.06);
}

.why-us h3{
color:var(--primary);
}

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

.testimonials .card{
border-radius:12px;
}

/* =====================================
BANNER CAROUSEL
===================================== */

#banner{
padding-top:56px;
padding-bottom:28px;
}

.carousel-inner{
border-radius:.75rem;
position:relative;
}

/* overlay */

.hero-gradient{
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(
120deg,
rgba(11,122,117,0.18) 0%,
rgba(246,168,0,0.06) 70%
);
mix-blend-mode:multiply;
border-radius:.75rem;
}

/* caption */

.caption-wrap{
max-width:720px;
left:2rem;
bottom:3.5rem;
text-shadow:0 2px 10px rgba(0,0,0,0.35);
}

.carousel-caption h2,
.carousel-caption p{
color:#fff;
}

.carousel-caption p{
opacity:.95;
}

/* carousel indicators */

.carousel-indicators [data-bs-target]{
width:10px;
height:10px;
border-radius:50%;
background-color:rgba(255,255,255,0.55);
border:none;
transition:transform .2s ease,background-color .2s ease;
margin:0 .25rem;
}

.carousel-indicators .active{
transform:scale(1.25);
background-color:rgba(255,255,255,0.95);
}

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

footer{
background:#0b1720;
color:#e9f6f4;
padding:40px 0;
}

footer h2{
color:#fff;
}

footer p{
color:#d7f0ec;
}

.footer-copy-rights{
background:#071118;
color:#9fbeb9;
padding:12px 0;
text-align:center;
}

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

@media (max-width:768px){

.carousel-item img{
height:220px;
}

.hero{
padding-top:80px;
}

.hero-img{
max-height:260px;
}

}

@media (max-width:767.98px){

.carousel-caption{
position:absolute;
left:12px;
right:12px;
bottom:12px;
text-align:left;
}

.caption-wrap{
max-width:none;
left:12px;
bottom:12px;
}

.carousel-caption h2{
font-size:1.125rem;
}

.carousel-caption p{
font-size:.95rem;
}

.btn-cta{
padding:.45rem .9rem;
font-size:.95rem;
}

}