@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap");
:root {
    --dark:#081721;
    --navy:#0b202e;
    --pink:#f60079;
    --blue:#00aeff;
    --yellow:#ffca13;
    --muted:#66717d;
    --shadow:0 8px 25px #09253913
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:88px
}

body {
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:#111923;
    background:white
}

a {
    color:inherit;
    text-decoration:none
}

img {
    max-width:100%;
    display:block
}

button,input,textarea,select {
    font:inherit
}

button {
    cursor:pointer
}

.container {
    width:min(1320px,92%);
    margin:auto
}

.topbar {
    background:#f7f8fa;
    border-bottom:1px solid #eef0f2
}

.top-inner {
    display:flex;
    justify-content:flex-end;
    gap:27px;
    align-items:center;
    font-size:11px;
    min-height:30px;
    color:#263140
}

.top-inner a:hover {
    color:var(--pink)
}

.header {
    position:sticky;
    top:0;
    background:#fff;
    z-index:20;
    box-shadow:0 3px 16px #00000012
}

.nav {
    height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px
}

.brand img {
    width:245px
}

.navigation {
    display:flex;
    align-items:center;
    gap:33px;
    font-size:13px;
    font-weight:700
}

.navigation a {
    padding:12px 0;
    border-bottom:2px solid transparent
}

.navigation a:hover,.navigation a.active {
    border-color:var(--blue);
    color:#007acc
}

.btn {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    border-radius:30px;
    padding:14px 27px;
    font-size:12px;
    font-weight:900;
    border:0;
    transition:transform .2s,filter .2s;
    white-space:nowrap
}

.btn:hover {
    transform:translateY(-2px);
    filter:brightness(1.05)
}

.btn-pink {
    background:var(--pink);
    color:white
}

.btn-blue {
    background:var(--blue);
    color:white
}

.btn-light {
    background:#fff;
    color:#081721;
    min-width:190px
}

.menu-btn {
    display:none;
    background:none;
    border:0;
    font-size:28px
}









































.section {
    padding:56px 0
}

.section-head {
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:25px
}

.section-head>p {
    font-size:12px;
    color:var(--muted);
    margin:0
}

.section-title {
    display:flex;
    align-items:center;
    gap:17px;
    flex-shrink:0
}

.section-title h2 {
    font-family:"Barlow Condensed",Impact,sans-serif;
    font-weight:900;
    font-size:32px;
    margin:0;
    line-height:1.1;
    letter-spacing:.3px
}

.section-title i {
    display:block;
    background:var(--pink);
    width:43px;
    height:4px
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:17px
}

.service-card {
    border:1px solid #e6e9ed;
    box-shadow:var(--shadow);
    border-radius:6px;
    overflow:hidden;
    background:#fff;
    transition:transform .2s
}

.service-card:hover {
    transform:translateY(-5px)
}

.service-card img {
    height:169px;
    width:100%;
    object-fit:cover
}

.service-card:nth-child(2) img {
    object-position:center 35%
}

.service-card:nth-child(4) img {
    object-position:center
}

.service-card>div {
    padding:13px 14px 17px
}

.service-card h3,.portfolio h3 {
    font-family:"Barlow Condensed",Impact,sans-serif;
    font-size:18px;
    margin:0;
    font-weight:800
}

.service-card p {
    margin:4px 0 0;
    color:#67737e;
    font-size:11px
}

.why,.industries {
    background:linear-gradient(100deg,#f9fbfd,#eef3f6,#f9fbfd)
}

.why-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    text-align:center;
    gap:17px
}

.why-grid>div {
    padding:12px 18px;
    border-right:1px solid #dbe3e9
}

.why-grid>div:last-child {
    border:0
}

.circle {
    display:grid;
    place-items:center;
    width:66px;
    height:66px;
    border-radius:50%;
    font-size:34px;
    color:#fff;
    margin:0 auto 17px;
    font-style:normal;
    font-weight:700
}

.pink {
    background:var(--pink)
}

.blue {
    background:var(--blue)
}

.yellow {
    background:var(--yellow)
}

