/* =========================================================
TRIMEROUS TECHNOLOGY
BUSINESS SOFTWARE SERVICES
CLEAN FINAL CUSTOM CSS
========================================================= */

/* =========================================================

1. COMMON SECTIONS
   ========================================================= */

.bs-intro-section,
.bs-six-section,
.bs-solutions-section,
.bs-transformation-section,
.bs-ecosystem-section,
.bs-impact-section,
.bs-need-section,
.bs-process-section,
.bs-outcomes-section,
.bs-final-cta {
position: relative;
overflow: hidden;
}

/* =========================================================
2. SECTION TITLE
ORDER:
HEADING
PINK LINE
DESCRIPTION
========================================================= */

.bs-intro-section .section-title,
.bs-six-section .section-title,
.bs-solutions-section .section-title,
.bs-transformation-section .section-title,
.bs-ecosystem-section .section-title,
.bs-impact-section .section-title,
.bs-need-section .section-title,
.bs-process-section .section-title,
.bs-outcomes-section .section-title {
width: 100%;
margin: 0 auto 55px;
padding: 0;
text-align: center;
}

/* HEADING */

.bs-intro-section .section-title h2,
.bs-six-section .section-title h2,
.bs-solutions-section .section-title h2,
.bs-transformation-section .section-title h2,
.bs-ecosystem-section .section-title h2,
.bs-impact-section .section-title h2,
.bs-need-section .section-title h2,
.bs-process-section .section-title h2,
.bs-outcomes-section .section-title h2 {
position: relative;
display: block;
width: 100%;
margin: 0 0 12px;
padding: 0;
color: #151515;
font-family: 'Oswald', sans-serif;
font-size: 42px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-transform: capitalize;
}

/* PINK LINE
ALWAYS BELOW HEADING */

.bs-intro-section .section-title span,
.bs-six-section .section-title span,
.bs-solutions-section .section-title span,
.bs-transformation-section .section-title span,
.bs-ecosystem-section .section-title span,
.bs-impact-section .section-title span,
.bs-need-section .section-title span,
.bs-process-section .section-title span,
.bs-outcomes-section .section-title span {
display: block;
width: 100px;
height: 2px;
margin: 0 auto 18px;
padding: 0;
background: #f5325c;
}

/* DESCRIPTION */

.bs-intro-section .section-title p,
.bs-six-section .section-title p,
.bs-solutions-section .section-title p,
.bs-transformation-section .section-title p,
.bs-ecosystem-section .section-title p,
.bs-impact-section .section-title p,
.bs-need-section .section-title p,
.bs-process-section .section-title p,
.bs-outcomes-section .section-title p {
display: block;
width: 100%;
max-width: 760px;
margin: 0 auto;
padding: 0 10px;
color: #747474;
font-size: 16px;
line-height: 27px;
text-align: center;
}

/* =========================================================
3. SMALL TITLE
========================================================= */

.bs-small-title {
display: block;
margin: 0 0 12px;
color: #f2a900;
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 1.5px;
line-height: 1.4;
text-transform: uppercase;
}

/* =========================================================
4. HERO
========================================================= */

.bs-hero {
position: relative;
min-height: 620px;
overflow: hidden;
background: #111827;
}

.bs-hero:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(10,15,30,.94) 0%,
rgba(10,15,30,.80) 45%,
rgba(10,15,30,.30) 100%
);
pointer-events: none;
}

.bs-hero .hero-content {
position: relative;
z-index: 2;
}

.bs-hero h1 {
margin: 0 0 20px;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 58px;
font-weight: 600;
line-height: 1.08;
}

.bs-hero p {
max-width: 700px;
margin: 0 0 30px;
color: rgba(255,255,255,.82);
font-size: 17px;
line-height: 29px;
}

/* =========================================================
5. BUTTON
========================================================= */

.bs-final-cta .btn_one,
.bs-hero .btn_one,
.home_video .btn_one {
display: inline-block;
padding: 13px 30px;
border: 1px solid #f2a900;
border-radius: 3px;
background: #f2a900;
color: #111827;
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: .3px;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
transition:
transform .3s ease,
box-shadow .3s ease,
background .3s ease,
color .3s ease;
}

.bs-final-cta .btn_one:hover,
.bs-hero .btn_one:hover,
.home_video .btn_one:hover {
background: #ffffff;
color: #111827;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

/* =========================================================
6. INTRO
========================================================= */

.bs-intro-section {
background: #ffffff;
}

.bs-intro-content {
padding-right: 35px;
}

.bs-intro-content h3 {
margin: 0 0 18px;
color: #151515;
font-family: 'Oswald', sans-serif;
font-size: 34px;
font-weight: 500;
line-height: 1.2;
}

.bs-intro-content p {
margin: 0 0 18px;
color: #747474;
font-size: 16px;
line-height: 28px;
}

/* =========================================================
7. IMAGE SYSTEM
NO CROPPING
NO STRETCHING
FULL IMAGE VISIBLE
========================================================= */

.bs-visual-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 360px;
padding: 20px;
border-radius: 4px;
background: #ffffff;
overflow: hidden;
}

