*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}




.header{
   
    min-height: 190vh;
    width: 100%;
    background-image: url(IMAGES/Home/background\ 3.jpg) ; 
    background-position:center;
    background-size: cover;
    position: relative;
    
    /*linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)) */
}
/* .background-img{
    padding-left: 25%;
    padding-top: 0%;
    width: 400px;
    size: cover;
} */

.header{
    display: flex;
    padding: 0px;
}
.logo1{
    height: 99.75px;
    width: 221.35px;
    padding-top: 0px;
    padding-left: 10px;
    padding-bottom: 0px;
    text-align: left;
   
}


.logo2{
    position: absolute;
    height: 72px;
    width: 390px;
    padding-top: 0px;
    padding-left: 37%;
    padding-bottom: 0px;
    bottom: 20%;
    cursor: pointer;
    
}

@media(min-width: 1901px){
        .logo2{
            position: absolute;
            left:0%;
            cursor: pointer;
        }
    
}

@media(min-width: 1365px) and (max-width:1900px){
    .logo2{
        position: absolute;
        left:-5%;
    }

}

@media(min-width: 1025px) and (max-width:1364px){
    .logo2{
        position: absolute;
        right:42%;

}
}




.header h1{
    display: flex;
    padding-left: 0px ;
    letter-spacing: 0px;
    word-spacing: 0px;
    font-size: 13px;
    font-weight:bolder;
    color: rgb(0, 46, 98);
}

nav{
    background-color: rgb(255, 255, 255);
    display: flex;
    padding: .5% .5%;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    position: fixed;
    width: 100%;
}
nav img{
    width: 200px;
    padding-left: 2%;

}

.nav-links{
    flex: 1;
    text-align: right;
    padding-right: 30px;
}
.nav-links p{
    color: rgb(0, 46, 98);
    font-weight: 400;
}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 3px;
    position: relative;
    text-decoration: solid;
}

.nav-links ul li a{ 
    color: rgb(0, 46, 98);
    text-decoration: none;
    font-size: 17px;
}

.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(0, 46, 98);
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li:hover::after{
    width: 100%;
}





.email-btn{ 
    color: rgb(0, 46, 98);
    text-decoration: solid;
    font-size: 17px;
    border: 0;
    background-color: white;
    cursor:pointer;
    
}
.email-btn::after{
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(0, 46, 98);
    display: block;
    margin: auto;
    transition: 0.5s;
}
.email-btn:hover::after{
    width: 100%;
}









/*---------- Subheaders --------*/

 .Sub-header-products{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Products/banner.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-products h1{
    text-align: center;
    padding-top: 200px;
    font-size: 50px;
}


.Sub-header-Data-LAN{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Products/Data-LAN/banner.jpg);
    background-position: 0px 0px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-Data-LAN h1{
    text-align: center;
    padding-top: 135px;
    font-size: 50px;
}

.Sub-header-Control-Ins{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Products/Control&Ins/banner.jpg);
    background-position: 0px 20px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}

.Sub-header-Audio-Video{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/Audio&Video/banner.jpg);
    background-position: 0px -40px;
    background-size: contain;
    text-align: center;
    color: aliceblue;
}

.Sub-header-Elevator{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(51, 53, 61, 0.7),rgba(51, 53, 61, 0.7)),url(IMAGES/Products/Elevator/Banner.jpg);
    background-position: 0px -110px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}

.Sub-header-Telephone{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/Telephone/banner.jpg);
    background-position: 0px 20px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-Coax{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/Co-axial/banner.jpg);
    background-position: 0px -40px;
    background-size: contain;
    text-align: center;
    color: aliceblue;
}

.Sub-header-LV-Electrical{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/LV-Electric/banner.jpg);
    background-position: 0px 60px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}


.Sub-header-SAC-BMS{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/SAC&BMS/banner.jpg);
    background-position: 0px 25px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}

.Sub-header-custom{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Products/Custom/banner.jpg);
    background-position: -8px 28px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-custom h1{
    text-align: center;
    padding-top: 200px;
    font-size: 50px;
}



