/* ============================= */
/* 2026 CLEAN INDUSTRIAL POLISH  */
/* ============================= */

/* Global font (modern system stack) */
body {
  background: #111;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
  padding-top: 70px;
}

/* Brand color */
a { color: #1554FF; }
a:hover { color: #1554FF; }

/* Navbar */
.navbar-default {
  background: #ffffff;
  border: none;
  box-shadow: none;
}

.templatemo-nav .navbar-brand {
  font-family: 'League Spartan', sans-serif !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  color: #1554FF !important;
}

.navbar-default .navbar-nav li a {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
}

/* Section headings */
h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 40px;
}
h2 span {
  color: #1554FF;
  font-weight: 700;
}

/* HERO */
#home {
  position: relative;
  padding: 140px 0 120px;
  background: url('../images/home-bg.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
}

#home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

#home .container {
  position: relative;
  z-index: 2;
}

#home h1 {
  font-weight: 700;
  font-size: 60px;
  line-height: 1.15;
}

#home .element {
  font-size: 18px;
  line-height: 1.7;
  max-width: 900px;
  margin-top: 20px;
}

#home .btn {
  margin-top: 30px;
  height: 55px;
  padding: 15px 30px;
  font-weight: 600;
}

/* About text */
#about p {
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
}

/* FAQ */
#faq summary {
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
#faq summary:hover {
  color: #1554FF;
}
#faq details p {
  color: #cccccc;
  line-height: 1.8;
}

/* Service section text */
#service .col-md-10 {
  font-size: 17px;
  line-height: 1.8;
  color: #d0d0d0;
}

/* Portfolio images clean */
#portfolio img {
  width: 100%;
  height: auto;
  display: block;
}

/* Contact */
#contact {
  background: #1a1a1a;
  padding: 80px 0;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 18px;
}

.contact-item i {
  width: 40px;
  text-align: center;
  margin-right: 15px;
}

.contact-item a {
  color: #1554FF;
  text-decoration: none;
}

/* Footer */
#footer {
  padding: 14px 0;
  font-size: 14px;
}

.footer-brand {
  color: #1554FF;
  text-decoration: none;
}

.footer-brand:hover {
  color: #ffffff;
}


/* ============================= */
/* Contact social icons (horizontal) */
/* ============================= */
#contact .contact-divider{
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 22px 0 12px;
}

.social-icon{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}

#contact .social-icon{
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.social-icon li{ margin: 0; }

.social-icon a{
  text-decoration: none;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.social-icon a i{
  color: #ffffff;
  font-size: 18px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-icon a:hover i{
  color: #1554FF;
  transform: translateY(-1px);
}

/* ============================= */
/* WhatsApp floating button */
/* ============================= */
.whatsapp-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.whatsapp-float:hover{
  color: #ffffff;
  filter: brightness(0.98);
}

/* ============================= */
/* Section spacing */
/* ============================= */
#portfolio{ padding-bottom: 80px; }
#contact{ margin-top: 20px; }

/* ============================= */
/* Footer symmetry */
/* ============================= */
#footer .row{
  display: flex;
  align-items: center;
}

.footer-left{ text-align: left; }
.footer-right{ text-align: right; }

@media (max-width: 768px){
  body{ padding-top: 70px; }
  #footer .row{ flex-direction: column; gap: 10px; }
  .footer-left, .footer-right{ text-align: center; }
}

.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 999;
}
#contact h2{
  margin-top: 0;
  margin-bottom: 70px;
}
#contact .col-md-5{
  margin-top: 60px;
}
#contact hr{
  margin: 60px auto 30px;
  width: 70%;
  border-color: rgba(255,255,255,0.2);
}
.social-icons{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
#contact h2 span{
  margin-left: 8px;
}
#contact{
  padding-top: 100px;
  padding-bottom: 80px;
}
#home a.btn:hover,
#home .btn:hover,
#home a.btn:focus,
#home .btn:focus {
  background:#1554FF !important;
  border-color:#1554FF !important;
  color:#fff !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color:#1554FF !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a.current {
  color:#1554FF !important;
  background:transparent !important;
}
#contact .social-icon hr { display:none !important; }