.bs-visual-box img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 420px;
margin: 0 auto;
object-fit: contain;
object-position: center center;
transition: transform .35s ease;
}

.bs-visual-box:hover img {
transform: scale(1.015);
}

/* =========================================================
8. SIX CORE CARDS
========================================================= */

.bs-six-section {
background: #f8f9fb;
}

.bs-info-card {
position: relative;
min-height: 285px;
margin-bottom: 30px;
padding: 35px 28px;
border: 1px solid #e9e9e9;
background: #ffffff;
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}

.bs-info-card:hover {
border-color: rgba(242,169,0,.45);
transform: translateY(-6px);
box-shadow: 0 18px 45px rgba(20,25,40,.08);
}

.bs-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
margin-bottom: 22px;
border-radius: 50%;
background: #fff5d9;
color: #f2a900;
font-size: 25px;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}

.bs-info-card:hover .bs-card-icon {
background: #f2a900;
color: #ffffff;
transform: translateY(-2px);
}

.bs-info-card h3 {
margin: 0 0 13px;
color: #151515;
font-family: 'Oswald', sans-serif;
font-size: 25px;
font-weight: 500;
line-height: 1.2;
}

.bs-info-card p {
margin: 0;
color: #747474;
font-size: 15px;
line-height: 26px;
}

/* =========================================================
9. SOFTWARE SOLUTIONS
========================================================= */

.bs-solutions-section {
background: #ffffff;
}

.bs-solution-card {
position: relative;
min-height: 250px;
margin-bottom: 30px;
padding: 35px 28px 45px;
border: 1px solid #eeeeee;
background: #ffffff;
overflow: hidden;
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}

.bs-solution-card:hover {
border-color: rgba(242,169,0,.40);
transform: translateY(-5px);
box-shadow: 0 18px 42px rgba(20,25,40,.08);
}

/* BOTTOM ORANGE LINE */

.bs-solution-card:after {
content: "";
position: absolute;
left: 28px;
bottom: 0;
width: 0;
height: 3px;
background: #f2a900;
transition: width .35s ease;
}

.bs-solution-card:hover:after {
width: calc(100% - 56px);
}

/* CONTENT ABOVE LINE */

.bs-solution-card > i,
.bs-solution-card > h3,
.bs-solution-card > p {
position: relative;
z-index: 2;
}

.bs-solution-card > i {
display: block;
margin-bottom: 20px;
color: #f2a900;
font-size: 32px;
}

.bs-solution-card h3 {
margin: 0 0 12px;
color: #151515;
font-family: 'Oswald', sans-serif;
font-size: 25px;
font-weight: 500;
line-height: 1.2;
}

.bs-solution-card p {
margin: 0;
color: #747474;
font-size: 15px;
line-height: 26px;
}

/* =========================================================
10. TRANSFORMATION
========================================================= */

.bs-transformation-section {
background: #f8f9fb;
}

.bs-transform-box {
position: relative;
padding: 40px 35px;
border: 1px solid #e8e8e8;
background: #ffffff;
}

.bs-transform-box h3 {
margin: 0 0 18px;
color: #151515;
font-family: 'Oswald', sans-serif;
font-size: 30px;
line-height: 1.2;
}

.bs-transform-box p {
margin: 0;
color: #747474;
line-height: 27px;
}

.bs-transform-arrow {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
color: #f2a900;
font-size: 35px;
}

/* =========================================================
11. BUSINESS ECOSYSTEM
========================================================= */

.bs-ecosystem-section {
background: #ffffff;
}

.bs-ecosystem {
position: relative;
max-width: 1050px;
margin: 0 auto;
padding: 35px;
}

.bs-ecosystem-center {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
margin: 0 auto;
border-radius: 50%;
background: #111827;
color: #ffffff;
text-align: center;
box-shadow: 0 15px 40px rgba(17,24,39,.16);
}

.bs-ecosystem-center h3 {
margin: 0;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 23px;
line-height: 1.2;
}

.bs-ecosystem-item {
min-height: 150px;
margin-bottom: 30px;
padding: 28px 22px;
border: 1px solid #eeeeee;
background: #ffffff;
text-align: center;
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}

.bs-ecosystem-item:hover {
border-color: rgba(242,169,0,.40);
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(20,25,40,.07);
}

.bs-ecosystem-item i {
display: block;
margin-bottom: 14px;
color: #f2a900;
font-size: 27px;
}

.bs-ecosystem-item h4 {
margin: 0 0 8px;
color: #151515;
font-family: 'Oswald', sans-serif;
font-size: 21px;
line-height: 1.2;
}