.Sub-header-about{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/AboutUs/banner.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-about h1{
    text-align: center;
    padding-top: 200px;
    font-size: 50px;
}

.Sub-header-webTC{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/WebsiteTC/banner.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-webTC h1{
    text-align: center;
    padding-top: 200px;
    font-size: 50px;
}

.Sub-header-contact{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/ContactUs/banner.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-contact h1{
    text-align: center;
    padding-top: 200px;
    font-size: 50px;
}


.Sub-header-enquiries{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Enquiries/banner.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}

.Sub-header-enquiries h1{
    text-align: center;
    padding-top: 200px;
    font-size: 50px;
}

@media (min-width:990px) and (max-width:1024px) {
    .Sub-header-products h1{
        text-align: center;
        padding-top: 130px;
        font-size: 50px;
    }

    .Sub-header-about h1{
        text-align: center;
        padding-top: 130px;
        font-size: 50px;
    }

    .Sub-header-contact h1{
        text-align: center;
        padding-top: 130px;
        font-size: 50px;
    }

    .Sub-header-enquiries h1{
        text-align: center;
        padding-top:130px;
        font-size: 50px;
    }
    
} 


/*---------- about --------*/

.about-us{
    width: 80%;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 50px;
    font-weight: 500;
    color: black;
    
   

}

.about-col{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    flex-basis: 78%;
    padding: 20px 2px;
   

}

.about-col p{
    display: flex;
    flex-basis: 100%;
    padding: 30px 2px;
    float: left;
    text-align:justify;

}

.about-col2 p{
    display: flex;
    z-index: -1;
    position: relative;
    top: -15px;
    text-align: justify;

}


.about-col-img{
    display: inline-flex;
    height: 47vh;
    width: 75vh;
    padding-top: 30px;
    padding-left: 50px;
    padding-bottom: 15px;

   

}
.about-col-img1{
    display: none;
}

@media (min-width: 1025px) and (max-width:1366px){
    .about-col-img{
        height: auto;

    }

    .about-col p{
        display: flex;
        flex-basis: 100%;
        padding: 30px 2px;
        float: left;
        text-wrap:wrap;
        text-align:justify;
        z-index: -1;
    
    }
}




/*------- Website Terms and Conditions ---------*/

.websiteTC{
    width: 80%;
    margin: auto;
    padding-top: 40px;
    padding-bottom: 50px;
    font-weight: 500;
    color: black;
    text-align:justify;
   

}



/*--------Contact us----------*/

.location{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 90%;
    margin: auto;
    padding: 50px 0;
    
}


.location1 iframe{
    display: flex;
    width: 100%;
    padding-left: 0px;
    height: 75vh;
}

.map{
    max-width: 100%;
    height: 75vh;
    
    padding-left: 10%;
   
}

.contact-us{
    width: 12px;
    margin: 4%;
    margin-top: -40px;

}


.contact-col{
    display: flex;
    flex-basis: 48%;
    margin-bottom: 30;
    font-size: 20px;
    
    
    
}

.contact-col div{
    margin-bottom: 10px;
    margin-left: 20%;
    padding: 200%;
    left: 50%;
    
}

.contact-col div .fa{
    font-size: 28px;
    color: rgb(0, 46, 98);
    margin: auto;
}

.contact-col .contact-address{
    text-align:start ;
    min-width:370px;
   
    
}

.contact-col div p{
    padding: 0;
    font-size: 15px;
    margin-bottom: 5px;
    color: black;
    font-weight: 400;
    
    
}

.contact-p{
    white-space: nowrap;
}




/*------ Products -----*/


.products{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 22px;
    text-align: center;
    padding-top:30px;
    
    
}


/*----    .column1{

    padding-top: 0px;
    float: left;
    text-align: center;
    
    
}

.column2{
    padding-top: 0px;
    float: left;
    text-align: center;
}

.column3{
    padding-top: 0px;
    float: left;
    text-align: center;
}

.column1,.column2,.column3,.column4{
    display: relative;
    width: 100%;
    position: relative;
    right: 30px;
    padding-right: 10px;
    padding-top: 20px;
    float: left;
    text-align: left;
}



.column4{
    padding-top: 20px;
    float: left;
    text-align: center;
}

.column5{
    position: relative;
    padding-top: 0px;
    float: left;
    text-align: center;
    left: 540px;
    bottom: 130px;
}
 -----*/



.products a{
    display: flex;
    justify-content: center;
    margin-left: 6vh ;
    align-items: center;
    margin-top: 10px;
    
}

  .products a {
  padding: 7px;
  background-color: aliceblue;
  border: 0 solid rgb(0, 46, 98) ;
  border-radius: 4rem;
  margin-bottom: 50px;
  box-sizing:content-box;
  color: black;
  cursor: pointer;
  font-weight: 800;
  line-height: 2;
  text-align: center;
  text-decoration: none #0d172a solid;
  text-decoration-thickness:auto;
  white-space: nowrap;

  
  
}


.products a:hover {
  background-color: rgb(0, 46, 98);
  color: #fff;
}  

.products-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position:absolute;
    top: 150%;
    
}


@media (min-width:1920px){
    .products{
        padding-left: 2%;
    }
}

@media (min-width:1366px) and (max-width:1445px){
    .products{
        font-size: 19px;
    }
    .column1,.column2,.column3,.column4{
        display: relative;
        position: relative;
        right: 30px;
        padding-right: 0px;
        padding-top: 20px;
        float: left;
        text-align: left;
        margin: 0;
    }
    .products a {
        padding: 4px;

}
}

@media (min-width:824px) and (max-width:1365px){
   
     .products{
        font-size: 19px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        
    } 

    .column4{
        position: relative;
        display: inline;
        display: table-row;
    }
    .products a {
        padding: 4px;
        margin-left: 6vh;
   
    }

    .products-foot{
        top: 130%;
    }

    
}



/*----- Data/LAN ----*/

.Data-LAN{
   min-height: 100vh;
   position:absolute;
   z-index: -1;
   margin: 0px;
   padding-top:10px;
   padding-left: 25px;
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-column-gap: 60px;
   grid-row-gap: 20px ;
   
}

 .Data-LAN-title{
    position: relative;
    text-align: center;
    padding-top: 20px;
    z-index: -1;
    color: rgb(0, 46, 98);
    letter-spacing: 2px;
 }

.Data-LAN div{
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 100%;
    padding: 10px;
    margin:auto;
    text-align: center;
}

.Data-LAN button{
    position: relative;
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: rgb(0, 46, 98);
    text-align: center;
    cursor:pointer;
    width: 100%;
    font-size: 18px;
    
}

.Data-LAN button:hover {
    background-color: rgb(0, 80, 172);
    color: #fff;
}


.Data-LAN img{
    position:relative;
    width: 300px;
    height: 100px;
    cursor: zoom-in;
}

.Data-LAN img:active{
    position:absolute;
    margin: auto;
    transform: transition 0.5 ease;
    transform: scale(2.5);
    z-index: 2;
} 

.Data-LAN .cat6AU-img:active{
    position:absolute;
    margin: auto;
    transform: transition 0.5 ease;
    transform: scale(2.5);
    translate: -120%;
    z-index: 2;
} 

.Data-LAN .cat7-img:active{
    position:absolute;
    margin: auto;
    transform: transition 0.5 ease;
    transform: scale(2.5);
    translate: -120%;
    z-index: 2;
} 

.Data-LAN .RS485-img:active{
    position:absolute;
    margin: auto;
    transform: transition 0.5 ease;
    transform: scale(2.5);
    translate: -120%;
    z-index: 2;
} 

.Data-LAN-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position: absolute;
    top: 270%;
    z-index: -1;
   

   
    
}

@media (min-width:1400px) and (max-width:1900px){
    .Data-LAN{
        grid-column-gap:30px ;
    }

}

@media (min-width:1000px) and (max-width:1399px){
    .Data-LAN{
        grid-template-columns: repeat(3,1fr);
        column-gap:30px ;
        row-gap: 20px ;
        padding-right: 2%;
    }

    .Data-LAN .cat6SF-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -120%;
        z-index: 2;
    } 

    .Data-LAN .cat6AF-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -120%;
        z-index: 2;
    } 

    .Data-LAN .cat7O-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -120%;
        z-index: 2;
    } 
    

    .Data-LAN .cat3U-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -120%;
        z-index: 2;
    } 

    .Data-LAN .POE-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: 0%;
        z-index: 2;
    } 

    .Data-LAN .cat6AU-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: 0%;
        z-index: 2;
    } 

    .Data-LAN .cat5EU-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -120%;
        z-index: 2;
    } 

    .Data-LAN .cat7A-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -120%;
        z-index: 2;
    } 
    .Data-LAN-foot{
        top: 340%;
        z-index: -1;
    }

}

/*------ Control and Instrumentation -------*/

