/* ================================================== 
   BTS SHARED HERO SYSTEM 
   Used by About and all inner service pages 
================================================== */


/* ==========================================
   HERO BASE
========================================== */

.about-hero,
.service-hero {

    position: relative;

    width: 100%;

    height: 600px;

    min-height: 600px;

    overflow: hidden;

    color: #ffffff;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}


/* ==========================================
   HERO IMAGES
========================================== */


.aboutus-hero {

    background-image: url("../assets/about-recognition-support.png");
         background-position: 50%;
    height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
    position: relative;
  overflow: hidden;
    
    

}


.service-hero {

    background-image: url("../assets/Access control BTS.png");

}


/* Breathalyser override */

.breathalyser-hero { 
    background-image: url("../assets/breathalyser2.png"); 
    transform: translateY(0); 
    background-position: 10%;
    background-size: cover;
    background-repeat: no-repeat;
}

.breathalyser-hero h1,
.breathalyser-hero p {
    color: #ffffff !important;
}





.contact-hero {

    background-image: url("../assets/BTS Biometric Fingerprint.png");

    transform: translateY(0);

}


.fingerprint-hero {

    background-image: url("../assets/BTS fingerprint reader.png");

    transform: translateY(0);
    

}

/* Fingerprint hero text */
.fingerprint-hero .service-hero-copy h1,
.fingerprint-hero .service-hero-copy p {
  color: #ffffff !important;
}


.facial-hero {

    background-image: url("../assets/BTS\ facial\ readers.png");

    width: 100%;
    min-height: 640px;
    height: 640px;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    position: relative;
    overflow: hidden;
}

.mobile-hero {

    background-image: url("../assets/BTS Mobile Reader 2.png");

    transform: translateY(0);

}


.mobile-hero {

    background-image: url("../assets/BTS Mobile Reader 2.png");
   background-position: 50%;
    transform: translateY(0);

}


.proximity-hero {
    background-image: url("../assets/proxity-cards2.png");
         height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
    position: relative;
  overflow: hidden;
     background-position: 50%;


}
.proximity-hero h1 {
  color: #ffffff !important;
}

.support-hero {
    background-image: url("../assets/Support hero.png");
      position: relative;
  overflow: hidden;

 }

 .rfid-hero {

    background-image: url("../assets/visitors management BTS hereo.png");
   background-position: 70%;
     height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
    position: relative;
  overflow: hidden;


}
.rfid-hero h1 {
  color: #ffffff !important;
}



  .news-hero {

    background-image: url("../assets/news/time\ attendance\ software.png");
     height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
    position: relative;
  overflow: hidden;

 }



   .article-safer-hero {
    background-image: url("../assets/news/Breathalysers workplace.png");
     background-position: 20%;
     height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;

 }




    .payroll-error-hero {

    background-image: url("../assets/news/time\ attendance\ software.png");

     background-position: 20%;
     height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
      position: relative;
  

 }


    .intergrated-breathalyser-hero {

    background-image: url("../assets/news/Breathalysers\ workplace.png");

     background-position: 20%;
     height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
      position: relative;
      width: auto;
 

 }



     .fingerprint-hero {

    background-image: url("../assets/news/Fingerprint\ vs\ Facial\ Recognition.png");

     background-position: 20%;
     height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;

 }

      .article-workplace-breathalyser-hero {

    background-image: url("../assets/news/Breathalysers\ workplace2.png");

     background-position: 20%;
     height: 600px;
    min-height: 640px;
      background-repeat: no-repeat;
      position: relative;
  overflow: hidden;

 }


 
      .payroll-costs-hero {

    background-image: url("../assets/news/Biometric\ payroll.png");
     background-position: 50%;
     height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
      position: relative;
  overflow: hidden;

 }


       .worplace-hero {

    background-image: url("../assets/news/workplace\ breathalyzers.png");
     background-position: 50%;
    height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
    position: relative;
  overflow: hidden;

 }



 

 
       .legal-hero {

    background-image: url("../assets/news/Biometric\ time\ attendance.png");
     background-position: 50%;
    height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
    position: relative;
  overflow: hidden;

 }

 


 
       .switch-hero {

    background-image: url("../assets/news/Biometric\ time\ attendance\ systems.png");
     background-position: 50%;
    height: 600px;
    min-height: 640px;
    overflow: hidden;
    background-repeat: no-repeat;
    position: relative;
  overflow: hidden;

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

.hero-overlay,
.service-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

background: linear-gradient(
    98deg,
         rgba(54, 72, 118, 0.74) 0%,
        rgba(78, 98, 146, 0.42) 58%,
        rgba(255, 255, 255, 0.06) 100%
) !important;
}


/* ==========================================
   HERO CONTENT
========================================== */


.about-hero-shell,
.service-hero-shell {

    position: relative;

    z-index: 3;

    width: calc(100% - 180px);

    max-width: 1400px;

    height: 600px;

    margin: 0 auto;

    display: flex;

    align-items: center;

}



.about-hero-copy,
.service-hero-copy {

    max-width: 720px;

}



/* ==========================================
   HERO HEADINGS
========================================== */


.about-hero-copy h1,
.service-hero-copy h1 {

    max-width: 720px;

    margin: 0 0 24px;

    color: #ffffff;

    font-size: clamp(42px,4vw,60px);

    font-weight: 400;

    line-height: 1.06;

    letter-spacing: -0.04em;
   transform: translateY(70px);

}



/* ==========================================
   HERO TEXT
========================================== */


.about-hero-copy p,
.service-hero-copy p {

    max-width: 650px;

    margin: 0;
    
color: #ffffff !important;

    font-size: 18px;

    line-height: 1.7;
    transform: translateY(50px);

}



/* ==========================================
   BUTTONS
========================================== */


.service-hero-actions {

    margin-top: 30px;

    display: flex;

    align-items: center;

    gap: 28px;
     transform: translateY(20px);

}



.service-text-link {

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

}



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


.site-header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 20;

}



/* ==========================================
   MOBILE
========================================== */


@media(max-width:650px){


    .about-hero,
    .service-hero {

        height: auto;

        min-height: 600px;

    }


    .about-hero-shell,
    .service-hero-shell {

        width: calc(100% - 40px);

        height: auto;

        min-height: 600px;

    }

}