/* =========================
   DIYOR LOGISTICS INC.
   MAIN STYLE
========================= */


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

color:#222;
background:#fff;

}



header{

height:90px;

background:#071b2c;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 8%;

position:sticky;

top:0;

z-index:1000;

}



.logo{

color:white;

font-size:28px;

font-weight:900;

}



.logo span{

display:block;

font-size:12px;

color:#1684ff;

letter-spacing:2px;

margin-top:5px;

}




/* MENU */


nav{

display:flex;

align-items:center;

gap:30px;

}



nav a{

color:white;

text-decoration:none;

transition:.3s;

position:relative;

}



nav a:hover{

color:#1684ff;

}



.nav-btn{

background:#1684ff;

padding:14px 25px;

border-radius:5px;

}



.nav-btn:hover{

background:white;

color:#071b2c!important;

}




.menu-toggle{

display:none;

color:white;

font-size:32px;

cursor:pointer;

}




/* HERO */


.hero{

height:90vh;


background:

linear-gradient(
rgba(2,12,28,.68),
rgba(2,12,28,.68)
),

url("images/truck.jpg");


background-size:cover;

background-position:center 58%;

display:flex;

align-items:center;

}



.hero-content{

color:white;

max-width:850px;

margin-left:8%;

}



.hero-badge{

display:inline-block;

background:#1684ff;

padding:10px 20px;

border-radius:30px;

margin-bottom:25px;

font-weight:bold;

}




.hero h1{

font-size:60px;

line-height:1.1;

margin-bottom:25px;

}



.hero p{

font-size:20px;

line-height:1.7;

margin-bottom:35px;

}





/* BUTTONS */


.btn{

display:inline-block;

background:#1684ff;

color:white;

padding:16px 35px;

border-radius:5px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}



.btn:hover{

transform:translateY(-5px);

}



.btn-outline{

background:transparent;

border:2px solid white;

margin-left:15px;

}




/* TRUST */


.trust{

display:flex;

justify-content:center;

gap:25px;

padding:40px 8%;

background:#f5f5f5;

flex-wrap:wrap;

}



.trust-box{

background:white;

padding:25px;

width:220px;

text-align:center;

border-radius:10px;

box-shadow:0 8px 20px rgba(0,0,0,.1);

}



.trust-box h3{

color:#071b2c;

margin-bottom:10px;

}



.trust-box p{

color:#1684ff;

font-weight:bold;

}




/* STATS */


.stats{

background:#1684ff;

display:flex;

justify-content:center;

gap:80px;

padding:50px;

text-align:center;

}



.stats h2{

font-size:45px;

color:white;

}



.stats p{

color:white;

font-size:18px;

}
/* =========================
   SECTIONS
========================= */


.section{

padding:80px 8%;

}



.section.dark{

background:#071b2c;

color:white;

}



.section-title{

text-align:center;

font-size:40px;

margin-bottom:50px;

color:#071b2c;

}



.dark .section-title{

color:white;

}



/* CARDS */


.cards{

display:grid;

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

gap:30px;

}



.card{

background:white;

padding:35px;

border-radius:12px;

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

transition:.3s;

}



.card:hover{

transform:translateY(-10px);

}



.card h3{

color:#071b2c;

margin-bottom:15px;

font-size:22px;

}



.card p{

line-height:1.7;

color:#555;

}



/* VEHICLES */


.vehicle-grid{

display:grid;

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

gap:20px;

}



.vehicle{

height:150px;

background:#071b2c;

color:white;

display:flex;

align-items:center;

justify-content:center;

border-radius:10px;

font-size:20px;

font-weight:bold;

transition:.3s;

}



.vehicle:hover{

background:#1684ff;

transform:scale(1.05);

}





/* SAFETY */


.safety{

max-width:900px;

margin:auto;

}



.safety-text h2{

font-size:40px;

margin-bottom:25px;

}



.safety-text p{

font-size:20px;

line-height:1.7;

}



.safety-list{

margin-top:30px;

}



.safety-list p{

background:white;

color:#071b2c;

padding:15px;

margin:10px 0;

border-radius:5px;

font-weight:bold;

}





/* REVIEWS */


.testimonials{

display:grid;

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

gap:30px;

}



.review{

background:white;

padding:30px;

border-radius:10px;

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

}



.stars{

color:#1684ff;

font-size:25px;

margin-bottom:15px;

}





/* FAQ */


.faq{

max-width:900px;

margin:auto;

}



.faq-item{

background:#f5f5f5;

padding:25px;

margin-bottom:20px;

border-radius:10px;

}



.faq-item h3{

color:#071b2c;

margin-bottom:10px;

}



.faq-item p{

color:#555;

line-height:1.6;

}





/* FOOTER */


footer{

background:#020d18;

color:white;

text-align:center;

padding:50px 8%;

}



footer h3{

font-size:28px;

margin-bottom:15px;

}



footer a{

color:#1684ff;

text-decoration:none;

}





/* ANIMATION */


.fade{

animation:fadeUp .8s ease;

}



@keyframes fadeUp{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}


}








/* MOBILE */