.Control-Ins{
    position:absolute;
    z-index: -1;
    margin: 0px;
    padding-top: 10px;
    padding-left: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 60px;
    grid-row-gap: 20px ;
    
 }
 .Control-Ins-title{
    text-align: center;
    position: relative;
    padding-top: 20px;
    z-index: -1;
    color: rgb(0, 46, 98);
    letter-spacing: 2px;
 }
 
 .Control-Ins div{
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     max-width: 100%;
     padding: 10px;
     margin: auto;
     text-align: center;
 }
 
 .Control-Ins button{
     position: relative;
     border: none;
     outline: 0;
     padding: 12px;
     color: white;
     background-color: rgb(0, 46, 98);
     text-align: center;
     cursor:pointer;
     width: 100%;
     font-size: 18px;
     
 }
 
 .Control-Ins button:hover {
     background-color: rgb(0, 80, 172);
     color: #fff;
 }
 
 
 .Control-Ins img{
     position: relative;
     width: 300px;
    height: 100px;
     cursor: zoom-in;
 }
 
 
 .Control-Ins img:active{
    position: absolute;
     transform: transition 0.5 ease;
     transform: scale(2.5);
     z-index: 2;
 }
 .Control-Ins-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position:absolute;
    top: 100%;
    z-index: -1;
     
 }

 @media (min-width:1000px) and (max-width:1399px){
    .Control-Ins .BS5308-p2-img:active{
        position: absolute;
         transform: transition 0.5 ease;
         transform: scale(1.8);
         z-index: 2;
    }
 }
 @media (min-width:1000px) and (max-width:1399px){
    .Control-Ins .BS5308-p2-img:active{
        position: absolute;
         transform: transition 0.5 ease;
         transform: scale(1.8);
         z-index: 2;
     }


 }

/*------ Elevator Travelling Cable -------*/

.Elevator{
    position:absolute;
    z-index: -1;
    margin: 0px;
    padding-top: 10px;
    padding-left: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 60px;
    grid-row-gap: 20px ;
    
}
.Elevator-title{
    text-align: center;
    position: relative;
    padding-top: 20px;
    z-index: -1;
    color: rgb(0, 46, 98);
    letter-spacing: 2px;
 }
 
.Elevator div{
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     max-width: 100%;
     padding: 10px;
     margin: auto;
     text-align: center;
 }
 
.Elevator button{
     position: relative;
     border: none;
     outline: 0;
     padding: 12px;
     color: white;
     background-color: rgb(0, 46, 98);
     text-align: center;
     cursor:pointer;
     width: 100%;
     font-size: 18px;
     
 }
 
.Elevator button:hover {
     background-color: rgb(0, 80, 172);
     color: #fff;
 }
 
 
.Elevator img{
     position: relative;
     width: 300px;
    height: 100px;
     cursor: zoom-in;
 }
 
 
 .Elevator img:active{
    position: absolute;
     transform: transition 0.5 ease;
     transform: scale(2.5);
     z-index: 2;
 }

.Elevator .Elevator-CAT7-SF-img:active{
    position:absolute;
    margin: auto;
    transform: transition 0.5 ease;
    transform: scale(2.5);
    translate: -120%;
    z-index: 2;
} 
 .Elevator-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position:absolute;
    top: 140%;
    z-index: -1;
     
 }

 @media (min-width:1400px) and (max-width:1900px){
    .Elevator{
        grid-column-gap:30px ;
    }

}

@media (min-width:1000px) and (max-width:1399px){
    .Elevator{
        grid-template-columns: repeat(3,1fr);
        column-gap:30px ;
        row-gap: 20px ;
        padding-right: 2%;
    }

    .Elevator .Elevator-CAT7-SF-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: 0%;
        z-index: 2;
    } 
    .Elevator .Elevator-CAT6A-SF-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -120%;
        z-index: 2;
    } 
 
}


 /*-----Audio and Video ----*/

 
.Audio-Video{
    position:absolute;
    z-index: -1;
    margin: 0px;
    padding-top: 10px;
    padding-left: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 60px;
    grid-row-gap: 20px ;
    
 }
 .Audio-Video-title{
    position: relative;
    text-align: center;
    padding-top: 20px;
    z-index: -1;
    color: rgb(0, 46, 98);
    letter-spacing: 2px;
 }
 
 .Audio-Video div{
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     max-width: 100%;
     padding: 10px;
     margin: auto;
     text-align: center;
 }
 
 .Audio-Video button{
     position: relative;
     border: none;
     outline: 0;
     padding: 12px;
     color: white;
     background-color: rgb(0, 46, 98);
     text-align: center;
     cursor:pointer;
     width: 100%;
     font-size: 18px;
     
 }
 
 .Audio-Video button:hover {
     background-color: rgb(0, 80, 172);
     color: #fff;
 }
 
 
 .Audio-Video img{
     position: relative;
     width: 300px;
     height: 100px;
     cursor: zoom-in;
 }
 
 
 .Audio-Video img:active{
    position: absolute;
     transform: transition 0.5 ease;
     transform: scale(2.5);
     z-index: 2;
 }

 .Audio-Video .Media-auto-img:active{
    position: absolute;
     transform: transition 0.5 ease;
     transform: scale(2.5);
     translate: -125%;
     z-index: 2;
 }
 .Audio-Video-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position: absolute;
    top: 160%;
     
 }

 @media (min-width:1000px) and (max-width:1499px){
    .Audio-Video{
        grid-template-columns: repeat(3,1fr);
        column-gap:30px ;
        row-gap: 40px ;
        padding-right: 2%;
    }

    .Audio-Video .Speaker-RBT-img:active{
        position: absolute;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: -120%;
         z-index: 2;
     }

     .Audio-Video .VGA-img:active{
        position: absolute;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: -120%;
         z-index: 2;
     }
     .Audio-Video .Media-auto-img:active{
        position: absolute;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: 0%;
         z-index: 2;
     }
}

