body
  {
    overflow-x: hidden;
  }
  
/* start home one  */
.hardware
{
    position: relative;
    background-color: rgba(0, 0, 0, 0.9);
    height: auto;
    width: 100%;
}

    .bottom-layer {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; 
        height: 100vh;
        background-image: url('../img/HARDWARE5.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;  
        background-blend-mode: screen;
    }
    @media (max-width: 768px) {
        .bottom-layer {
        width: 100%;
        position: relative;
        background-image: url('../img/HARDWARE5.jpg');
        background-color: rgba(0, 0, 0, 1);
        background-size: cover; /* أو contain حسب احتياجك */
        background-repeat: no-repeat;
        background-position: center; /* لضمان تمركز الصورة */
        background-blend-mode: screen;
        height: 100vh;
        overflow-x: hidden;
    }
}
.top-layer
 {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
 }


/* start navbar  */

/* start navbar  */

.nav-links li>a
{
color: #fff;
 
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 500;
font-size: 29px;
transition: all .3s;
}

.nav-links li>a:hover
{
    color: #DF9030;
}
 
 
.aim-logo img
{
    width: 80px;
}


.logo-right
{
width: 125px;
}

.logo-left
{
   width: 100px;
}

/* start title  */

.home-title
{
    margin-top: 3%;
    text-align: center;
    color: #fff;
}
.home-title h1 
{
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size:4rem;
}
.line{
background-color: #DF9030;
width: 140px;
height: 7px;
margin-right: 30px;
}

 

.row
{
    margin: 0;
}

 





/*.controls
{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}*/

.controls a
{
    text-decoration: none;
    color: #fff;
    transition: all .4s;

}

/**************************** buttnos  ***************************************/
 
.controls a:hover
{
    color: #DF9030;
}



.controls img 
{
    width: 11%;
}
 

.hero-one-left
{
    position: absolute; 
    top: 47%; 
    left: 5%;
    transform: rotate(47deg);
    cursor: pointer;
}


.hero-one-temp
{
    position: absolute; 
    cursor: pointer;
    top: 55%; 
    left: 0%;
    transform: rotate(47deg);
}

 

.hero-one-right
{
    position: absolute; 
    bottom:27%; 
    right: 25%;
    transform: rotate(35deg);
    cursor: pointer;
}

.hero-power 
{
    position: absolute; 
    bottom:20%; 
    right: 24%;
    transform: rotate(35deg);
    cursor: pointer;
}

.super-hero 
{
    position: absolute; 
    bottom:10%; 
    left: 25%;
    transform: rotate(-25deg);
    cursor: pointer;
}
 
.hero-plam 
{
    position: absolute; 
    bottom:19%; 
    right: 32%;
    transform: rotate(35deg);
    cursor: pointer;  
}

.hero-tow
{
    position: absolute; 
    bottom:2%; 
    left: 28%;
    transform: rotate(-25deg);
    cursor: pointer; 
}


.hero-lock-face 
{
    position: absolute; 
    bottom:34%; 
    right: 9%;
    transform: rotate(-30deg);
    cursor: pointer;   
}

.hero-lock
{
    position: absolute; 
    bottom:37%; 
    right: 15%;
    transform: rotate(-30deg);
    cursor: pointer;   
}

.all-comonent
{
   display: none;
   transition: all 1s;
   
 
}
.all-comonent img
{
     width: 70%;
}

.dsecription 
{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    padding: 40px 0px;
    /* display: none; */
    text-align: center;
}

.show
{
    display: block;
 } 

 

 .pdf-info
 {
    width: 4%; height: 10px;
 }

 .pdf-info img 
 {
    height: 150px; width: 100px;
 }

/**************** media from 1300px to 1000px  *************/
 @media screen and (max-width:1300px) and (min-width:1000px) {

    /**************************** buttnos  ***************************************/
.controls h3 
{
    transition: all .4s;
    font-size: 1.2rem !important; 
}
 



 
 

.hero-one-left
{
     top: 57%; 
    left: 3%;
    transform: rotate(55deg);
 
}


.hero-one-temp
{
 
    top: 62%; 
    left: 0%;
    right: 80%;
    transform: rotate(55deg);
}

 

.hero-one-right
{
    position: absolute; 
    bottom:27%; 
    right: 25%;
    transform: rotate(35deg);
    cursor: pointer;
}

.hero-power 
{
     bottom:22%; 
    right: 17%;
    transform: rotate(40deg);
 }

 
 
.hero-plam 
{
    bottom:17%; 
    right: 26%;
    transform: rotate(40deg);
}
 


.hero-lock-face 
{
    position: absolute; 
    bottom:29%; 
    right: 6%;
    transform: rotate(-40deg);
    cursor: pointer;   
}

.hero-lock
{
     bottom:34%; 
    right: 12%;
    transform: rotate(-40deg);
}

.all-comonent
{
   /* display: none; */
   transition: all 1s;
   
 
}
 
    
 }

 /**************** media from 1000px to 768px  *************/
 @media screen and (max-width:1000px) and (min-width:768px) {

    /**************************** buttnos  ***************************************/
.controls h3 
{
    transition: all .4s;
    font-size: 1.2rem !important; 
}
 



 
 

.hero-one-left
{
     top: 45%; 
    left: 4%;
    transform: rotate(60deg);
 
}


.hero-one-temp
{
 
    top: 55%; 
    left: -4%;
    transform: rotate(60deg);
}

 

.hero-one-right
{
    position: absolute; 
    bottom:27%; 
    right: 25%;
    transform: rotate(35deg);
    cursor: pointer;
}

.hero-power 
{
     bottom:22%; 
    right: 16%;
    transform: rotate(52deg);
 }

 
 
.hero-plam 
{
    bottom:18%; 
    right: 24%;
    transform: rotate(50deg);
}
 


.hero-lock-face 
{
     bottom:29%; 
    right: 1%;
    transform: rotate(-45deg);
 }

.hero-lock
{
     bottom:37%; 
    right: 7%;
    transform: rotate(-45deg);
}

.all-comonent
{
    transition: all 1s;
   
 
}
 
    
 }

  /**************** media from 768px to 500px  *************/
  @media screen and (max-width:768px) and (min-width:500px) {

    /**************************** buttnos  ***************************************/
.controls h3 
{
     font-size: 1rem !important; 
}
  
  

.hero-one-left
{
     top: 45%; 
    left: 4%;
    transform: rotate(60deg);
 
}

 


.hero-one-temp
{
 
    top: 55%; 
    left: -4%;
    transform: rotate(60deg);
}

 

.hero-one-right
{
     bottom:27%; 
    right: 25%;
    transform: rotate(35deg);
 }

.hero-power 
{
     bottom:22%; 
    right: 16%;
    transform: rotate(52deg);
 }

 
 
.hero-plam 
{
    bottom:18%; 
    right: 24%;
    transform: rotate(50deg);
}
 


.hero-lock-face 
{
     bottom:33%; 
    right: -5%;
    transform: rotate(-55deg);
 }

.hero-lock
{
     bottom:37%; 
    right: 8%;
    transform: rotate(-55deg);
}

.all-comonent
{
    transition: all 1s;
   
 
}
 

.pdf-info
{
   width: 2%;
    height: 6px;
}

.pdf-info img 
{
   height: 115px; 
   width: 70px;
}

    
 } 

 
  /**************** media from 500px to 400px  *************/
  @media screen and (max-width:500px) and (min-width:400px) {

    /**************************** buttnos  ***************************************/
.controls h3 
{
     font-size: 1rem !important; 
}
  
  

.hero-one-left
{
     top: 52%; 
    left: -1%;
    transform: rotate(60deg);
 
}

 


.hero-one-temp
{
 
    top: 61%; 
    left: -10%;
     transform: rotate(65deg);
}

 

.hero-one-right
{
     bottom:27%; 
    right: 25%;
    transform: rotate(35deg);
 }

.hero-power 
{
     bottom:22%; 
    right: 6%;
    transform: rotate(70deg);
 }

 
 
.hero-plam 
{
    bottom:22%; 
    right: 24%;
    transform: rotate(70deg);
}
 


.hero-lock-face 
{
     bottom:29%; 
    right: -12%;
    transform: rotate(-55deg);
 }

.hero-lock
{
     bottom:32%; 
    right: 1%;
    transform: rotate(-55deg);
}

.all-comonent
{
 
   transition: all 1s;
   
 
}
 
.pdf-info
{
   width: 1%;
   height: 3px;
}

.pdf-info img 
{
   height: 70px; width: 40px;
}


    
 } 
   /**************** media from 768px to 500px  *************/
   @media screen and (max-width:400px) and (min-width:300px) {

    /**************************** buttnos  ***************************************/
.controls h3 
{
     font-size: .8rem !important; 
}
  
  

.hero-one-left
{
     top: 55%; 
    left: 0%;
    transform: rotate(70deg);
 
}

 


.hero-one-temp
{
 
    top: 60%; 
    left: -12%;
     transform: rotate(70deg);
}

 

.hero-one-right
{
     bottom:27%; 
    right: 25%;
    transform: rotate(35deg);
 }

.hero-power 
{
     bottom:22%; 
    right: 6%;
    transform: rotate(70deg);
 }

 
 
.hero-plam 
{
    bottom:22%; 
    right: 24%;
    transform: rotate(70deg);
}
 


.hero-lock-face 
{
     bottom:29%; 
    right: -12%;
    transform: rotate(-55deg);
 }

.hero-lock
{
     bottom:32%; 
    right: 1%;
    transform: rotate(-55deg);
}

.pdf-info
{
   width: 1%;
   height: 3px;
}

.pdf-info img 
{
   height: 60px; width: 30px;
}
 }