/* =========================================================
DRXE HOME PAGE BASE
========================================================= */

.drxe-home{

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

background:
linear-gradient(
rgba(245,241,233,0.88),
rgba(245,241,233,0.88)
),
url('../../assets/images/home/cat-protein.jpg');

background-size:cover;
background-position:center bottom;
background-repeat:no-repeat;

color:#111;

min-height:100vh;
}

/* Global container */

.container{
max-width:1400px;
margin:auto;
padding:0 40px;
}

/* =========================================
GLOBAL SECTION SPACING
========================================= */

.drxe-home section{

padding:80px 0;

position:relative;

box-shadow:0 1px 0 rgba(0,0,0,0.02);

}

/* SECTION SURFACE */

.drxe-home section:nth-child(even){

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

backdrop-filter:blur(3px);

border-top:1px solid rgba(0,0,0,0.04);
border-bottom:1px solid rgba(0,0,0,0.04);

}

/* =========================================
SECTION TITLES
========================================= */

.section-title{

text-align:center;

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

margin-bottom:48px;

color:#2f2f2f;

}

.section-title span{

color:#A82AAE;

position:relative;

}

/* underline accent */

.section-title span::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:100%;
height:3px;

background:#A82AAE;

border-radius:2px;

}

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

.drxe-hero{
position:relative;
padding-top: 80px;
padding:80px 0;
overflow:hidden;

}


/* Background */

.hero-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background-image:url('../../assets/images/home/hero-bg.jpg');
background-size:cover;
background-position:center;

z-index:1;
}


/* Dark gradient overlay */

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
90deg,
rgba(0,0,0,0.55) 0%,
rgba(0,0,0,0.40) 35%,
rgba(0,0,0,0.18) 65%,
rgba(0,0,0,0.02) 100%
);

z-index:2;
}


/* Grid Layout */

.hero-grid{

position:relative;
z-index:3;

display:grid;

grid-template-columns:1.35fr 1fr;

gap:80px;

align-items:center;

max-width:1400px;

margin:auto;

padding:0 40px;

}


/* Tagline */

.hero-tagline{

font-size:22px;

font-weight:600;

color:#FFD36B;

margin-bottom:18px;

text-shadow:0 2px 8px rgba(0,0,0,.6);

}


/* Main Headline */

.hero-left h1{

font-size:68px;

font-weight:700;

line-height:1.05;

letter-spacing:-1px;

max-width:700px;

color:white;

margin-bottom:34px;

}


/* CTA Buttons */

.hero-cta{

display:flex;

gap:18px;

margin-bottom:40px;

}

.btn-primary{

background:#A82AAE;

color:white;

padding:15px 32px;

border-radius:8px;

text-decoration:none;

font-weight:700;

letter-spacing:1px;

transition:.25s;

}

.btn-primary:hover{

background:#541357;

transform:translateY(-2px);

}

.btn-secondary{

border:1px solid white;

padding:15px 32px;

border-radius:8px;

color:white;

font-weight:700;

letter-spacing:1px;

text-decoration:none;

transition:.25s;

}

.btn-secondary:hover{

background:#541357;

border-color:#541357;

transform:translateY(-2px);

}


/* Metrics */

.hero-metrics{

display:flex;

gap:70px;

margin-top:10px;

}

.metric strong{

display:block;

font-size:44px;

font-weight:800;

line-height:1;

color:white;

}

.metric span{

font-size:14px;

letter-spacing:.6px;

color:#E2E2E2;

margin-top:4px;

display:block;

}


/* RIGHT PANEL */

.hero-right{

display:flex;

justify-content:center;

align-items:center;

}


/* Trust Panel */

.trust-panel{

background:#efe3d2;

background-image:url('../../assets/images/home/trust-bg.jpg');

background-size:cover;

background-blend-mode:multiply;

padding:30px;

border-radius:18px;

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

box-shadow:0 30px 70px rgba(0,0,0,.35);

transform:translateX(40px) scale(1.05);

}


/* Trust Cards */


.trust-card{

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

border-radius:14px;

padding:20px 26px;

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

min-height:90px;

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

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

color:#3a2f2a;

/* animation base */

transition:all .35s ease;

transform:translateY(0) scale(1);

}


/* TRUST CARD HOVER */

.trust-card:hover{

transform:translateY(-6px) scale(1.04);

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

/* light warm highlight */

background:linear-gradient(
135deg,
rgba(255,255,255,1) 0%,
rgba(255,248,238,1) 100%
);

}


/* Logo */

.trust-card img{

height:46px;
width:auto;

transition:transform .35s ease;

}

.trust-card:hover img{

transform:scale(1.1);

}


/* Text */

.trust-card p{

margin:0;
line-height:1.35;

transition:transform .3s ease;

}

.trust-card:hover p{

transform:translateX(2px);

}
/* TRUST WRAPPER */

.trust-wrapper{
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
width:100%;
}


/* SUPPLY INFO BELOW TRUST PANEL */


/* SUPPLY INFO */