/*------ Telephone -----*/

 
.Telephone{
    position:absolute;
    z-index: -1;
    margin: 0px;
    padding-top: 10px;
    padding-left: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 60px;
    grid-row-gap: 20px ;
    
 }
 .Telephone-title{
    position: relative;
    text-align: center;
    padding-top: 20px;
    z-index: -1;
    color: rgb(0, 46, 98);
    letter-spacing: 2px;
 }
 
 .Telephone div{
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     max-width: 100%;
     padding: 10px;
     margin: auto;
     text-align: center;
 }
 
 .Telephone button{
     position: relative;
     border: none;
     outline: 0;
     padding: 12px;
     color: white;
     background-color: rgb(0, 46, 98);
     text-align: center;
     cursor:pointer;
     width: 100%;
     font-size: 18px;
     
 }
 
 .Telephone button:hover {
     background-color: rgb(0, 80, 172);
     color: #fff;
 }
 
 
 .Telephone img{
     position: relative;
     width: 300px;
     height: 100px;
     cursor: zoom-in;
 }
 
 
 .Telephone img:active{
    position: absolute;
    margin: auto;
     transform: transition 0.5 ease;
     transform: scale(2.5);
     z-index: 2;
 }

 .Telephone .Drop-wire-img:active{
    position: absolute;
     transform: transition 0.5 ease;
     transform: scale(2.5);
     translate: -125%;
     z-index: 2;
 }
 .Telephone-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position: absolute;
    top: 150%;
     
 }

 @media (min-width:1000px) and (max-width:1499px){
    .Telephone{
        grid-template-columns: repeat(3,1fr);
        column-gap:30px ;
        row-gap: 20px ;
        padding-right: 2%;
    }

    .Telephone .Drop-wire-img:active{
        position: absolute;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: 0%;
         z-index: 2;
     }

     .Telephone .CCP-LAP-T-img:active{
        position: absolute;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: -125%;
         z-index: 2;
     }
     .Telephone .FC-line-img:active{
        position: absolute;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: -125%;
         z-index: 2;
     }
}

/*------ Co-axial Cables -------*/

 
.Coax{
    position:absolute;
    z-index: -1;
    margin: 0px;
    padding-top: 10px;
    padding-left: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 60px;
    grid-row-gap: 20px ;
    
 }
 .Coax-title{
    position: relative;
    text-align: center;
    padding-top: 20px;
    z-index: -1;
    color: rgb(0, 46, 98);
    letter-spacing: 2px;
 }
 
 .Coax div{
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     max-width: 100%;
     padding: 10px;
     margin: auto;
     text-align: center;
 }
 
 .Coax button{
     position: relative;
     border: none;
     outline: 0;
     padding: 12px;
     color: white;
     background-color: rgb(0, 46, 98);
     text-align: center;
     cursor:pointer;
     width: 100%;
     font-size: 18px;
     
 }
 
 .Coax button:hover {
     background-color: rgb(0, 80, 172);
     color: #fff;
 }
 
 
 .Coax img{
     position: relative;
     width: 300px;
     height: 100px;
     cursor: zoom-in;
 }
 
 
 .Coax img:active{
    position: absolute;
    margin: auto;
     transform: transition 0.5 ease;
     transform: scale(2.5);
     z-index: 2;
 }

 .Coax .RG59-img:active{
    position: absolute;
    margin: auto;
     transform: transition 0.5 ease;
     transform: scale(2.5);
     translate: -120%;
     z-index: 2;
 }

 
 .Coax .BT3002-img:active{
    position: absolute;
    margin: auto;
     transform: transition 0.5 ease;
     transform: scale(2.5);
     translate: -120%;
     z-index: 2;
 }

 .Coax-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position: absolute;
    top: 145%;
     
 }

 @media (min-width:1000px) and (max-width:1499px){
    .Coax{
        grid-template-columns: repeat(3,1fr);
        column-gap:30px ;
        row-gap: 20px ;
        padding-right: 2%;
    }

    .Coax .RG59-img:active{
        position: absolute;
        margin: auto;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: 0%;
         z-index: 2;
     }
    
     
     .Coax .BT3002-img:active{
        position: absolute;
        margin: auto;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: 0%;
         z-index: 2;
     }

     .Coax .RG6-img:active{
        position: absolute;
        margin: auto;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: -120%;
         z-index: 2;
     }
    
     
     .Coax .RG11-img:active{
        position: absolute;
        margin: auto;
         transform: transition 0.5 ease;
         transform: scale(2.5);
         translate: -120%;
         z-index: 2;
     }
     
    .Coax-foot{
        top:190%;
    }
}

/*------ Lov Voltage Electrical ----*/

 
.LV-Electrical{
    position:absolute;
    z-index: -1;
    margin: 0px;
    padding-top: 10px;
    padding-left: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 60px;
    grid-row-gap: 20px ;
    
 }
 .LV-Electrical-title{
    position: relative;
    text-align: center;
    padding-top: 20px;
    z-index: -1;
    color: rgb(0, 46, 98);
    letter-spacing: 2px;
 }
 
 .LV-Electrical div{
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     max-width: 100%;
     padding: 10px;
     margin: auto;
     text-align: center;
 }
 
 .LV-Electrical button{
     position: relative;
     border: none;
     outline: 0;
     padding: 12px;
     color: white;
     background-color: rgb(0, 46, 98);
     text-align: center;
     cursor:pointer;
     width: 100%;
     font-size: 18px;
     
 }
 
 .LV-Electrical button:hover {
     background-color: rgb(0, 80, 172);
     color: #fff;
 }
 
 
 .LV-Electrical img{
     position: relative;
     width: 300px;
     height: 100px;
     cursor: zoom-in;
 }
 
 
 .LV-Electrical img:active{
    position: absolute;
    transform: transition 0.5 ease;
    transform: scale(2.5);
    z-index: 2;
 }

 .LV-Electrical .Flat-twin-img:active{
    position: absolute;
    transform: transition 0.5 ease;
    transform: scale(2.5);
    translate: -130%;
    z-index: 2;
 }
 .LV-Electrical-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position: absolute;
    top: 140%;
     
 }

 @media (min-width:1000px) and (max-width:1499px){
    .LV-Electrical{
        grid-template-columns: repeat(3,1fr);
        column-gap:30px ;
        row-gap: 20px ;
        padding-right: 2%;
    }

    .LV-Electrical .Flat-twin-img:active{
        position: absolute;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: 0%;
        z-index: 2;
     }

     .LV-Electrical .Flexible-img:active{
        position: absolute;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -130%;
        z-index: 2;
     }
}

