/*==================================================
RESPONSIVE.CSS
American Business Services
==================================================*/


/*==================================================
GLOBAL
==================================================*/

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

html,
body{

    width:100%;
    max-width:100%;
    overflow-x:hidden;

}

img,
video,
svg{

    display:block;

    max-width:100%;
    height:auto;

}

section{

    overflow:hidden;

}

.container,
.hero-container,
.solutions-container,
.industries-container,
.about-container,
.clients-container,
.cta-container,
.footer-container,
.header-inner{

    width:min(92%,1400px);

    margin:0 auto;

}

.btn,
button{

    white-space:nowrap;

}

input,
textarea,
select{

    max-width:100%;

}


/*==================================================
LARGE DESKTOP
1400+
==================================================*/

@media (min-width:1400px){

.container,
.hero-container,
.solutions-container,
.industries-container,
.about-container,
.clients-container,
.cta-container,
.footer-container,
.header-inner{

    width:min(92%,1500px);

}

}


/*==================================================
DESKTOP
1024 - 1399
==================================================*/

@media (min-width:1024px) and (max-width:1399px){

.container,
.hero-container,
.solutions-container,
.industries-container,
.about-container,
.clients-container,
.cta-container,
.footer-container,
.header-inner{

    width:min(94%,1280px);

}

}


/*==================================================
TABLET
768 - 1023
==================================================*/

@media (min-width:768px) and (max-width:1023px){

.container,
.hero-container,
.solutions-container,
.industries-container,
.about-container,
.clients-container,
.cta-container,
.footer-container,
.header-inner{

    width:92%;

}

section{

    padding:90px 0;

}

}


/*==================================================
MOBILE
0 - 767
==================================================*/

@media (max-width:767px){

.container,
.hero-container,
.solutions-container,
.industries-container,
.about-container,
.clients-container,
.cta-container,
.footer-container,
.header-inner{

    width:94%;

}

section{

    padding:70px 0;

}

}


/*==================================================
SMALL PHONES
==================================================*/

@media (max-width:480px){

section{

    padding:60px 0;

}

}

/*==================================================
HEADER
==================================================*/


/*==============================
TABLET
768px - 1023px
==============================*/

@media (min-width:768px) and (max-width:1023px){

.site-header{

    padding:0 24px;

}

.header-inner{

    min-height:82px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

}

.header-branding{

    flex-shrink:0;

}

.brand-logo{

    width:260px;

    height:auto;

}

.site-nav{

    display:flex;

    align-items:center;

    gap:20px;

    font-size:.92rem;

}

.site-nav__link{

    white-space:nowrap;

}

.header-actions{

    display:flex;

    align-items:center;

    gap:16px;

}

.header-cta{

    padding:12px 18px;

    font-size:.9rem;

}

.partner-logo{

    width:90px;

    height:auto;

}

}



/*==============================
PHONE
0px - 767px
==============================*/

@media (max-width:767px){

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    padding:0 18px;

}

.header-inner{

    min-height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.brand-logo{

    width:180px;

    height:auto;

}

.partner-logo{

    width:70px;

    height:auto;

}

.site-nav{

    display:none;

}

.header-cta{

    display:none;

}

.header-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

}



/*==============================
SMALL PHONES
==============================*/

@media (max-width:480px){

.site-header{

    padding:0 14px;

}

.header-inner{

    min-height:66px;

}

.brand-logo{

    width:155px;

}

.partner-logo{

    width:58px;

}

}
/*==================================================
HERO
==================================================*/


/*==============================
TABLET
768px - 1023px
==============================*/

@media (min-width:768px) and (max-width:1023px){

.hero-section{

    padding-top:140px;

    padding-bottom:90px;

    min-height:auto;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr;

    gap:55px;

    align-items:center;

}

.hero-left{

    width:100%;

    max-width:850px;

    margin:0 auto;

    text-align:center;

}

.hero-left h1{

    font-size:3.4rem;

    line-height:1.1;

}

.hero-description{

    max-width:720px;

    margin:28px auto;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.hero-buttons a{

    min-width:220px;

}

.hero-right{

    width:100%;

    display:flex;

    justify-content:center;

}

.tload-panel{

    width:100%;

    max-width:760px;

}

}



/*==============================
PHONE
0px - 767px
==============================*/

@media (max-width:767px){

.hero-section{

    padding-top:105px;

    padding-bottom:70px;

    min-height:auto;

}

.hero-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:40px;

}

.hero-left{

    width:100%;

    text-align:center;

}

.hero-left h1{

    font-size:2.45rem;

    line-height:1.1;

}

.hero-description{

    width:100%;

    margin:24px auto;

    font-size:1rem;

    line-height:1.8;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    gap:14px;

}

.hero-buttons a{

    width:100%;

    max-width:320px;

    text-align:center;

}

.hero-right{

    width:100%;

    display:flex;

    justify-content:center;

}

.tload-panel{

    width:100%;

    max-width:100%;

}

}