@media(max-width:900px){


header{

padding:0 5%;

}



.menu-toggle{

display:block;

}



nav{

display:none;

position:absolute;

top:90px;

left:0;

width:100%;

background:#071b2c;

flex-direction:column;

padding:30px;

}



nav.active{

display:flex;

}



.hero h1{

font-size:40px;

}



.hero-content{

margin-left:5%;

margin-right:5%;

}



.cards{

grid-template-columns:1fr;

}



.vehicle-grid{

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

}



.testimonials{

grid-template-columns:1fr;

}



.stats{

flex-direction:column;

gap:30px;

}



.section{

padding:60px 5%;

}



}

/* DIYOR LOGISTICS INC. refreshed blue palette */
.logo span { color: #59a8ff; }
.hero-badge { border-color: #1684ff; }
.btn, .nav-btn { background: #1684ff; }
a:hover { color: #1684ff; }

.sms-consent{display:flex;align-items:flex-start;gap:10px;margin:18px 0 10px;font-size:13px;line-height:1.55;color:#42516a}
.sms-consent input[type="checkbox"]{width:18px;height:18px;flex:0 0 18px;margin-top:3px;accent-color:#1684ff}
.sms-consent label{font-weight:400;cursor:pointer}
.form-note{font-size:12px;line-height:1.5;color:#65738a;margin:8px 0 16px}
.form-note a{color:#1684ff;text-decoration:underline}


/* Website creator credit */
.site-credit {
  margin: 18px 0 0;
  padding: 14px 10px 0;
  border-top: 1px solid rgba(255,255,255,.15);
  color: #aeb8c7;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}
.site-credit strong { color: #ffffff; font-weight: 600; }


/* Refined quote and contact forms */
.section:has(.quote-form) {
  background: #f3f7fb;
  padding-top: 76px;
  padding-bottom: 84px;
}
.section:has(.quote-form) .section-title {
  margin-bottom: 38px;
  color: #071b2c;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.7px;
}
.form-box.quote-form {
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: #fff;
  border: 1px solid #e1e9f2;
  border-radius: 20px;
  box-shadow: 0 18px 55px rgba(7, 27, 44, .09);
  color: #071b2c;
}
.form-intro { padding-bottom: 24px; border-bottom: 1px solid #e8eef5; }
.form-intro .eyebrow { display: inline-block; margin-bottom: 10px; color: #1684ff; font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.form-intro h3 { margin: 0 0 8px; color: #071b2c; font-size: clamp(22px, 2.4vw, 30px); }
.form-intro p { margin: 0; color: #66758a; font-size: 15px; line-height: 1.65; }
.form-group { display: flex; flex-direction: column; gap: 18px; }
.form-heading { display: flex; align-items: center; gap: 12px; margin: 0; color: #071b2c; font-size: 18px; font-weight: 750; }
.step-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; color: #0878ec; background: #eaf4ff; font-size: 12px; letter-spacing: .5px; }
.form-grid { display: grid; gap: 18px; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: flex; min-width: 0; flex-direction: column; gap: 8px; color: #29384b; font-size: 13px; font-weight: 700; }
.field b { color: #e24d4d; }
.field small { color: #8390a1; font-size: 11px; font-weight: 500; }
.form-box.quote-form input:not([type="checkbox"]),
.form-box.quote-form select,
.form-box.quote-form textarea {
  width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 12px 14px;
  border: 1px solid #d9e2ec; border-radius: 9px; outline: none; background: #fbfdff;
  color: #15283c; font: inherit; font-size: 14px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-box.quote-form textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.form-box.quote-form input::placeholder, .form-box.quote-form textarea::placeholder { color: #9aa7b6; font-weight: 400; }
.form-box.quote-form input:focus, .form-box.quote-form select:focus, .form-box.quote-form textarea:focus { border-color: #1684ff; background: #fff; box-shadow: 0 0 0 4px rgba(22,132,255,.12); }
.sms-consent { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 16px; border: 1px solid #dce8f5; border-radius: 12px; background: #f7fbff; color: #4d5d70; font-size: 12px; line-height: 1.65; }
.sms-consent input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 3px 0 0; accent-color: #1684ff; cursor: pointer; }
.sms-consent label { font-weight: 400; cursor: pointer; }
.sms-consent a, .form-note a { color: #0878ec; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.form-note { margin: -18px 0 0; color: #728095; font-size: 12px; line-height: 1.6; }
.submit-quote { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 15px 24px; border: 0; border-radius: 10px; background: #1684ff; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 9px 20px rgba(22,132,255,.22); transition: transform .2s, background .2s, box-shadow .2s; }
.submit-quote:hover { background: #086bd8; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(22,132,255,.27); }
.form-disclaimer { margin: -16px 0 0; color: #8995a5; font-size: 11px; line-height: 1.6; text-align: center; }
@media (max-width: 760px) {
  .section:has(.quote-form) { padding: 48px 5%; }
  .form-box.quote-form { padding: 22px 18px; gap: 24px; border-radius: 15px; }
  .form-grid-2, .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .form-heading { font-size: 16px; }
  .sms-consent { padding: 13px; }
}