.bs-ecosystem-item p {
margin: 0;
color: #747474;
font-size: 14px;
line-height: 23px;
}

/* =========================================================
12. BUSINESS IMPACT
========================================================= */

.bs-impact-section {
background: #111827;
}

.bs-impact-section .section-title h2 {
color: #ffffff;
}

.bs-impact-section .section-title span {
background: #f2a900;
}

.bs-impact-section .section-title p {
color: rgba(255,255,255,.72);
}

.bs-impact-card {
min-height: 220px;
margin-bottom: 30px;
padding: 35px 25px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
text-align: center;
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease;
}

.bs-impact-card:hover {
border-color: rgba(242,169,0,.45);
background: rgba(255,255,255,.07);
transform: translateY(-5px);
}

.bs-impact-card i {
display: block;
margin-bottom: 18px;
color: #f2a900;
font-size: 35px;
}

.bs-impact-card h3 {
margin: 0 0 12px;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 24px;
}

.bs-impact-card p {
margin: 0;
color: rgba(255,255,255,.70);
font-size: 14px;
line-height: 25px;
}

/* =========================================================
13. BUSINESS SOFTWARE NEED
========================================================= */

.bs-need-section {
background: #f8f9fb;
}

.bs-need-list {
margin: 0;
padding: 0;
list-style: none;
}

.bs-need-list li {
position: relative;
margin-bottom: 16px;
padding-left: 32px;
color: #555555;
font-size: 16px;
line-height: 26px;
}

.bs-need-list li:before {
content: "\f00c";
position: absolute;
left: 0;
top: 1px;
color: #f2a900;
font-family: FontAwesome;
font-size: 14px;
}

/* =========================================================
14. HOW WE WORK
========================================================= */

.bs-process-section {
background: #ffffff;
}

.bs-process-card {
position: relative;
min-height: 245px;
margin-bottom: 30px;
padding: 35px 25px;
border: 1px solid #eeeeee;
background: #ffffff;
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}

.bs-process-card:hover {
border-color: rgba(242,169,0,.45);
background: #fffdf7;
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(20,25,40,.07);
}

.bs-process-number {
margin-bottom: 15px;
color: #f2a900;
font-family: 'Oswald', sans-serif;
font-size: 17px;
font-weight: 600;
letter-spacing: 1px;
}

.bs-process-card h3 {
margin: 0 0 12px;
color: #151515;
font-family: 'Oswald', sans-serif;
font-size: 24px;
font-weight: 500;
}

.bs-process-card p {
margin: 0;
color: #747474;
font-size: 15px;
line-height: 26px;
}

/* =========================================================
15. OUTCOMES
========================================================= */

.bs-outcomes-section {
background: #f8f9fb;
}

.bs-outcome {
position: relative;
min-height: 170px;
margin-bottom: 30px;
padding: 30px 25px 30px 85px;
border: 1px solid #e9e9e9;
background: #ffffff;
}

.bs-outcome-icon {
position: absolute;
top: 30px;
left: 25px;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #fff5d9;
color: #f2a900;
font-size: 18px;
}

.bs-outcome h3 {
margin: 0 0 9px;
color: #151515;
font-family: 'Oswald', sans-serif;
font-size: 22px;
}

.bs-outcome p {
margin: 0;
color: #747474;
font-size: 14px;
line-height: 24px;
}

/* =========================================================
16. FINAL CTA
========================================================= */

.bs-final-cta {
padding: 85px 0;
background: #111827;
text-align: center;
}

.bs-final-cta h2 {
margin: 0 0 18px;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 46px;
font-weight: 600;
line-height: 1.15;
}

.bs-final-cta p {
max-width: 720px;
margin: 0 auto 30px;
color: rgba(255,255,255,.72);
font-size: 16px;
line-height: 27px;
}

/* =========================================================
17. CONTACT SCROLL
========================================================= */

#contact,
#contact-section {
scroll-margin-top: 90px;
}

/* =========================================================
18. IMAGE SAFETY
========================================================= */

.bs-intro-section img,
.bs-six-section img,
.bs-solutions-section img,
.bs-transformation-section img,
.bs-ecosystem-section img,
.bs-impact-section img,
.bs-need-section img,
.bs-process-section img,
.bs-outcomes-section img,
.bs-final-cta img {
max-width: 100%;
height: auto;
}

.bs-intro-section .img-responsive,
.bs-six-section .img-responsive,
.bs-solutions-section .img-responsive,
.bs-transformation-section .img-responsive,
.bs-ecosystem-section .img-responsive,
.bs-impact-section .img-responsive,
.bs-need-section .img-responsive,
.bs-process-section .img-responsive,
.bs-outcomes-section .img-responsive,
.bs-final-cta .img-responsive {
width: auto;
max-width: 100%;
height: auto;
object-fit: contain;
}