#contact .social-icon{
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
#home h1 span.iveco,
#home h1 span.astra {
  color: #1554FF !important;
  font-weight: 700 !important;
}
#contact .contact-wrapper {
  align-items: center !important;
}

#contact .contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#contact .contact-wrapper{
  display: flex !important;
  align-items: center !important;
}

#contact .contact-info{
  padding-top: 40px !important;
}
#contact .contact-subtitle{
  margin-bottom: 25px !important;
}
section {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

section h2 {
  margin-bottom: 50px !important;
}
#about,
#faq,
#service,
#portfolio,
#contact {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

/* ============================= */
/* 2026 LAUNCH POLISH OVERRIDES  */
/* ============================= */

/* Load League Spartan (local) - used only for brand */
@font-face{
  font-family: "League Spartan";
  src: url("../fonts/LeagueSpartan-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "League Spartan";
  src: url("../fonts/LeagueSpartan-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "League Spartan";
  src: url("../fonts/LeagueSpartan-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Brand */
:root{
  --brand-blue:#1554FF;
}

/* Keep Spartan only for brand marks */
.navbar-brand,
h2 span,
#contact h2 span{
  font-family: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Prevent pointer cursor on brand */
.navbar-brand{ cursor: pointer !important; }

/* Consistent section rhythm (exclude hero) */
section:not(#home){
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

/* Consistent heading spacing */
section:not(#home) h2{
  margin: 0 0 55px 0 !important;
  line-height: 1.15;
}

/* Make anchors land nicely under sticky nav */
section{ scroll-margin-top: 90px; }

/* Restore hover/active behavior */
.navbar-nav > li > a{
  transition: color .2s ease, background-color .2s ease;
}
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a{
  color: var(--brand-blue) !important;
}

/* Hero: ensure IVECO & ASTRA are blue */
#home .iveco,
#home .astra{
  color: var(--brand-blue) !important;
  font-weight: 700 !important;
}

/* CTA button hover back to brand */
#home a.btn.btn-default:hover,
#home a.btn.btn-default:focus{
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
}

/* FAQ: add minimalist indicator (chevron) */
.faq details{
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 14px 0;
}
.faq summary{
  list-style: none;
  cursor: pointer;
  color: var(--brand-blue);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  transition: transform .18s ease;
}
.faq details[open] summary::after{
  transform: rotate(180deg);
}
.faq details p{
  margin: 10px 0 0;
  color: rgba(255,255,255,.9);
}

/* Resources: tighten gap between title and image */
#service .container,
#portfolio .container{
  padding-top: 0;
}
#service h2{ margin-bottom: 40px !important; }
#service img{ margin-top: 0 !important; }

/* Contact: consistent spacing + divider width */
#contact h2{ margin-bottom: 55px !important; }
#contact .contact-wrapper{ align-items: center !important; }
#contact .contact-subtitle{ margin-bottom: 24px !important; }
#contact .contact-item{ margin-bottom: 18px !important; }

#contact-social{
  width: 58% !important;
  margin: 22px auto 22px !important;
  border-top: 1px solid rgba(255,255,255,0.22) !important;
}


/* Social icons row */
.social-icon{
  display: flex !important;
  justify-content: center;
  gap: 28px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.social-icon a{
  color:#fff;
  transition: color .18s ease, transform .18s ease;
}
.social-icon a:hover{
  color: var(--brand-blue);
  transform: translateY(-1px);
}

/* Footer symmetry */
footer .footer-text{
  display:flex;
  align-items:center;
}
footer .footer-left{ justify-content:flex-start; }
footer .footer-right{ justify-content:flex-end; }

/* WhatsApp floating button: icon size */
.whatsapp-float i{
  font-size: 26px !important;
  line-height: 1;
}


/* ====== FINAL TWEAKS (FAQ + CONTACT SOCIAL) ====== */

/* FAQ: questions should be neutral, not same blue as title */
#faq summary,
.faq summary{
  color: rgba(255,255,255,0.78) !important;
  font-weight: 600;
}
#faq summary:hover,
.faq summary:hover{
  color: #1554FF !important;
}
.faq details[open] > summary{
  color: rgba(255,255,255,0.92) !important;
}

/* Contact social: keep only ONE divider line (the #contact-social line) */
#contact .social-icon{
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Slightly tighten social row spacing under divider */
#contact-social{
  width: 58% !important;
  margin: 22px auto 22px !important;
  border-top: 1px solid rgba(255,255,255,0.22) !important;
}

#contact .social-icon{
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}


/* Portfolio overlay for linked items */
.portfolio-thumb { position: relative; }
.portfolio-thumb .portfolio-overlay{
  position: absolute;
  inset: 0;
  background: rgba(21,84,255,0.65);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.portfolio-thumb a:hover .portfolio-overlay,
.portfolio-thumb a:focus .portfolio-overlay{
  opacity: 1;
}


/* Footer link spacing */
.footer-text a{
  margin-left: 8px;
}


/* Brand primary utility */
.text-primary{ color:#1554FF !important; }


/* Contact social spacing (final) */
#contact .social-icon{
  margin-top: 18px !important;
  margin-bottom: 28px !important;
}
#contact-social {
    width: 60%;
    margin: 40px auto 40px auto !important;
}

#contact .social-icon {
    margin: 40px 0 40px 0 !important;
}
#contact {
    padding-bottom: 10px;
}
.footer-separator {
    margin: 0 8px;
}
/* tighten space between social row and footer */
#contact{
  padding-bottom: 20px !important;
}