.why h3,.steps h3,.industry-grid h3 {
    font-family:"Barlow Condensed",Impact,sans-serif;
    font-size:19px;
    font-weight:800;
    margin:9px 0
}

.why p,.steps p,.industry-grid p {
    font-size:12px;
    color:#566371;
    line-height:1.55;
    margin:0
}

.work .outline {
    margin-left:auto
}

.outline {
    border:1px solid #142735;
    border-radius:30px;
    padding:11px 18px;
    font-size:11px;
    font-weight:800
}

.outline:hover {
    background:#0a1c2a;
    color:#fff
}

.portfolio-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.portfolio {
    height:285px;
    margin:0;
    position:relative;
    overflow:hidden;
    border-radius:7px;
    background:#132330
}

.portfolio img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s
}

.portfolio:hover img {
    transform:scale(1.05)
}

.portfolio figcaption {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:linear-gradient(transparent,#071620 40%);
    padding:30px 15px 14px;
    color:white;
    display:flex;
    flex-direction:column;
    gap:5px
}

.portfolio strong {
    font-size:15px
}

.portfolio span {
    font-size:11px;
    color:#cad8e2
}

.steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
    text-align:center
}

.steps>div {
    position:relative;
    padding:7px 18px
}

.steps>div:not(:last-child):after {
    content:"→";
    position:absolute;
    right:-27px;
    top:55px;
    font-size:32px;
    color:#9faab2
}

.stepnum {
    display:inline-grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:50%;
    font-size:26px;
    color:white
}

.step-icon {
    font-size:43px;
    color:var(--blue);
    margin:5px
}

.industry-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:13px
}

.industry-grid>div {
    background:white;
    border-radius:7px;
    text-align:center;
    padding:25px 15px;
    border:1px solid #e5eaf0
}

.industry-grid b {
    font-size:39px;
    color:var(--pink)
}

.industry-grid>div:nth-child(even) b {
    color:var(--blue)
}

.industry-grid>div:nth-child(5) b {
    color:#ecae00
}

.faq-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px 20px
}

.faq details {
    border:1px solid #e5e9ed;
    border-radius:6px;
    box-shadow:0 2px 10px #00000007;
    padding:15px 17px;
    background:#fff
}

.faq summary {
    list-style:none;
    cursor:pointer;
    font-size:13px;
    font-weight:800;
    display:flex;
    justify-content:space-between;
    gap:12px
}

.faq summary::-webkit-details-marker {
    display:none
}


/* ==========================================
   DECERO FAQ - FIX BROKEN SYMBOLS
========================================== */

/* Remove corrupted symbols */
.faq summary::after,
.faq details[open] summary::after {
    content: none !important;
}

/* FAQ question */
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
}

/* Clean plus icon */
.faq summary::before {
    content: none;
}

/* Use a CSS-drawn icon instead of text */
.faq summary {
    position: relative;
    padding-right: 35px;
}