.supply-info{

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

margin-top:12px;

width:100%;

padding:12px 18px;

border-radius:10px;

background:rgba(168,42,174,0.22);
border:1px solid rgba(168,42,174,0.45);

backdrop-filter:blur(6px);

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

color:white;

/* match trust panel position */
transform:translateX(40px);

}

.supply-info span{

flex:1;
text-align:center;

border-right:1px solid rgba(255,255,255,0.25);

padding:4px 10px;

}

.supply-info span:last-child{
border:none;
}

/* -------------------------------
   TRUST STRIP 
---------------------------------*/

/* TRUST STRIP */

.drxe-truststrip{

padding:10px 0;

margin-top:-30px;   /* pulls strip closer to hero */

border-top:1px solid rgba(0,0,0,0.06);
border-bottom:1px solid rgba(0,0,0,0.06);

overflow:hidden;

position:relative;

z-index:5;

box-shadow:0 -6px 20px rgba(0,0,0,0.08);

}


/* Title */

.truststrip-title{

text-align:center;

font-size:22px;

font-weight:600;

margin-bottom:16px;

color:#333;

}


/* Wrapper */

.truststrip-wrapper{

overflow:hidden;

position:relative;

}


/* Track */

.truststrip-track{

display:flex;

align-items:center;

gap:100px;

width:max-content;

animation:trustTicker 40s linear infinite;

}


/* Logos */

.truststrip-track img{

height:72px;

opacity:.9;

filter:grayscale(65%);

transition:.3s ease;

}

.truststrip-track img:hover{

opacity:1;

filter:grayscale(0%);

transform:scale(1.08);

}

.drxe-truststrip:hover .truststrip-track{
animation-play-state:paused;
}


/* Animation */