#contact .social-icon{
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}

#contact-social{
  margin-bottom: 12px !important;
}

footer{
  margin-top: 0 !important;
  padding-top: 10px !important;
}
/* CONTACT FINAL FIX */

#contact {
  padding-bottom: 20px !important;
}

#contact .container {
  padding-bottom: 0 !important;
}

#contact .row:last-child {
  margin-bottom: 0 !important;
}

#contact .contact-divider {
  margin: 25px auto !important;
  width: 70% !important;
}

#contact .social-icon {
  margin: 20px 0 !important;
  padding: 0 !important;
}

footer {
  margin-top: 0 !important;
  padding-top: 15px !important;
}
/* FINAL: shrink empty space before footer */
section#contact {
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}

section#contact .container,
section#contact .row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

section#contact hr {
  margin: 20px auto !important;
}

section#contact ul.social-icon {
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
}

footer {
  margin-top: 0 !important;
  padding-top: 12px !important;
}
section#contact {
  padding-bottom: 5px !important;
}

section#contact hr {
  margin: 10px auto !important;
}

section#contact ul.social-icon {
  margin: 10px 0 0 0 !important;
}

footer {
  padding-top: 5px !important;
}
section {
  scroll-margin-top: 80px;
}
#contact .contact-divider{
  margin: 24px auto 18px !important;
  width: 72% !important;
}

#contact .social-icon{
  margin: 0 auto 16px !important;
  padding: 0 !important;
}

#contact .social-icon li{
  margin: 0 10px !important;
}

.section-divider {
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 60px 0;
}

.manufacturer-collab {
  margin-top: 20px;
}

.manufacturer-collab h3 {
  color: #1e73be;
  margin-bottom: 20px;
}

.manufacturer-collab p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 15px;
}


/* --- Aifo: alignment fixes (added) --- */
#service .service-content{
  /* Remove forced centering offsets from markup and align with other sections */
  text-align: left;
}
#service .service-content p,
#service .service-content ul,
#service .service-content ol{
  text-align: left;
}

/* Keep portfolio grid stable (avoid accidental line breaks) */
#portfolio .portfolio-item .portfolio-thumb img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
}