.faq summary::after {
    content: "" !important;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background:
        linear-gradient(#111923, #111923) center / 14px 2px no-repeat,
        linear-gradient(#111923, #111923) center / 2px 14px no-repeat;
}

/* Minus icon when FAQ is open */
.faq details[open] summary::after {
    background:
        linear-gradient(#111923, #111923) center / 14px 2px no-repeat;
}


.faq details p {
    font-size:13px;
    line-height:1.6;
    color:#607080;
    margin-bottom:0
}

.cta-band {
    background:linear-gradient(100deg,#00aafa,#2275f3 22%,#f40093 51%,#ffc21f 77%,#f6007e);
    color:white;
    padding:39px 0
}

.cta-band .container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}

.cta-band h2 {
    font-family:"Barlow Condensed",Impact,sans-serif;
    font-size:35px;
    margin:0
}

.cta-band p {
    margin:5px 0 0;
    font-size:14px
}

.contact {
    background:#f7f9fb
}

.contact-grid {
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:90px
}

.contact-grid>div>p {
    font-size:15px;
    color:#607080;
    line-height:1.7;
    max-width:440px
}

.contact-links {
    display:grid;
    gap:23px;
    margin-top:34px
}

.contact-links>a,.contact-links>span {
    display:flex;
    align-items:center;
    gap:17px;
    font-size:24px;
    color:#00a6ed
}

.contact-links>a>span,.contact-links>span>span {
    font-size:15px;
    color:#243747
}

.quote-form {
    background:white;
    padding:33px;
    border-radius:12px;
    box-shadow:var(--shadow);
    display:grid;
    gap:14px
}

.quote-form h3 {
    margin:0;
    font-family:"Barlow Condensed",Impact,sans-serif;
    font-size:29px
}

.quote-form>p {
    margin:-8px 0 8px;
    color:#637583;
    font-size:12px
}

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.quote-form label {
    display:grid;
    gap:6px;
    font-size:12px;
    font-weight:700
}

.quote-form input,.quote-form select,.quote-form textarea {
    border:1px solid #dce3e8;
    border-radius:6px;
    padding:13px 12px;
    width:100%;
    color:#22313e;
    background:white;
    outline-color:var(--blue)
}

.quote-form button {
    justify-self:start
}

.quote-form small {
    font-size:11px;
    color:#6a7884
}

.footer {
    background:#081721;
    color:white;
    padding:45px 0 0
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1.5fr 1.6fr;
    gap:50px
}

.footer-logo {
    width:225px;
    background:white;
    border-radius:5px;
    padding:6px
}

.footer-grid h3 {
    font-size:14px;
    margin:9px 0 20px
}

.footer-grid a {
    display:block;
    color:#c7d2d9;
    font-size:12px;
    margin:0 0 14px;
    line-height:1.5;
    overflow-wrap:anywhere
}

.footer-grid a:hover {
    color:var(--blue)
}

.footer-grid p {
    font-size:12px;
    color:#c7d2d9;
    line-height:1.8;
    max-width:300px
}

.footer-bottom {
    margin-top:34px;
    padding:18px 0;
    border-top:1px solid #ffffff20;
    color:#a8b6c2;
    font-size:11px
}

@media(max-width:1050px) {
    .brand img {
        width:195px
    }
    .navigation {
        gap:16px
    }
    .nav-quote {
        padding:12px 16px
    }
    
    
    
    
    .service-grid {
        grid-template-columns:repeat(3,1fr)
    }
    .portfolio-grid {
        grid-template-columns:repeat(3,1fr)
    }
    .industry-grid {
        grid-template-columns:repeat(3,1fr)
    }
}

@media(max-width:740px) {
    .topbar {
        display:none
    }
    .nav {
        height:70px
    }
    .brand img {
        width:200px
    }
    .menu-btn {
        display:block;
        margin-left:auto
    }
    .nav-quote {
        display:none
    }
    .navigation {
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:70px;
        flex-direction:column;
        background:white;
        padding:18px 20px;
        box-shadow:0 16px 25px #0002;
        align-items:stretch;
        gap:0
    }
    .navigation.open {
        display:flex
    }
    .navigation a {
        padding:14px
    }
    
    
    
    
    
    
    
    
    
    
    .section {
        padding:42px 0
    }
    .section-head {
        flex-wrap:wrap;
        gap:10px;
        margin-bottom:20px
    }
    .section-title h2 {
        font-size:29px
    }
    .section-head>p {
        width:100%
    }
    .service-grid {
        grid-template-columns:repeat(2,1fr);
        gap:10px
    }
    .service-card img {
        height:145px
    }
    .service-card>div {
        padding:11px
    }
    .service-card h3 {
        font-size:16px
    }
    .why-grid {
        grid-template-columns:repeat(2,1fr);
        gap:18px
    }
    .why-grid>div {
        border:0;
        padding:12px
    }
    .why-grid>div:last-child {
        grid-column:1/-1
    }
    .portfolio-grid {
        grid-template-columns:repeat(2,1fr);
        gap:10px
    }
    .portfolio {
        height:245px
    }
    .portfolio figcaption {
        padding:25px 9px 12px
    }
    .portfolio strong {
        font-size:13px
    }
    .work .outline {
        margin-left:0
    }
    .steps {
        grid-template-columns:repeat(2,1fr);
        gap:15px
    }
    .steps>div:after {
        display:none
    }
    .industry-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .faq-grid {
        grid-template-columns:1fr
    }
    .cta-band .container {
        align-items:flex-start;
        flex-direction:column
    }
    .cta-band h2 {
        font-size:29px
    }
    .contact-grid {
        grid-template-columns:1fr;
        gap:35px
    }
    .footer-grid {
        grid-template-columns:repeat(2,1fr);
        gap:22px
    }
    .footer-grid>div:first-child {
        grid-column:1/-1
    }
    .footer-grid h3 {
        margin-top:0
    }
    .quote-form {
        padding:20px
    }
    .form-row {
        grid-template-columns:1fr
    }
}

@media(max-width:430px) {
    .service-card img {
        height:116px
    }
    .portfolio {
        height:205px
    }
    
    
    
    .industry-grid>div {
        padding:18px 10px
    }
    .container {
        width:91%
    }
}

/* ==============================================
   DECERO INDUSTRIES WE SERVE
   Single scoped section; no duplicate overrides.
   ============================================== */
#industries.industries-section {
  display: block;
  padding: 50px 0 58px;
  background: linear-gradient(100deg, #f9fbfd, #eef3f6, #f9fbfd);
}
#industries .industries-container {
  width: min(1320px, 92%);
  margin: 0 auto;
}
#industries .industries-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
}
#industries .industries-heading h2 {
  margin: 0;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
  color: #111923;
}
#industries .industries-line {
  display: block;
  width: 50px;
  height: 4px;
  flex: 0 0 50px;
  background: #f60079;
}
#industries .industries-heading p {
  margin: 0;
  font-size: 12px;
  color: #66717d;
}
#industries .industries-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
}
#industries .industry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 185px;
  padding: 22px 12px 20px;
  background: #fff;
  border: 1px solid #e5eaf0;
  border-radius: 7px;
  text-align: center;
}
#industries .industry-icon,
#industries .industry-icon.pink,
#industries .industry-icon.blue,
#industries .industry-icon.yellow {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 54px;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  padding: 0;
  background: transparent;
  border: none;
}
#industries .industry-icon svg {
  display: block;
  flex: none;
  width: 46px;
  height: 46px;
  max-width: 46px;
  max-height: 46px;
}
#industries .industry-icon.pink { color: #f60079; }
#industries .industry-icon.blue { color: #00aeff; }
#industries .industry-icon.yellow { color: #ffca13; }
#industries .industry-card h3 {
  margin: 0 0 8px;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: #111923;
}
#industries .industry-card p {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: #566371;
}
@media (max-width: 1050px) {
  #industries .industries-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* DECERO INDUSTRIES - PREMIUM ICONS */

.decero-industries-v2 .industry-icon {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.decero-industries-v2 .industry-icon i {
  display: inline-block;
  font-size: 55px !important;
  line-height: 1 !important;
  font-style: normal;
  background: transparent !important;
}

.decero-industries-v2 .industry-icon.icon-pink {
  color: #f60079 !important;
}

.decero-industries-v2 .industry-icon.icon-blue {
  color: #0ca5f7 !important;
}

.decero-industries-v2 .industry-icon.icon-yellow {
  color: #ffc400 !important;
}

/* Tighter card spacing to match mockup */
.decero-industries-v2 .industry-card {
  min-height: 192px;
  padding: 18px 10px 20px;
}

.decero-industries-v2 .industry-card h3 {
  margin-top: 2px;
  margin-bottom: 7px;
}

@media (max-width: 640px) {
  .decero-industries-v2 .industry-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }

  .decero-industries-v2 .industry-icon i {
    font-size: 46px !important;
  }
}

/* ============================================================
   DECERO HERO — FINAL SINGLE-SOURCE STYLES
   Image: assets/images/hero-background-clean.webp
   Keep headline, icons, CTA and phone number as HTML.
   ============================================================ */

/* The hero is one background, not a three-image collage. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #fff;
  background-color: #07131e;
  background-image:
    linear-gradient(90deg,
      rgba(7,19,30,.97) 0%,
      rgba(7,19,30,.90) 21%,
      rgba(7,19,30,.70) 37%,
      rgba(7,19,30,.20) 55%,
      rgba(7,19,30,0) 73%),
    url('../images/hero-background-clean.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero .container { width: min(1790px,88%); max-width: 1790px; }
.hero .hero-grid { display:flex; align-items:center; min-height:500px; }
.hero .hero-text { position:relative; z-index:2; width:53%; min-width:0; padding:38px 0; }
.hero .eyebrow { font-size:clamp(10px,.75vw,14px); color:#d3dde4; font-weight:800; letter-spacing:1.8px; }
.hero h1 { font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(70px,6.4vw,124px); font-weight:900; line-height:.84; letter-spacing:-1px; margin:20px 0; }
.hero h1 span { color:transparent; background:linear-gradient(90deg,#00bfff,#0aa5f4 30%,#f4008d 65%,#ffce17); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero .hero-text > p { color:#f3f5f7; max-width:780px; font-size:clamp(14px,1.12vw,21px); line-height:1.5; margin:0; }
.hero .hero-features { display:flex; flex-wrap:nowrap; align-items:center; gap:0; margin:24px 0 23px; }
.hero .hero-features > span { display:flex; align-items:center; gap:9px; color:#00b9ff; padding:0 12px; border-right:1px solid #74828c; white-space:nowrap; }
.hero .hero-features > span:first-child { padding-left:0; }
.hero .hero-features > span:last-child { border:0; }
.hero .hero-features i { font-size:clamp(24px,2vw,37px); width:1.12em; flex:none; text-align:center; }
.hero .hero-features small { color:#fff; font-size:clamp(8px,.7vw,12px); line-height:1.3; font-weight:800; }
.hero .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:15px; }
.hero .hero-actions > span { font-size:11px; font-weight:800; }
.hero .hero-phone { font-size:clamp(15px,1.25vw,22px); font-weight:800; color:#fff; }
.hero .hero-collage { display:none !important; }

/* Avoid horizontal scrolling without moving or clipping the text layout. */
html, body { width:100%; max-width:100%; overflow-x:clip; }
main, header, footer, section { max-width:100%; }

@media (max-width:1050px) {
  .hero .container { width:92%; }
  .hero .hero-text { width:65%; }
  .hero h1 { font-size:clamp(58px,7.5vw,90px); }
  .hero .hero-features { flex-wrap:wrap; row-gap:12px; }
  .hero .eyebrow { white-space:normal; }
}

@media (max-width:740px) {
  /* Crucial: separate the image from the full-height hero background.
     The photo gets its own 360px-tall region so none of its height is lost
     behind the headline or the previous dark overlay. */
  .hero {
    width:100%;
    max-width:100%;
    overflow:hidden;
    background:#07131e !important;
  }
  .hero::after {
    content:'';
    position:absolute;
    z-index:0;
    pointer-events:none;
    left:0;
    right:0;
    bottom:0;
    height:360px;
    background-image:url('../images/hero-background-clean.webp');
    background-repeat:no-repeat;
    background-size:auto 360px;
    background-position:66% center;
  }
  .hero .container { width:90%; max-width:90%; margin:0 auto; }
  .hero .hero-grid { position:relative; z-index:1; display:block; width:100%; min-width:0; min-height:0; }
  .hero .hero-text { width:100%; max-width:100%; min-width:0; padding:40px 0 390px; }
  .hero .eyebrow { font-size:10px; line-height:1.6; letter-spacing:1.2px; white-space:normal; overflow-wrap:anywhere; }
  .hero h1 { font-size:clamp(48px,12vw,72px); line-height:.95; max-width:100%; }
  .hero .hero-text > p { font-size:14px; line-height:1.6; max-width:100%; }
  .hero .hero-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px; width:100%; margin:22px 0; }
  .hero .hero-features > span { min-width:0; padding:0; border:0; gap:7px; white-space:normal; }
  .hero .hero-features i { font-size:25px; width:30px; flex-shrink:0; }
  .hero .hero-features small { font-size:9px; line-height:1.3; }
  .hero .hero-actions { max-width:100%; gap:12px; }
  .hero .hero-actions .btn { padding:14px 23px; font-size:11px; }
  .hero .hero-phone { font-size:15px; overflow-wrap:anywhere; }
  .service-grid, .portfolio-grid, .faq-grid, .contact-grid { min-width:0; max-width:100%; }
  .service-card, .portfolio, .industry-card { min-width:0; }
}

