@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Cabin:ital,wdth,wght@0,87.5,600;1,87.5,600&family=Cedarville+Cursive&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Edu+NSW+ACT+Cursive:wght@400..700&family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Michroma&family=Montserrat:ital,wght@0,400;1,600&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Outfit:wght@100..900;1,100..900&family=Qwitcher+Grypen:wght@400;700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Saira:ital,wght@0,100..900;1,100..900&display=swap');

body {
font-family:"Nunito",sans-serif!important;
margin:0;
padding:0;
color:#333;
}

.hero-section {
position:relative;
background:url('./Manufacturing\ Flow-01.webp') center/cover no-repeat;
height:500px;
display:flex;
align-items:center;
overflow:hidden;
}

.hero-overlay {
background:rgba(0,0,0,.4);
position:absolute;
inset:0;
width:100%;
height:100%;
}

.hero-content {
position:relative;
z-index:2;
max-width:400px;
background:rgba(255,255,255,.685);
padding:2rem;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.2);
margin-left:5%;
}

.hero-content h1 {
font-size:1.5rem;
font-weight:bold;
color:#222;
margin-bottom:0;
}

.hero-content p {
margin-top:15px;
font-size:1rem;
color:#444;
line-height:1.6;
}

.hero-buttons {
display:flex;
flex-wrap:wrap;
align-items:center;
}

.hero-buttons .btn {
border-radius:30px;
padding:.6rem 1.5rem;
font-size:14px;
margin-right:10px;
transition:all .3s ease;
}

.btn-dark {
background-color:#000;
border:none;
}

.btn-dark:hover {
background-color:#333;
}

.btn-success {
background-color:#2863a7;
border:none;
}

.btn-success:hover {
background-color:#2863a7;
}

.client-overview-section {
padding-top:45px!important;
padding-bottom:45px!important;
}

.client-overview-content {
padding-right:35px;
}

.client-overview-image {
padding-left:35px;
}

.client-overview-section h2,
.what-we-built-section h2,
.key-takeaways h2 {
color:#003366;
}

.client-overview-section h2 {
font-size:2rem;
font-weight:600;
position:relative;
padding-bottom:10px;
}

.client-overview-section h2::after {
content:"";
position:absolute;
bottom:0;
left:0;
width:50px;
height:3px;
background:#007bff;
border-radius:2px;
}

.client-image-wrapper {
width:100%;
display:flex;
justify-content:flex-end;
}

.client-image {
border-radius:20px;
object-fit:cover;
width:100%;
max-width:550px;
height:auto;
}

.client-description {
font-size:.95rem;
color:#555;
line-height:1.7;
margin-bottom:18px;
}

.challenges-section {
padding:55px 0;
background:#f8fafc;
}

.challenges-section h2 {
color:#003366;
font-size:2rem;
}

.challenges-content .client-description {
margin-bottom:20px;
}

.what-we-built-section {
padding:55px 0;
background:#fff;
}


.what-we-built-section h2 {
font-size:2rem;
}