/* --- FIX: Hero zoom/resize stability --- */
#home{
  min-height: 70vh;
  padding: clamp(100px, 12vh, 140px) 0 clamp(80px, 10vh, 120px);
}
#home h1{
  font-size: clamp(34px, 5vw, 60px);
}
@media (max-width: 767px){
  #home{
    padding: clamp(90px, 10vh, 120px) 0 clamp(70px, 8vh, 100px);
  }
  #home .element{ font-size: 16px; }
}
/* ===== Marques / Portfolio: fix "merged tiles" look ===== */
#portfolio .portfolio-thumb{
  background:#fff;
  padding: 18px;
  margin-bottom: 28px;
  height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

#portfolio .portfolio-thumb img.img-responsive{
  width:auto !important;
  max-width:100%;
  max-height:100%;
  height:auto;
  display:block;
}
/* Resources text: reduce left gap under the image */
#service .service-content,
#service .service-text,
#service .col-xs-12,
#service .col-sm-10{
  padding-left: 15px !important;
  margin-left: 0 !important;
}

#service h3,
#service h4,
#service p{
  margin-left: 0 !important;
}
#service .service-content{
  padding-left: 15px;
}
@media (max-width: 768px){
  #home h1{ font-size: 34px; line-height: 1.15; }
  #home .sub-element{ font-size: 14px; }
}
@media (max-width: 768px){
  #home h1{ font-size: 32px; line-height: 1.12; }
  #home .sub-element{ font-size: 13px; }
}
#about p,
#service .col-md-10,
#faq summary,
#faq details p,
#faq details li{
  font-size: 17px !important;
  line-height: 1.8 !important;
}

@media (max-width: 768px){
  #about p,
  #service .col-md-10,
  #faq summary,
  #faq details p,
  #faq details li{
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
}
#service .col-xs-12.col-sm-10{
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
}

#service .col-xs-12.col-sm-10 p,
#service .col-xs-12.col-sm-10 li{
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

@media (max-width: 768px){
  #service .col-xs-12.col-sm-10{
    font-size: 15px;
    line-height: 1.75;
  }
}
/* ============================= */
/*  AIFO TYPOGRAPHY LOCK (SAFE)  */
/*  Only font-size + color       */
/* ============================= */

:root{
  --aifo-text: rgba(255,255,255,0.85);
  --aifo-text-strong: rgba(255,255,255,0.92);
}

/* Desktop unified body text across sections */
#about p,
#faq details p,
#faq details li,
#service .service-content,
#service .service-content p,
#service .service-content li,
#service .manufacturer-collab p,
#contact .contact-info span{
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--aifo-text) !important;
}

/* Keep FAQ questions consistent size (color stays as you already set) */
#faq summary,
.faq summary{
  font-size: 18px !important;
}

/* Slightly stronger emphasis where you used <strong> inside paragraphs */
#about p strong,
#service .service-content p strong,
#faq details p strong{
  color: var(--aifo-text-strong) !important;
}

/* Mobile unified text */
@media (max-width: 768px){
  #about p,
  #faq details p,
  #faq details li,
  #service .service-content,
  #service .service-content p,
  #service .service-content li,
  #service .manufacturer-collab p,
  #contact .contact-info span{
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: var(--aifo-text) !important;
  }

  #faq summary,
  .faq summary{
    font-size: 15px !important;
  }
}
#service .manufacturer-collab h3{
  color: #1554FF !important;
}

/* ============================= */
/* RESOURCES (#service) – FINAL  */
/* Only color + font-size lock   */
/* ============================= */
#service .resource-title,
#service .resource-title strong,
#service p.text-primary,
#service h3.text-primary,
#service h4.text-primary,
#service h5.text-primary{
  color: #1554FF !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

@media (max-width: 768px){
  #service .resource-title,
  #service .resource-title strong,
  #service p.text-primary,
  #service h3.text-primary,
  #service h4.text-primary,
  #service h5.text-primary{
    font-size: 18px !important;
  }
}

/* Make sure bold text inside paragraphs stays normal */
#service .service-content p strong,
#service .col-xs-12.col-sm-10 p strong,
#service p strong{
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}