/* =========================================================
19. TABLET
========================================================= */

@media only screen and (max-width: 991px) {

```
.bs-hero {
    min-height: 560px;
}

.bs-hero h1 {
    font-size: 48px;
}

.bs-intro-content {
    padding-right: 0;
    margin-bottom: 35px;
}

.bs-visual-box {
    min-height: 300px;
}

.bs-info-card,
.bs-solution-card,
.bs-process-card {
    min-height: 0;
}

.bs-transform-arrow {
    min-height: 80px;
    transform: rotate(90deg);
}

.bs-final-cta h2 {
    font-size: 40px;
}
```

}

/* =========================================================
20. MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

```
.bs-intro-section .section-title,
.bs-six-section .section-title,
.bs-solutions-section .section-title,
.bs-transformation-section .section-title,
.bs-ecosystem-section .section-title,
.bs-impact-section .section-title,
.bs-need-section .section-title,
.bs-process-section .section-title,
.bs-outcomes-section .section-title {
    margin-bottom: 40px;
}


/* MOBILE HEADING */

.bs-intro-section .section-title h2,
.bs-six-section .section-title h2,
.bs-solutions-section .section-title h2,
.bs-transformation-section .section-title h2,
.bs-ecosystem-section .section-title h2,
.bs-impact-section .section-title h2,
.bs-need-section .section-title h2,
.bs-process-section .section-title h2,
.bs-outcomes-section .section-title h2 {
    font-size: 34px;
    line-height: 1.15;
}


/* MOBILE DESCRIPTION */

.bs-intro-section .section-title p,
.bs-six-section .section-title p,
.bs-solutions-section .section-title p,
.bs-transformation-section .section-title p,
.bs-ecosystem-section .section-title p,
.bs-impact-section .section-title p,
.bs-need-section .section-title p,
.bs-process-section .section-title p,
.bs-outcomes-section .section-title p {
    max-width: 100%;
    padding: 0;
    font-size: 15px;
    line-height: 25px;
}


/* HERO */

.bs-hero {
    min-height: 500px;
}

.bs-hero h1 {
    font-size: 40px;
}

.bs-hero p {
    font-size: 15px;
    line-height: 26px;
}


/* IMAGE */

.bs-visual-box {
    min-height: 250px;
    padding: 15px;
}

.bs-visual-box img {
    max-height: 320px;
}


/* CARDS */

.bs-info-card,
.bs-solution-card,
.bs-process-card {
    padding: 28px 22px 35px;
}


/* TRANSFORMATION */

.bs-transform-box {
    padding: 30px 25px;
}


/* ECOSYSTEM */

.bs-ecosystem {
    padding: 10px 0;
}

.bs-ecosystem-center {
    width: 145px;
    height: 145px;
}

.bs-ecosystem-center h3 {
    font-size: 19px;
}


/* IMPACT */

.bs-impact-card {
    min-height: 0;
}


/* OUTCOME */

.bs-outcome {
    padding-left: 75px;
}


/* CTA */

.bs-final-cta {
    padding: 65px 20px;
}

.bs-final-cta h2 {
    font-size: 35px;
}

.bs-final-cta p {
    font-size: 15px;
    line-height: 25px;
}
```

}

/* =========================================================
21. SMALL MOBILE
========================================================= */

@media only screen and (max-width: 480px) {

```
.bs-hero {
    min-height: 460px;
}

.bs-hero h1 {
    font-size: 34px;
}

.bs-hero p {
    font-size: 14px;
    line-height: 24px;
}

.bs-intro-section .section-title h2,
.bs-six-section .section-title h2,
.bs-solutions-section .section-title h2,
.bs-transformation-section .section-title h2,
.bs-ecosystem-section .section-title h2,
.bs-impact-section .section-title h2,
.bs-need-section .section-title h2,
.bs-process-section .section-title h2,
.bs-outcomes-section .section-title h2 {
    font-size: 30px;
}

.bs-small-title {
    font-size: 13px;
}

.bs-card-icon {
    width: 55px;
    height: 55px;
    font-size: 22px;
}

.bs-info-card h3,
.bs-solution-card h3 {
    font-size: 22px;
}

.bs-final-cta h2 {
    font-size: 31px;
}

.bs-final-cta .btn_one,
.bs-hero .btn_one {
    padding: 12px 24px;
    font-size: 14px;
}
```

}

/* =========================================================
22. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

```
.bs-info-card,
.bs-solution-card,
.bs-process-card,
.bs-impact-card,
.bs-ecosystem-item,
.bs-card-icon,
.bs-visual-box img,
.bs-final-cta .btn_one,
.bs-hero .btn_one,
.home_video .btn_one {
    transition: none !important;
    transform: none !important;
}
```

}

/* =========================================================
END
========================================================= */