/*==============================
SMALL PHONES
==============================*/

@media (max-width:480px){

.hero-section{

    padding-top:90px;

}

.hero-left h1{

    font-size:2rem;

}

.hero-description{

    font-size:.95rem;

}

.hero-buttons a{

    width:100%;

}

}

/*==================================================
TLOAD PANEL
==================================================*/


/*==============================
TABLET
768px - 1023px
==============================*/

@media (min-width:768px) and (max-width:1023px){

.device-row{

    display:grid;

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

    gap:18px;

}

.device-card{

    min-width:0;

    padding:18px;

}

.device-card img{

    width:50px;

    height:50px;

}

.tload-main{

    display:grid;

    grid-template-columns:1fr;

    gap:30px;

    align-items:center;

}

.tload-image{

    display:flex;

    justify-content:center;

}

.tload-image img{

    max-width:420px;

}

.tload-features{

    display:grid;

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

    gap:16px;

}

.feature-card{

    min-height:90px;

}

.posting-section{

    margin-top:28px;

}

.erp-row{

    display:grid;

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

    gap:18px;

}

}



/*==============================
PHONE
0px - 767px
==============================*/

@media (max-width:767px){

.device-row{

    display:grid;

    grid-template-columns:1fr;

    gap:14px;

}

.device-card{

    padding:16px;

    text-align:center;

}

.device-card img{

    width:46px;

    height:46px;

    margin:0 auto 10px;

}

.tload-main{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.tload-image{

    display:flex;

    justify-content:center;

}

.tload-image img{

    width:100%;

    max-width:320px;

}

.tload-features{

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

}

.feature-card{

    padding:16px;

    justify-content:center;

}

.posting-section{

    margin-top:22px;

}

.posting-bar{

    justify-content:center;

    text-align:center;

}

.erp-row{

    display:grid;

    grid-template-columns:1fr;

    gap:14px;

}

.erp-card{

    width:100%;

}

}



/*==============================
SMALL PHONES
==============================*/

@media (max-width:480px){

.device-card{

    padding:14px;

}

.device-card img{

    width:40px;

    height:40px;

}

.tload-image img{

    max-width:260px;

}

.feature-card{

    padding:14px;

}

}

/*==================================================
SOLUTIONS
==================================================*/


/*==============================
TABLET
768px - 1023px
==============================*/

@media (min-width:768px) and (max-width:1023px){

.solutions-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:40px;

}

.solution-card{

    padding:34px;

}

.solution-header{

    display:flex;

    align-items:center;

    gap:22px;

}

.solution-logo{

    width:90px;

    flex-shrink:0;

}

.solution-header h3{

    font-size:2rem;

}

.solution-description{

    margin:26px 0;

}

.solution-media{

    width:100%;

}

.solution-video{

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:18px;

}

.solution-video video{

    width:100%;

    height:100%;

    object-fit:cover;

}

.solution-features{

    display:grid;

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

    gap:16px;

    margin-top:26px;

}

.solution-features div{

    min-height:64px;

    display:flex;

    align-items:center;

}

.download-btn{

    margin:30px auto 0;

}

}



/*==============================
PHONE
0px - 767px
==============================*/

@media (max-width:767px){

.solutions-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:32px;

}

.solution-card{

    padding:24px;

}

.solution-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:16px;

}

.solution-logo{

    width:72px;

}

.solution-header h3{

    font-size:1.7rem;

}

.solution-description{

    text-align:center;

    margin:20px 0;

}

.solution-media{

    width:100%;

}

.solution-video{

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:16px;

}

.solution-video video{

    width:100%;

    height:100%;

    object-fit:cover;

}

.solution-features{

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

    margin-top:22px;

}