@keyframes trustTicker{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* =========================================================
CATEGORY SECTION
========================================================= */

.drxe-categories{

padding:80px 0;

/*background:transparent;*/

}

.category-title{
text-align:center;
font-size:36px;
font-weight:700;
margin-bottom:60px;
color:#2f2f2f;
}


/* SLIDER WRAPPER */

.category-wrapper{
display:flex;
align-items:center;
gap:20px;
}


/* ARROWS */

.cat-arrow{

width:44px;
height:44px;

border-radius:50%;
border:none;

background:#A82AAE;
color:white;

font-size:24px;

cursor:pointer;

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

transition:all .2s ease;

}

.cat-arrow:hover{
background:#8f2295;
}


/* SLIDER CONTAINER */

.category-slider{
overflow:hidden;
flex:1;
}


/* SLIDER TRACK */

.category-track{
display:flex;
gap:30px;
transition:transform .4s ease;
}


/* CATEGORY CARD  */

.category-card{

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

backdrop-filter:blur(6px);

flex:0 0 calc((100% - 60px) / 3);

height:240px;

border-radius:16px;

overflow:hidden;

position:relative;

cursor:pointer;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:all .35s ease;

}

.category-card:hover{
transform:translateY(-6px);
box-shadow:0 25px 50px rgba(0,0,0,.15);
}


/* IMAGE  */

.category-card img{

width:100%;
height:100%;

object-fit:cover;

transition:transform .5s ease;

}

.category-card:hover img{
transform:scale(1.05);
}


/* TEXT BLOCK */

.category-content{

position:absolute;

top:50%;
transform:translateY(-50%);

max-width:220px;

}


/* TEXT LEFT */

.category-left .category-content{
left:40px;
text-align:left;
}


/* TEXT RIGHT */

.category-right .category-content{
right:40px;
text-align:right;
}


/* CATEGORY TITLE */

.category-content h3{

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

color:white;

margin-bottom:14px;

text-shadow:0 2px 10px rgba(0,0,0,.45);

}


/* CTA BUTTON  */

.category-btn{

display:inline-block;

background:#A82AAE;

color:white;

font-size:15px;

padding:10px 20px;

border-radius:8px;

text-decoration:none;

font-weight:600;

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

transition:all .2s ease;

}

.category-btn:hover{
background:#8f2295;
}
/* =========================================================
TESTIMONIALS SECTION
========================================================= */

.drxe-testimonials{

padding:80px 0;

}

.testimonial-grid{

display:grid;

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

gap:40px;

margin-top:50px;

}

.testimonial-card{

display:block;

background:#fff;

padding:30px;

border-radius:8px;

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

transition:all .25s ease;

}

.testimonial-card:hover{

transform:translateY(-4px);

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

}

.avatar{

width:40px;
height:40px;

border-radius:50%;

background:#eee;

margin-bottom:15px;

}

.testimonial-card p{

font-size:15px;

line-height:1.6;

margin-bottom:15px;

}

.testimonial-card strong{

display:block;

font-weight:600;

}

.testimonial-card span{

font-size:13px;

color:#777;

}

.testimonials-cta{

display:block;

text-align:center;

margin-top:50px;

font-weight:600;

color:#A82AAE;

}

.testimonials-cta:hover{

text-decoration:underline;

}


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

@media(max-width:1024px){

.hero-grid{
grid-template-columns:1fr;
gap:60px;
}

.hero-left h1{
font-size:46px;
}

.hero-metrics{
gap:40px;
}

.trust-panel{
transform:scale(1);
}

.category-grid{
grid-template-columns:1fr 1fr;
}

.customer-grid{
grid-template-columns:1fr;
}

.testimonial-grid{
grid-template-columns:1fr;
}

}

/* =========================================================
TABLET
========================================================= */

@media (max-width:1024px){

.container{
padding:0 30px;
}

/* HERO */

.hero-grid{
grid-template-columns:1fr;
gap:60px;
text-align:center;
}

.hero-left h1{
font-size:52px;
margin:auto;
}

.hero-cta{
justify-content:center;
}

.hero-metrics{
justify-content:center;
gap:40px;
}

.hero-right{
justify-content:center;
}

.trust-panel{
transform:none;
max-width:520px;
margin:auto;
}

/* SUPPLY BAR */

.supply-info{
transform:none;
margin:auto;
}

/* TRUST STRIP */

.truststrip-track{
gap:60px;
}

.truststrip-track img{
height:58px;
}

/* CATEGORY */

.category-card{
flex:0 0 calc((100% - 30px)/2);
height:230px;
}

.category-content h3{
font-size:22px;
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width:640px){

.container{
padding:0 20px;
}

/* HERO */

.drxe-hero{
padding:70px 0;
}

.hero-tagline{
font-size:18px;
}

.hero-left h1{
font-size:36px;
line-height:1.2;
}

.hero-cta{
flex-direction:column;
align-items:center;
gap:12px;
}

.btn-primary,
.btn-secondary{
width:220px;
text-align:center;
}

/* METRICS */

.hero-metrics{
flex-direction:column;
gap:20px;
align-items:center;
}

/* TRUST PANEL */

.trust-panel{
grid-template-columns:1fr;
padding:28px;
gap:14px;
}

/* SUPPLY BAR */

.supply-info{
flex-direction:column;
gap:6px;
font-size:13px;
}

.supply-info span{
border:none;
}

/* TRUST STRIP */

.truststrip-track{
gap:40px;
}

.truststrip-track img{
height:46px;
}

/* CATEGORY */

.category-wrapper{
gap:10px;
}

.category-card{
flex:0 0 85%;
height:220px;
}

.category-content{
max-width:180px;
}

.category-content h3{
font-size:20px;
}

.category-btn{
font-size:14px;
padding:8px 16px;
}

/* hide arrows on mobile */

.cat-arrow{
display:none;
}

.category-slider{
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
}

.category-track{
display:flex;
gap:16px;
}

}

/* =========================================================
WHY DRXE SECTION
========================================================= */

.drxe-differentiation{
padding:80px 0;
/*background:transparent;*/
}

/* title */

.diff-title{

text-align:center;

font-size:36px;

font-weight:700;

margin-bottom:60px;

color:#2f2f2f;

}

/* grid */

.diff-grid{

display:grid;

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

gap:30px;

}

/* card */

.diff-card{

background:#fafafa;

padding:42px 32px;

border-radius:14px;

text-align:center;

border:1px solid #eee;

transition:all .3s ease;

}

/* hover */

.diff-card:hover{

transform:translateY(-8px);

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

border-color:#ddd;

}

/* icon */

.diff-icon{

font-size:44px;

margin-bottom:20px;

}

/* title */

.diff-card h4{

font-size:22px;

font-weight:700;

margin-bottom:14px;

color:#222;

}

/* text */

.diff-card p{

font-size:18px;

line-height:1.65;

color:#4b4b4b;

}

/* =========================================================
WHY DRXE RESPONSIVE
========================================================= */

@media (max-width:1024px){

.diff-grid{

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

}

}

@media (max-width:640px){

.diff-grid{

grid-template-columns:1fr;

}

.diff-title{

font-size:28px;

}

}

/* ======================================================
HOW WE WORK
====================================================== */

.drxe-process{

padding:90px 0;

text-align:center;

}

/* image wrapper */

.process-image{

margin-top:50px;

display:flex;

justify-content:center;

}

/* image */

.process-image img{

width:100%;

max-width:1100px;

height:auto;

}

/* tablet */

@media (max-width:1024px){

.process-image img{

max-width:700px;

}

}

/* mobile */

@media (max-width:640px){

.process-image img{

max-width:100%;

}

}

/* ========================================================
INDUSTRIES WE SERVE
======================================================== */

.drxe-customers{

padding:90px 0;

text-align:center;

}


/* industry layout */

.industry-cloud{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:18px;

margin-top:50px;

}


/* industry item */

.industry-item{

padding:14px 24px;

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

border:1px solid rgba(0,0,0,.08);

border-radius:40px;

font-size:15px;

font-weight:600;

color:#333;

backdrop-filter:blur(4px);

transition:.25s;

}


/* hover */

.industry-item:hover{

background:#A82AAE;

color:white;

border-color:#A82AAE;

transform:translateY(-3px);

box-shadow:0 10px 22px rgba(0,0,0,.1);

}

@media (max-width:1024px){

.industry-item{

font-size:14px;

padding:12px 20px;

}

}

@media (max-width:1024px){

.industry-item{

font-size:14px;

padding:12px 20px;

}

}