/*------ Access Control, Security and BMS -----*/

 
.SAC-BMS{
    position:absolute;
    z-index: -1;
    margin: 0;
    padding-top: 10px;
    padding-left: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 60px;
    grid-row-gap: 20px ;
    
 }
 .SAC-BMS-title{
    position: relative;
    text-align: center;
    padding-top: 20px;
    z-index: -1;
    color: rgb(0, 46, 98);
    letter-spacing: 2px;
 }
 
 .SAC-BMS div{
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     max-width: 100%;
     padding: 10px;
     margin: auto;
     text-align: center;
 }
 
 .SAC-BMS button{
     position: relative;
     border: none;
     outline: 0;
     padding: 12px;
     color: white;
     background-color: rgb(0, 46, 98);
     text-align: center;
     cursor:pointer;
     width: 100%;
     font-size: 18px;
     
 }
 
 .SAC-BMS button:hover {
     background-color: rgb(0, 80, 172);
     color: #fff;
 }
 
 
 .SAC-BMS img{
     position: relative;
     width: 300px;
     height: 100px;
     cursor: zoom-in;
 }
 
 
 .SAC-BMS img:active{
    position: absolute;
    transform: transition 0.5 ease;
    transform: scale(2.5);
    z-index: 2;
 }

 .SAC-BMS .security-img:active{
    position: absolute;
    transform: transition 0.5 ease;
    transform: scale(2.5);
    translate: -130%;
    z-index: 2;
 }


 .SAC-BMS-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position: absolute;
    top: 170%;
     
 }

 @media (min-width:1000px) and (max-width:1499px){
    .SAC-BMS{
        grid-template-columns: repeat(3,1fr);
        column-gap:30px ;
        row-gap: 20px ;
        padding-right: 2%;
    }
    
    .SAC-BMS .security-img:active{
        position: absolute;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: 0%;
        z-index: 2;
    }

    .SAC-BMS .Multi-Comp-img:active{
        position: absolute;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -120%;
        z-index: 2;
    }
    .SAC-BMS .MultiC-US-img:active{
        position: absolute;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: -120%;
        z-index: 2;
    }

}


/*------- Custom/OEM -------- */


.custom-text{
    width: 90%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 0px;
    font-size: 18px;
    text-align: justify;
    font-weight: 500;
    color: black;
   

}

.custom-images{
   
    position:absolute;
    z-index: -1;
    margin: 0px;
    padding-top:0px;
    padding-left: 0px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 30px;
    grid-row-gap: 20px ;
    
    
 }

 .custom-images div{
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 100%;
    padding: 10px;
    margin:auto;
    text-align: center;
}

.custom-images img{
    position: relative;
    width: 300px;
    height: 150px;
}

.custom-foot{
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
    position:absolute;
    top: 200%;
    
}

@media (min-width:1024px) and (max-width:1367px){
    .custom-images{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        position: absolute;
        column-gap: 10%;
       
    }

    .custom-foot{
        top:250%;
    }
    
}

@media (min-width:1368px) and (max-width:1499px){
    .custom-images{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        position: absolute;
        column-gap: 10%;
       
    }

    .custom-foot{
        top:200%;
    }
    
}

/*---- Other Products button ---*/


.other-products button{
    position: relative;
    border: none;
    outline: 0;
    padding: 12px;
    color: rgb(0, 46, 98) ;
    background-color:white;
    text-align: center;
    cursor:pointer;
    width: 100%;
    font-size: 19px;
    font-weight: bold;
    z-index: -1;
    
}






/*------ enquiries -----*/

.enquiries{
    position: relative;
    padding-top: 10%;
    text-align: center;
    padding-bottom: 50px;
    z-index: -1;
   
}

.enquiries p{
    text-align: center;
    color: rgb(0, 46, 98);
}

.enquiries input{
    padding-left: 30px;
    margin: 5px;
    height: 50px;
    width: 1000px;
    outline: none;
    border: 1px solid #ccc;
    position: relative; 
    
}

.enquiries textarea{
    padding-left: 30px;
    margin: 5px;
    height: 500px;
    width: 1000px;
    position: relative;
  
    
}
input.checkbox{
    position: relative;
    right: 255px;
    width: 25px;
    height: 25px;
    color: rgb(0, 46, 98);
    text-decoration-color: rgb(0, 46, 98);
}

.datacollect{
    font-size: 15px;
    text-decoration-color: rgb(0, 46, 98);
    color: rgb(0, 46, 98);
}
.datalabel{
    font-size: 16px;

    text-decoration-color: rgb(0, 46, 98);
    color: rgb(0, 46, 98);
    position: relative;
    right: 250px;
    bottom: 5px;
}
.hero-btn2{
    display: inline-block;
    text-decoration: none;
    color: aliceblue;
    border: 1px solid aliceblue ;
    padding: 12px 34px;
    font-size: 15px;
    background: #000 ;
    position: relative;
    cursor: pointer;
   
    

}

.hero-btn2:hover{
    border: 1px solid aliceblue;
    background:rgb(0, 46, 98);
    transition: 0.2s;
}

@media (min-width:1024px) and (max-width:1365px){
    .enquiries{
        padding-top: 20%;
    }
}

@media (min-width:1366px) and (max-width:1465px){
    .enquiries{
        padding-top: 15%;
    }
}

@media (min-width:1466px){
    .enquiries{
        padding-top: 18%;
    }
}


/*------ footer ------*/

.foot{
    display: flex;
    position: fixed;
    bottom: 30px;
    margin-top: auto;
}

.foot-btns{
    position: relative;
    bottom: 0px;
    display:flex;
    flex-direction: row;
   
    margin-top: 5px;
    margin-bottom: 5px;
    justify-content: center;
    gap: 5px;
} 