@media (max-width:390px) {
  .hero h1 { font-size:48px; }
  .hero .hero-features small { font-size:8px; }
  .hero .hero-actions { gap:10px; }
  .hero::after { height:330px; background-size:auto 330px; }
  .hero .hero-text { padding-bottom:360px; }
}

/* ==========================================
   DECERO - TESTIMONIALS MOCKUP SECTION
========================================== */

.decero-testimonials {
  padding: 48px 0 55px;
  background: linear-gradient(
    100deg,
    #f9fbfd,
    #eef3f6,
    #f9fbfd
  );
}

.decero-testimonials .testimonials-container {
  width: min(1320px, 92%);
  margin: 0 auto;
}

/* Heading */

.decero-testimonials .testimonials-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}

.decero-testimonials .testimonials-heading h2 {
  margin: 0;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
  color: #111923;
}

.decero-testimonials .testimonials-line {
  display: block;
  width: 55px;
  height: 4px;
  background: #f60079;
  flex-shrink: 0;
}

.decero-testimonials .testimonials-heading p {
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  color: #66717d;
  margin: 0;
}

/* Four Card Grid */

.decero-testimonials .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  align-items: stretch;
}

/* Cards */

.decero-testimonials .testimonial-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 280px;
  padding: 25px 22px 22px;
  background: #ffffff;
  border: 1px solid #edf0f3;
  border-radius: 11px;
  box-shadow: 0 3px 14px rgba(8,23,33,.035);
}