.solution-features div{

    min-height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.download-btn{

    width:100%;

    justify-content:center;

    margin-top:24px;

}

}



/*==============================
SMALL PHONES
==============================*/

@media (max-width:480px){

.solution-card{

    padding:20px;

}

.solution-logo{

    width:60px;

}

.solution-header h3{

    font-size:1.45rem;

}

.solution-description{

    font-size:.95rem;

}

.download-btn{

    width:100%;

}

/*==================================================
TMW CLOUD
==================================================*/


/*==============================
TABLET
768px - 1023px
==============================*/

@media (min-width:768px) and (max-width:1023px){

.tmw-platform{

    display:grid;

    grid-template-columns:1fr;

    gap:36px;

    justify-items:center;

}

.tmw-inputs,
.tmw-outputs{

    width:100%;

    display:grid;

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

    gap:16px;

}

.tmw-cloud{

    width:100%;

    max-width:460px;

    margin:auto;

}

.tmw-cloud img{

    max-width:180px;

    margin:auto;

}

.tmw-cloud h4{

    text-align:center;

}

.tmw-cloud ul{

    padding-left:18px;

}

.tmw-source,
.tmw-output{

    min-height:72px;

    padding:16px;

}

.tmw-source img,
.tmw-output img{

    width:30px;

    height:30px;

}

.tmw-access{

    margin-top:24px;

}

.tmw-access-items{

    display:flex;

    justify-content:center;

    gap:22px;

}

.tmw-access-item{

    flex-direction:column;

    text-align:center;

    gap:10px;

}

/* Remove connector lines */

.tmw-source::before,
.tmw-source::after,
.tmw-output::before,
.tmw-output::after{

    display:none;

}

}



/*==============================
PHONE
0px - 767px
==============================*/

@media (max-width:767px){

.tmw-platform{

    display:flex;

    flex-direction:column;

    gap:28px;

    align-items:center;

}

.tmw-inputs{

    width:100%;

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

    order:1;

}

.tmw-cloud{

    width:100%;

    max-width:340px;

    order:2;

}

.tmw-cloud img{

    max-width:160px;

    margin:auto;

}

.tmw-cloud h4{

    text-align:center;

}

.tmw-cloud ul{

    padding-left:20px;

}

.tmw-outputs{

    width:100%;

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

    order:3;

}

.tmw-source,
.tmw-output{

    width:100%;

    min-height:68px;

    padding:14px;

}

.tmw-source img,
.tmw-output img{

    width:26px;

    height:26px;

}

.tmw-access{

    margin-top:22px;

}

.tmw-access-items{

    display:flex;

    justify-content:center;

    gap:18px;

}

.tmw-access-item{

    flex-direction:column;

    gap:8px;

}

.tmw-access-item img{

    width:34px;

    height:34px;

}

/* Remove desktop connector lines */

.tmw-source::before,
.tmw-source::after,
.tmw-output::before,
.tmw-output::after{

    display:none;

}

}



/*==============================
SMALL PHONES
==============================*/

@media (max-width:480px){

.tmw-cloud{

    max-width:280px;

}

.tmw-cloud img{

    max-width:140px;

}

.tmw-cloud h4{

    font-size:1.2rem;

}

.tmw-source,
.tmw-output{

    padding:12px;

}

.tmw-source img,
.tmw-output img{

    width:22px;

    height:22px;

}

.tmw-access-items{

    gap:12px;

}

.tmw-access-item img{

    width:28px;

    height:28px;

}

}

/*==================================================
INDUSTRIES
==================================================*/


/*==============================
TABLET
768px - 1023px
==============================*/

@media (min-width:768px) and (max-width:1023px){

.industry-grid{

    display:grid;

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

    gap:24px;

}

.industry-card{

    width:100%;

}

.industry-image{

    height:220px;

}

.industry-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.industry-content{

    padding:24px;

}

}



/*==============================
PHONE
==============================*/

@media (max-width:767px){

.industry-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:22px;

}

.industry-card{

    width:100%;

}

.industry-image{

    height:190px;

}

.industry-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.industry-content{

    padding:20px;

}

}



/*==================================================
ABOUT
==================================================*/