.foot-logos{
    position: absolute;
    text-align: center;
    align-items: center;
    justify-content: center;
    bottom: 0;
}
.foot-logos img {
    
    margin: auto;
    width: 10%;
    height: auto;
    padding-right: 4%;
   
}
.copyright{
    text-align:center ;
    
    
}


  
.footer-distributed {

    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 30px;
    border-top: rgb(0, 46, 98);
    border-top-style: solid;
  }
  
  .footer-left,
  .footer-center,
  .footer-right{
    display: inline-block;
    vertical-align: top;
  }
  
  /* Footer left */
  
  .footer-left {
    width: 40%;
  }
  
  /* The company logo */
  
  .footer-left img{
    width: 35%;
  }
  
  
  /* Footer links */
  
  .footer-links{
    color:  rgb(0, 46, 98);
    margin: 20px 0 12px;
    padding: 0;
  }
  
   .footer-links a{
    display:inline-block;
    line-height: 1.8;
    font-weight:400;
    text-decoration: none;
    color:  inherit;
  }
   .footer-links a::after{
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(0, 46, 98);
    display: block;
    margin: auto;
    transition: 0.5s;
    }
    .footer-links a:hover::after{
    width: 100%;
    }
  
  .footer-company-name{
    color:  rgb(0, 46, 98);
    font-size: 14px;
    font-weight: normal;
    margin: 0;
  }
  
  /* Footer Center */
  
   .footer-center{
    width: 35%;
  }
  
   .footer-center i{
    background-color:  rgb(0, 46, 98);
    color: white;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
  }
  
   .footer-center i.fa-envelope{
    font-size: 17px;
    line-height: 38px;
  }
  
   .footer-center p{
    display: inline-block;
    color: rgb(0, 46, 98);
    font-weight:400;
    vertical-align: middle;
    margin:0;
    font-size: 16px;
  }
  
   .footer-center p span{
    display:block;
    font-weight: normal;
    font-size:16px;
    line-height:2;
  }
  
  .footer-center p a{
    color: rgb(0, 46, 98);
    text-decoration: none;;
    font-size: 16px;
  }
  
   .footer-links a:before {
    content: "|";
    font-weight:300;
    font-size: 20px;
    left: 0;
    color: #fff;
    display: inline-block;
    padding-right: 5px;
  }
  
   .footer-links .link-1:before {
    content: none;
  }
  
  /* Footer Right */
  
  .footer-right{
    width: 20%;
    text-wrap:nowrap;
    padding-top: 34px;
  }

  .footer-right a{
    color: rgb(0, 46, 98);
  }
  
  .footer-company-about{
    line-height:25px;
    color:  rgb(0, 46, 98);
    font-size: 15px;
    font-weight: normal;
    margin: 0;
  }
  
  .footer-company-about h4{
    display: block;
    color:  rgb(0, 46, 98);
    font-size: 10px;
    margin-top: 5px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .footer-icons{
    margin-top: 25px;
  }
  
  .footer-icons img{
    display: inline-block;
    width: auto;
    height: 56px;
    cursor: pointer;
    background-color: white;
    border-radius: 2px;
  
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;
  
    margin-right: 0px;
    margin-bottom: 5px;
  }
  
  /* If you don't want the footer to be responsive, remove these media queries */
  
  @media (max-width: 988px) {
  
    .footer-distributed{
      font: bold 14px sans-serif;
    }
  
    .footer-left,
    .footer-center,
    .footer-right{
      display: block;
      width: 100%;
      margin-bottom: 40px;
      text-align: center;
    }
  
    .footer-center i{
      margin-left: 0;
    }
  
  }


/*-------   ---------*/

.text-box{
    display: none;
}

nav .fa{
    display: none;
}
.logo-mobile{
    display: none;
}

.br-mobile{
    display: none;
}



@media (max-width: 988px){
    .header{
        background-image: /* linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)), */ url(IMAGES/Home/mobile\ background.jpg);
        min-height: 100vh;
        background-size: cover;
        background-size: 100% 100% ; 
        background-repeat: no-repeat ; 
        z-index: 1000;
        
      
    } 


    .br-mobile{
        display:flex;
    }
    .logo1, .logo2{
        display: none;
    }
    
    .logo-mobile{
        display: flex;
        height:50px;
        width: 320px;
        padding-left: 0px;
        padding-bottom: 3px;
        padding-top: 3px;

    }
    
    .phone-email{
        display: none;

    }
        

    .nav-links ul li{
        display: block;
        
        
    } 
    .nav-links ul li a{
        color: aliceblue;
        
        
        
    } 
    .nav-links{
        position: absolute;
        background: rgb(0, 46, 98);
        height: 100vh;
        width: 200px;
        top: 0;
        left: -240px;
        text-align: left;
        
        transition: 1s;    
    }
    nav .fa{
        display: block;
        color: aliceblue;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
        
    }
    nav .fa-bars{
        color: rgb(0, 46, 98);
        
    
    }
    .nav-links{
        padding: 10px;
        
    }

    .about-col{
        position: relative;
        z-index: -1;
        display: flex;
    }
    .about-col2 p{
        position: relative;
        padding-top: 0%;
        z-index: -1;
        display: flex;
        
    }
    /* .about-col-img{
        display: none;
    }
    .about-col-img1{
        display: none;
    } */


    .contact-col {
        flex-direction: column;
        text-wrap:nowrap;
        
    }
    .contact-address{
       
        text-wrap: wrap;
    }

    .location{
       display: block;
        
    }
    .location1 iframe{
        padding: 0;
        width: 100%;
        padding-bottom: 5vh;

    }
    .map{
        padding-left: 0;
        width: 100%;
        height: 55vh;
    }
    

    .enquiries{
        position: relative;
        margin: auto;
        align-items: center;
        justify-content: center;
        width: 300px;
        padding-top: 75%;
        text-align: center;
    }

    .enquiries input, .enquiries textarea{
        position: relative;
        align-items: center;
        justify-content: center;
        width: 300px;
    
    }
    input.checkbox{
        position: relative;
        right: 0px;
        width: 25px;
        height: 25px;
        color: rgb(0, 46, 98);
        text-decoration-color: rgb(0, 46, 98);
    }
    
    .datacollect{
        font-size: 15px;
        text-decoration-color: rgb(0, 46, 98);
        color: rgb(0, 46, 98);
    }
    .datalabel{
        font-size: 16px;
    
        text-decoration-color: rgb(0, 46, 98);
        color: rgb(0, 46, 98);
        position: relative;
        left: 10px;
        bottom: 5px;
    }
    .enquiries-foot{
        position: absolute;
        z-index: -1;
        top: 1400px;
    }
    .foot-btns{
        display: flex;
        margin-bottom: 5px;
        justify-content: center;
        gap: 5px;
    }
    
    .foot-img{
        width: 100%;
        height: 130px;
        
    }
    
    .products{
        align-content: left;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        flex-wrap: wrap;
        justify-content: space-between;
        font-size: 23px;
        text-align: center;
        padding-top:20px;
        position: absolute;
        margin-right: auto;
        z-index: -1;
        
    }

    .products a{
        font-size: 1rem;
        padding: 1rem 1rem;
      }
    .products-foot{
        position: absolute;
        top: 1600px;
        z-index: -1;
    } 

   
    .Data-LAN-title{
        display: none;
        padding-top: 0;
    }

    .Sub-header-Data-LAN{
        height: 10vh;
        background-image: none;
        
    }
    .Data-LAN{
        min-height: 100vh;
        padding-top: 0;
        padding-left: 25px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
        
     }
     .Data-LAN-foot{
        position: absolute;
        top:4100px;
        z-index: -1;

    }

    .Coax-title{
        display: none;
    }

    .Sub-header-Coax{
        height: 10vh;
        background-image: none;
    }
    .Coax{
        min-height: 100vh;
        margin-left: 25px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
    
   
        
     }
     .Coax-foot{
        position: absolute;
        top: 2400px;
        z-index: -1;

    }

    .SAC-BMS-title{
        display: none;
    }

    .Sub-header-SAC-BMS{
        height: 10vh;
        background-image: none;
    }
    .SAC-BMS{
        top: 10%;
        padding-left: 25px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
        
     }
     .SAC-BMS-foot{
        position: absolute;
        top: 2100px;
        z-index: -1;

    }
    
    .Control-Ins-title{
        display: none;
    }

    .Sub-header-Control-Ins{
        height: 10vh;
        background-image: none;
    }
    .Control-Ins{
        top: 10%;
        padding-left: 25px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
        
     }
     .Control-Ins-foot{
        position: absolute;
        top: 1200px;
        z-index: -1;
     }

    .Audio-Video-title{
        display: none;
    }

    .Sub-header-Audio-Video{
        height: 10vh;
        background-image: none;

    }
    .Audio-Video{
        top: 10%;
        padding-left: 25px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
        
     }
     .Audio-Video-foot{
        position: absolute;
        top: 2000px;
        z-index: -1;
     }

    .LV-Electrical-title{
        display: none;
    }

    .Sub-header-LV-Electrical{
        height: 10vh;
        background-image: none;
    }
    .LV-Electrical{
        top: 10%;
        padding-left: 25px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
        
     }
     .LV-Electrical-foot{
        position: absolute;
        top: 1700px;
        z-index: -1;
     }

    .Telephone-title{
        display: none;
    }

    .Sub-header-Telephone{
        height: 10vh;
        background-image: none;
    }
    .Telephone{
        top: 10%;
        padding-left: 25px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
        
     }
     .Telephone-foot{
        position: absolute;
        z-index: -1;
        top: 1900px;
     }

     .Elevator-title{
        display: none;
        padding-top: 0;
    }

    .Sub-header-Elevator{
        height: 10vh;
        background-image: none;
        
    }
    .Elevator{
        min-height: 100vh;
        padding-top: 0;
        padding-left: 25px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
        
     }
    
     .Elevator .Elevator-CAT7-SF-img:active{
        position:absolute;
        margin: auto;
        transform: transition 0.5 ease;
        transform: scale(2.5);
        translate: 0%;
        z-index: 2;
    } 
     .Elevator-foot{
        position: absolute;
        top:1600px;
        z-index: -1;

    }

     .Sub-header-webTC h1{
        text-align: center;
        padding-top: 40%;
        font-size: 28px;
    }
    .Sub-header-about h1{
        text-align: center;
        padding-top: 40%;
        font-size: 28px;
    }

    .Sub-header-products h1{
        text-align: center;
        padding-top: 40%;
        font-size: 28px;
    }
    .Sub-header-contact h1{
        text-align: center;
        padding-top: 40%;
        font-size: 28px;
    }
    .Sub-header-enquiries h1{
        text-align: center;
        padding-top: 40%;
        font-size: 28px;
    }

    .Sub-header-custom h1{
        
        text-align:center;
        padding-top: 50%;
        font-size: 28px;
        text-wrap:wrap;
    }

    .Sub-header-custom {
        background-size: contain;
       
    }

    /* .custom-images{
        position: relative;
        padding-left: 25px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
        
     } */
     .custom-images{
   
        position:absolute;
        z-index: -1;
        margin: 0px;
        padding-top:0px;
        padding-left: 0px;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-column-gap: 100px;
        grid-row-gap: 20px ;
        
        
      }

     .custom-foot{
        position: absolute;
        z-index: -1;
        top: 3800px;
     }
 
    



} 

@media (max-width:391px){
    .Coax{
        margin-left: auto;
    }
}


@media (min-width:989px) and (max-width:1025px){
    .logo1{
        height: 79.8px;
        width: 177.08px;
        padding-top: 0px;
        padding-left: 10px;
        padding-bottom: 0px;
        text-align: left;
       
    }
    
    
    .logo2{
        position: absolute;
        height: 57.6px;
        width: 312px;
        padding-top: 0px;
        padding-left: 37%;
        padding-bottom: 0px;
        bottom: 20%;
        right: 48%;
        
    }
  
    .footer-distributed{
      font: bold 16px sans-serif;
    }
  
    .footer-left,
    .footer-center,
    .footer-right{
      display: block;
      width: 100%;
      margin-bottom: 2%;
      text-align: center;
    }

    .footer-right{
        margin-bottom: 19%;
    }
  
    .footer-center i{
      margin-left: 0;
    }

    /* .about-col-img{
        height: auto;
        display: none;

    } */

    .about-col p{
        min-width: 59vh;
        position: relative;
        display: flex;
        flex-basis: 100%;
        padding: 30px 2px;
        float: left;
        text-wrap:wrap;
        text-align:justify;
        z-index: -1;
    
    }
    
    .products{
        font-size: 19px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
           
    } 
    .column4{
        position: relative;
        display: inline;
        display: table-row;
    }
    .products a {
        padding: 4px;
    }

    .contact-col {
        display:block;
     
    }
    .map{
      padding-left: 5%;
    }
    
    .enquiries{
        position: relative;
        margin: auto;
        align-items: center;
        justify-content: center;
        width: 840px;
        padding-top: 15%;
        text-align: center;
    }

    .enquiries input, .enquiries textarea{
        position: relative;
        align-items: center;
        justify-content: center;
        width: 780px;
    
    }
    input.checkbox{
        position: relative;
        right: 0px;
        width: 25px;
        height: 25px;
        color: rgb(0, 46, 98);
        text-decoration-color: rgb(0, 46, 98);
    }
    
    .datacollect{
        font-size: 15px;
        text-decoration-color: rgb(0, 46, 98);
        color: rgb(0, 46, 98);
    }
    .datalabel{
        font-size: 16px;
    
        text-decoration-color: rgb(0, 46, 98);
        color: rgb(0, 46, 98);
        position: relative;
        left: 10px;
        bottom: 5px;
    }

    /* .custom-images{
        position: relative;
        padding-left: 25px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px ;
        
     } */
    
     
.custom-images{
   
    position:absolute;
    z-index: -1;
    margin: 0px;
    padding-top:0px;
    padding-left: 0px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 100px;
    grid-row-gap: 20px ;
    
    
  }
     
    

    .Sub-header-about,
    .Sub-header-products,
    .Sub-header-contact,
    .Sub-header-enquiries,
    .Sub-header-webTC,
    .Sub-header-Elevator,
    .Sub-header-custom,
    .Sub-header-Data-LAN,.Sub-header-Coax,.Sub-header-Control-Ins,
    .Sub-header-LV-Electrical,.Sub-header-Telephone,
    .Sub-header-Telephone,.Sub-header-Audio-Video,.Sub-header-SAC-BMS{
        height: 25vh;
        width: 100%;

    }
   
       
   
}


@media (min-width: 989px) and (max-width:1285px)  {

    .header{
   
        min-height: 135vh;
        width: 100%;
        background-image: url(IMAGES/Home/background\ 3.jpg) ; 
        background-position:center;
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        
    }

    .Sub-header-about{
        height: 50vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/AboutUs/banner.jpg);
        background-position: center;
        background-size: cover;
        text-align: center;
        color: aliceblue;
    }
    .Sub-header-about h1{
        text-align: center;
        padding-top: 200px;
        font-size: 50px;
    }

    .about-us{
        width: 80%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 50px;
        font-weight: 500;
        color: black;
       
    
    }
    
    .about-col{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        flex-basis: 78%;
        padding: 20px 2px;
       
    }
    
    .about-col p{
        display: flex;
        flex-basis: 100%;
        padding: 30px 2px;
        float: left;
        text-align:justify;
    
    }

    .about-col2 p{
        display: flex;
        z-index: -1;
        position: relative;
        top: -30px;
        text-align: justify;
        text-wrap: wrap;
    
    }
    
    /* .about-col-img{
        display: none;
    }
    .about-col-img1{
        display: flex;
        position: absolute;
        padding-top: 3%;
        left: 55%;
        width: 50vh;
        height: 50%;
        z-index: -1;
    } */


    .Sub-header-products{
        height: 50vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Products/banner.jpg);
        background-position: center;
        background-size: cover;
        text-align: center;
        color: aliceblue;
    }
    .Sub-header-products h1{
        text-align: center;
        padding-top: 200px;
        font-size: 50px;
    }

    .products{
        font-size: 19px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        
    } 
    .products a {
        padding: 4px;
    }

    .products-foot{
        top: 120%;
        z-index: -1;
    }
    