/* Gold Stars */

.decero-testimonials .testimonial-stars {
  color: #ffb900;
  font-family: Arial, sans-serif;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 2px;
  margin-bottom: 17px;
  white-space: nowrap;
}

/* Review Text */

.decero-testimonials .testimonial-review {
  color: #35404b;
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  margin: 0 0 22px;
  flex: 1;
}

/* Customer Row */

.decero-testimonials .testimonial-customer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

/* Circular Customer Photos */

.decero-testimonials .testimonial-avatar {
  width: 66px;
  height: 66px;
  min-width: 66px;
  border-radius: 50%;
  overflow: hidden;
  background: #e8edf1;
}

.decero-testimonials .testimonial-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Customer Details */

.decero-testimonials .testimonial-info h3 {
  margin: 0 0 4px;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  color: #111923;
}

.decero-testimonials .testimonial-info span {
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #66717d;
}

/* Tablet */

@media (max-width: 1050px) {
  .decero-testimonials .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */

@media (max-width: 640px) {
  .decero-testimonials {
    padding: 40px 0 45px;
  }

  .decero-testimonials .testimonials-heading {
    gap: 10px;
    margin-bottom: 24px;
  }

  .decero-testimonials .testimonials-heading h2 {
    font-size: 28px;
  }

  .decero-testimonials .testimonials-line {
    width: 45px;
  }

  .decero-testimonials .testimonials-heading p {
    width: 100%;
    font-size: 12px;
  }

  .decero-testimonials .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .decero-testimonials .testimonial-card {
    min-height: 0;
    padding: 23px 20px;
  }

  .decero-testimonials .testimonial-review {
    font-size: 13px;
  }

  .decero-testimonials .testimonial-stars {
    font-size: 27px;
  }

  .decero-testimonials .testimonial-avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }
}