.process-wrapper {
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.process-image {
width:100%;
max-width:500px;
height:auto;
border-radius:20px;
}

.process-content {
padding-left:35px;
}

.process-content .client-description {
margin-bottom:20px;
}

.key-takeaways {
padding:55px 0;
background:#f8fafc;
}


.outcome-content {
padding-right:35px;
}

.key-takeaways h2 {
font-size:2rem;
font-weight:700;
}

.key-takeaways ul {
list-style:none;
padding:0;
margin:0;
}

.key-takeaways ul li {
position:relative;
margin-bottom:20px;
padding-left:30px;
}

.key-takeaways ul li::before {
content:"\f00c";
font-family:"Font Awesome 5 Free";
font-weight:900;
color:#007bff;
font-size:14px;
position:absolute;
left:0;
top:5px;
}

.key-takeaways ul li p {
margin-bottom:0;
}

.outcome-image {
display:flex;
align-items:center;
justify-content:center;
padding-left:35px;
}

.takeaway-img {
width:100%;
max-width:520px;
max-height:400px;
border-radius:15px;
object-fit:contain;
box-shadow:0 8px 20px rgba(0,0,0,.1);
}

.cta-section-wrapper {
padding-top:40px!important;
padding-bottom:40px!important;
}

.btn-cta {
display:inline-block;
background:#000;
color:#fff;
font-weight:600;
padding:12px 30px;
border-radius:30px;
transition:all .3s ease;
text-transform:uppercase;
}

.btn-cta:hover {
background:#002954;
color:#fff;
text-decoration:none;
transform:translateY(-3px);
box-shadow:0 5px 15px rgba(0,0,0,.2);
}

@media (min-width:768px) and (max-width:991.98px) {
.hero-section {
height:430px;
}

.hero-content {
width:80%;
max-width:550px;
margin:0 auto;
padding:1.75rem;
text-align:center;
}

.hero-content h1 {
font-size:1.6rem;
}

.hero-content p {
font-size:.95rem;
}

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

.hero-buttons .btn {
margin:5px;
}

.client-overview-section {
padding:45px 30px!important;
}

.client-overview-section .row {
display:flex;
flex-direction:column;
}

.client-overview-content,
.client-overview-image {
width:100%;
max-width:100%;
flex:0 0 100%;
padding-left:0;
padding-right:0;
}

.client-overview-content {
margin-bottom:30px;
}

.client-overview-image {
display:flex;
justify-content:center;
}

.client-image-wrapper {
width:100%;
display:flex;
justify-content:center;
}

.client-image {
width:100%;
max-width:750px;
height:auto;
}

.client-overview-section h2,
.what-we-built-section h2,
.key-takeaways h2,
.challenges-section h2 {
font-size:1.9rem;
}

.client-description {
font-size:1rem;
line-height:1.7;
}

.challenges-section {
padding:50px 30px;
}

.challenges-section .container {
max-width:100%;
padding-left:0;
padding-right:0;
}

.challenges-content {
width:100%;
max-width:100%;
}

.challenges-content .client-description {
margin-bottom:20px;
}

.what-we-built-section {
padding:50px 30px;
}

.what-we-built-section .container {
max-width:100%;
padding-left:0;
padding-right:0;
}

.what-we-built-section .row {
display:flex;
flex-direction:column;
}

.process-wrapper,
.process-content {
width:100%;
max-width:100%;
flex:0 0 100%;
padding-left:0;
padding-right:0;
}

.process-wrapper {
padding:10px 0 35px;
}

.process-image {
width:100%;
max-width:750px;
height:auto;
}

.process-content .client-description {
margin-bottom:20px;
}

.key-takeaways {
padding:50px 30px;
}

.key-takeaways .container {
max-width:100%;
padding-left:0;
padding-right:0;
}

.key-takeaways .row {
display:flex;
flex-direction:column;
}

.outcome-content,
.outcome-image {
width:100%;
max-width:100%;
flex:0 0 100%;
padding-left:0;
padding-right:0;
}

.outcome-content {
margin-bottom:35px;
}

.key-takeaways ul li {
padding-left:30px;
margin-bottom:20px;
text-align:left;
}

.takeaway-img {
width:100%;
max-width:750px;
max-height:none;
height:auto;
}

.cta-section-wrapper {
padding:35px 30px!important;
}
}

@media (max-width:767.98px) {
.hero-section {
height:auto;
min-height:350px;
padding:45px 15px;
}

.hero-content {
width:100%;
max-width:100%;
margin:0 auto;
padding:1.5rem;
text-align:center;
}

.hero-content h1 {
font-size:1.25rem;
}

.hero-content p {
font-size:.9rem;
}

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

.hero-buttons .btn {
margin:5px;
}

.client-overview-section {
padding:35px 15px!important;
}

.client-overview-content,
.client-overview-image {
padding-left:0;
padding-right:0;
}

.client-overview-section h2,
.what-we-built-section h2,
.key-takeaways h2,
.challenges-section h2 {
font-size:1.7rem;
}

.client-description {
font-size:.9rem;
line-height:1.6;
}

.client-image-wrapper {
justify-content:center;
margin-top:20px;
}

.client-image {
max-width:100%;
}

.challenges-section {
padding:35px 15px;
}

.challenges-content {
width:100%;
}

.challenges-content .client-description {
margin-bottom:17px;
}

.what-we-built-section {
padding:35px 15px;
}

.process-wrapper {
padding:10px 0 25px;
}

.process-image {
max-width:100%;
}

.process-content {
padding-left:0;
padding-right:0;
}

.key-takeaways {
padding:35px 15px;
}

.outcome-content {
padding-left:0;
padding-right:0;
}

.key-takeaways ul li {
padding-left:27px;
margin-bottom:18px;
text-align:left;
}

.outcome-image {
padding-left:0;
padding-right:0;
margin-top:20px;
}

.takeaway-img {
max-width:100%;
max-height:none;
}

.cta-section-wrapper {
padding:30px 15px!important;
}

.btn-cta {
font-size:13px;
padding:11px 24px;
}
}

@media (max-width:576px) {
.hero-section {
min-height:350px;
padding:40px 15px;
}

.hero-content {
padding:1rem;
}

.hero-content h1 {
font-size:1.1rem;
}

.hero-content p {
font-size:.85rem;
}

.hero-buttons {
display:block;
}

.hero-buttons .btn {
width:100%;
margin:6px 0;
}

.client-overview-section h2,
.what-we-built-section h2,
.key-takeaways h2,
.challenges-section h2 {
font-size:1.55rem;
}

.client-description {
font-size:.88rem;
line-height:1.55;
}

.key-takeaways ul li {
padding-left:25px;
}
}