.Sub-header-Data-LAN{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Products/Data-LAN/banner.jpg);
    background-position: 0px 50px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-Data-LAN h1{
    text-align: center;
    padding-top: 135px;
    font-size: 50px;
}

.Sub-header-Control-Ins{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Products/Control&Ins/banner.jpg);
    background-position: 0px 55px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}

.Sub-header-Audio-Video{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/Audio&Video/banner.jpg);
    background-position: 0px -40px;
    background-size: contain;
    text-align: center;
    color: aliceblue;
}
.Sub-header-Telephone{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/Telephone/banner.jpg);
    background-position: 0px 40px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-Coax{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/Co-axial/banner.jpg);
    background-position: 0px -40px;
    background-size: contain;
    text-align: center;
    color: aliceblue;
}

.Sub-header-LV-Electrical{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/LV-Electric/banner.jpg);
    background-position: 0px 55px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}


.Sub-header-SAC-BMS{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.65),rgba(4,9,30,.65)),url(IMAGES/Products/SAC&BMS/banner.jpg);
    background-position: 0px 50px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}

.Sub-header-Elevator{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(51, 53, 61, 0.7),rgba(51, 53, 61, 0.7)),url(IMAGES/Products/Elevator/Banner.jpg);
    background-position: 0px 0px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}