@media (min-width:768px) and (max-width:1023px){

.about-container{

    display:grid;

    grid-template-columns:1fr;

    gap:55px;

}

.about-left,
.about-right{

    width:100%;

}

.about-left{

    text-align:center;

}

.about-left p{

    max-width:700px;

    margin:25px auto;

}

.stats-grid{

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

    gap:18px;

}

.about-cards{

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

    gap:18px;

}

.timeline{

    display:flex;

    flex-direction:column;

    gap:18px;

}

}



@media (max-width:767px){

.about-container{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.about-left{

    text-align:center;

}

.about-left p{

    width:100%;

}

.stats-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:16px;

}

.about-cards{

    display:grid;

    grid-template-columns:1fr;

    gap:16px;

}

.timeline{

    display:flex;

    flex-direction:column;

    gap:16px;

}

}



/*==================================================
CLIENTS
==================================================*/


@media (min-width:768px) and (max-width:1023px){

.clients-grid{

    display:grid;

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

    gap:20px;

    justify-items:center;

}

.client-card{

    width:100%;

    max-width:220px;

}

.client-card img{

    max-width:140px;

    margin:auto;

}

}



@media (max-width:767px){

.clients-grid{

    display:grid;

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

    gap:18px;

}

.client-card{

    min-height:90px;

}

.client-card img{

    max-width:110px;

    margin:auto;

}

}



@media (max-width:480px){

.clients-grid{

    grid-template-columns:1fr;

}

.client-card{

    max-width:220px;

    margin:auto;

}

}

/*==================================================
CTA
==================================================*/


/*==============================
TABLET
768px - 1023px
==============================*/

@media (min-width:768px) and (max-width:1023px){

.cta-section{

    padding:90px 0;

}

.cta-container{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}

.cta-section h2{

    font-size:3rem;

}

.cta-section p{

    max-width:650px;

    margin:28px auto;

}

.cta-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

}

.cta-actions .btn{

    min-width:220px;

}

.cta-trust{

    display:grid;

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

    gap:18px;

    margin-top:50px;

}

.cta-trust div{

    justify-content:center;

}

}



/*==============================
PHONE
0px - 767px
==============================*/

@media (max-width:767px){

.cta-section{

    padding:70px 0;

}

.cta-container{

    text-align:center;

}

.cta-section h2{

    font-size:2.4rem;

    line-height:1.15;

}

.cta-section p{

    width:100%;

    margin:22px auto;

}

.cta-actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}

.cta-actions .btn{

    width:100%;

    max-width:320px;

}

.cta-trust{

    display:grid;

    grid-template-columns:1fr;

    gap:14px;

    margin-top:40px;

}

.cta-trust div{

    justify-content:center;

}

}



@media (max-width:480px){

.cta-section{

    padding:60px 0;

}

.cta-section h2{

    font-size:2rem;

}

.cta-section p{

    font-size:.95rem;

}

}



/*==================================================
FOOTER
==================================================*/


@media (min-width:768px) and (max-width:1023px){

.footer{

    padding:80px 0 35px;

}

.footer-container{

    display:grid;

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

    gap:40px;

}

.footer-about{

    grid-column:1 / -1;

}

.footer-logo{

    width:210px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

}



@media (max-width:767px){

.footer{

    padding:70px 0 25px;

}

.footer-container{

    display:grid;

    grid-template-columns:1fr;

    gap:35px;

    text-align:center;

}

.footer-about{

    align-items:center;

}

.footer-logo{

    width:180px;

    margin:auto;

}

.footer-social{

    justify-content:center;

}

.footer-column{

    text-align:center;

}

.footer-column a{

    padding-left:0;

}

.footer-bottom{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    text-align:center;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

}



@media (max-width:480px){

.footer{

    padding:60px 0 25px;

}

.footer-logo{

    width:165px;

}

.footer-links{

    gap:12px;

    font-size:.9rem;

}

}


}

/* =========================================================
   GLOBAL HEADER — PREVENT NAVIGATION WRAPPING
   Applies to HOME + SEO pages
   ========================================================= */

@media (min-width: 769px) {

  .header-inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .header-branding {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .site-nav {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .site-nav a,
  .site-nav__link {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .header-cta {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .partner-logo {
    flex: 0 0 auto !important;
  }
}


/* =========================================================
   DESKTOP HEADER SPACING
   ========================================================= */

@media (min-width: 1024px) {

  .header-inner {
    gap: 24px !important;
  }

  .site-nav {
    gap: 30px !important;
  }

  .header-actions {
    gap: 14px !important;
  }
}