/* ==========================================
   DECERO FOOTER - MOCKUP MATCH
========================================== */

.decero-footer {
  background: #081b26;
  color: #ffffff;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* MAIN FOOTER */

.decero-footer .decero-footer-main {
  width: min(1600px, 92%);
  max-width: 1600px;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr 1.65fr 1.1fr;
  gap: 45px;
  padding: 55px 0 65px;
  align-items: start;
}

/* BRAND */

.decero-footer-brand {
  padding-right: 35px;
  border-right: 1px solid #ffffff25;
  min-width: 0;
}

.decero-footer-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin-bottom: 25px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.decero-footer-brand p {
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.85;
  color: #d0d9df;
  max-width: 365px;
  margin: 0;
}

/* COLUMNS */

.decero-footer-column {
  min-width: 0;
}

.decero-footer-column h3 {
  font-family: Inter, Arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: white;
  margin: 8px 0 28px;
}

.decero-footer-column nav {
  display: flex;
  flex-direction: column;
}

.decero-footer-column nav a,
.decero-footer-service-grid a {
  display: block;
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
  color: #d0d9df;
  transition: color .2s ease;
}

.decero-footer a:hover {
  color: #00aeff;
}

/* QUICK LINKS SEPARATOR */

.decero-footer-main > .decero-footer-column:nth-child(2) {
  border-right: 1px solid #ffffff25;
  padding-right: 25px;
}

/* SERVICES */

.decero-footer-services {
  padding-right: 30px;
  border-right: 1px solid #ffffff25;
}

.decero-footer-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* CONTACT */

.decero-footer-contact h3 {
  margin-bottom: 27px;
}

.decero-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 23px;
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #d0d9df;
}