.Sub-header-custom{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Products/Custom/banner.jpg);
    background-position: -62px 72px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-custom h1{
    text-align: center;
    padding-top: 200px;
    font-size: 35px;
}



.Sub-header-webTC{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/WebsiteTC/banner.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-webTC h1{
    text-align: center;
    padding-top: 200px;
    font-size: 50px;
}

.Sub-header-contact{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/ContactUs/banner.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}
.Sub-header-contact h1{
    text-align: center;
    padding-top: 200px;
    font-size: 50px;
}


.Sub-header-enquiries{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(IMAGES/Enquiries/banner.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}

.Sub-header-enquiries h1{
    text-align: center;
    padding-top: 200px;
    font-size: 50px;
}

.custom-foot{
    
    top:300%;
    z-index: -1;
}

.footer-left{
    margin-bottom: 3%;
 
}
.footer-center{
    margin-bottom: -5%;
    
}
    .footer-right{
        margin-bottom: 2%;
    
    }

    .Data-LAN-foot,.SAC-BMS-foot, .Audio-Video-foot,
    .Telephone-foot,.Coax-foot,.Control-Ins-foot,.LV-Electrical-foot,.Elevator-foot{
        z-index: -1;
    }


 .other-products button{
        position: relative;
        border: none;
        outline: 0;
        padding: 12px;
        color: rgb(0, 46, 98) ;
        background-color:white;
        text-align: center;
        cursor:pointer;
        width: 100%;
        font-size: 19px;
        font-weight: bold;
        
        
        
}

.Control-Ins .other-products button{
    position:relative;
    border: none;
    outline: 0;
    padding: 12px;
    color: rgb(0, 46, 98) ;
    background-color:white;
    text-align:center;
    white-space: nowrap;
    cursor:pointer;
    width: 100%;
    font-size: 19px;
    font-weight: bold
}

.Control-Ins{
    position:absolute;
    z-index: -1;
    margin: 0px;
    padding-top: 10px;
    padding-left: 25px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 60px;
    grid-row-gap: 20px ;
    
 }

}

@media (min-width: 1439px) and (max-width:1441px)  {

    .header{
   
        min-height: 160vh;
        width: 100%;
        background-image: url(IMAGES/Home/background\ 3.jpg) ; 
        background-position:center;
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        
    }

    /* .about-col-img{
        height: 55vh;
    } */
}

@media (min-width:1286px) {
    .other-products button{
        position: relative;
        border: none;
        outline: 0;
        padding: 12px;
        color: rgb(0, 46, 98) ;
        background-color:white;
        text-align: center;
        cursor:pointer;
        width: 100%;
        font-size: 19px;
        font-weight: bold;     
        
        
}

}
@media(min-width:1400px) and (max-width:1499px) {
.Sub-header-Elevator{
    height: 43vh;
    width: 100%;
    background-image: linear-gradient(rgba(51, 53, 61, 0.7),rgba(51, 53, 61, 0.7)),url(IMAGES/Products/Elevator/Banner.jpg);
    background-position: 0px -60px;
    background-size: cover;
    text-align: center;
    color: aliceblue;
}

}