.decero-footer-contact-item i {
  font-size: 25px;
  width: 28px;
  min-width: 28px;
  color: #ffffff;
  text-align: center;
  margin-top: 1px;
}

.decero-footer-contact-item span {
  overflow-wrap: anywhere;
}

/* SOCIAL ICONS */

.decero-footer-social {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-top: 26px;
}

.decero-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  color: #ffffff;
  transition: transform .2s, color .2s;
}

.decero-footer-social a i {
  font-size: 31px;
}

.decero-footer-social a:hover {
  color: #00aeff;
  transform: translateY(-3px);
}

/* BOTTOM STRIP */

.decero-footer-bottom {
  border-top: 1px solid #ffffff24;
  padding: 23px 0;
}

.decero-footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.decero-footer-bottom p {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  color: #b7c6d0;
}

.decero-footer-bottom-features {
  display: flex;
  align-items: center;
  gap: 15px;
}

.decero-footer-bottom-features span {
  color: #ffffff;
}

/* TABLET */

@media (max-width: 1100px) {

  .decero-footer .decero-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 38px 35px;
  }

  .decero-footer-brand,
  .decero-footer-services,
  .decero-footer-main > .decero-footer-column:nth-child(2) {
    border-right: none;
    padding-right: 0;
  }

  .decero-footer-logo {
    width: 270px;
  }

}

/* MOBILE */

@media (max-width: 640px) {

  .decero-footer .decero-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 34px 20px;
    padding: 42px 0;
  }

  .decero-footer-brand {
    grid-column: 1 / -1;
    padding: 0;
  }

  .decero-footer-logo {
    width: 250px;
    margin-bottom: 20px;
  }

  .decero-footer-brand p {
    font-size: 12px;
    max-width: 100%;
    line-height: 1.75;
  }

  .decero-footer-column h3 {
    font-size: 16px;
    margin: 0 0 20px;
  }

  .decero-footer-column nav a,
  .decero-footer-service-grid a {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .decero-footer-services {
    grid-column: 1 / -1;
  }

  .decero-footer-service-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .decero-footer-contact {
    grid-column: 1 / -1;
  }

  .decero-footer-contact-item {
    font-size: 12px;
    gap: 15px;
  }

  .decero-footer-social {
    gap: 20px;
  }

  .decero-footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .decero-footer-bottom p {
    font-size: 10px;
    line-height: 1.6;
  }

  .decero-footer-bottom-features {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

}

@media (max-width: 380px) {

  .decero-footer .decero-footer-main {
    grid-template-columns: 1fr;
  }

  .decero-footer-brand,
  .decero-footer-services,
  .decero-footer-contact {
    grid-column: 1;
  }

}
.hero-content p {
  max-width: 680px;
  width: 100%;
  line-height: 1.5;
}