@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');

body {
    font-family: 'Playpen Sans', cursive;
    font-optical-sizing: auto;
    font-weight: 400;  /* ya 100, 200 ... 800 */
    font-style: normal;
}


body{margin: 0px; padding: 0px;}
.mian{width: 100%;}
nav{ width: 100%;background-color: black; display: flex; overflow: hidden; justify-content: center; align-items: center;}
.logo{width: 20%; justify-content: center; display: flex;}
.manu{width: 60%; display: flex; justify-content: center;}
.manu2{width: 20%;  }
.link{display: flex;align-items: center; gap: 30px; color: white; list-style: none; text-decoration: none;}
.pic1{width: 30px;


animation-name: logo;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 10s;


}

@keyframes logo { 0%{transform: translateX(-100PX);}


100%{transform: translateX(0PX);}


}


.heading1{color: white; font-size: 16px; font-weight: 300; text-align: center;}
.text_setion{width: 40%; display: flex; justify-content: end;}
.pic_setion{width: 60%;}
.hero{width: 100%; overflow: hidden; display: flex; background-color: black;}
.text_box{width: 50%;  }
.pic_box{width: 50%; }
.heading3{color: white;   font-size: 80px; position: relative; left: 90px; 

    .heading3:hover{color: aqua;}

    transition: all; 
    transition-duration: 3s;
    transition-timing-function: linear;
    transform-origin: center;

 }




 .heading3:hover{  transform: translateX(-100px) scale(0.5);
 }





.pic4{width: 100%;


animation-name: slide;
animation-duration: 5s;
animation-iteration-count: infinite; 
animation-timing-function:linear;

}


@keyframes slide { 

    0%{
        transform: translatey( 0px);
    }

    100%{
        transform: translatey(100px)  /* left side move */
    }


}


.min_setion{width: 90%; overflow: hidden; display: flex;   }
.arow{width: 20%;  justify-items: end; }
.text_box1{width: 80%;

    



}






.para{color: white;

    font-size: 40px;
    animation: zoom 5s infinite linear;




}


@keyframes zoom{
    0%{
        transform:translatex(-70px);
    }
    
    }



.pic5{ width: 50px; height: 50px; margin:  0 auto; display: block;


animation-name: arow;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;


}


@keyframes arow { 0%{transform: translateY(-80px) scale(1.5);}
    

100%{transform: translateY(0px);}


}




.logo_setion{width: 100%; padding-bottom: 5%;  align-items: center; flex-wrap: wrap; justify-items: center; overflow: hidden; display: flex; background-color: black;





}



@keyframes marqe  { 0%{ transform: translatex(-100px);}
    

100%{ transform: translatex(0px);}


}

.logo_box{width: 25%;


    animation-name: marqe;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-iteration-count: 5ss;


}




@keyframes marqe  { 0%{ transform: translatex(-150px);}
    

100%{ transform: translatex(0px);}}

.pic10{margin: 0 auto; display: block; width: 150px;}
.heading4{color: white;
    width: 100%; margin-left: 10%;}
    .text_3{width: 100%;  }
    .INFITI_SETION{width: 100%; justify-content: center;   align-items: center; overflow: hidden; background-color: black; display: flex; flex-wrap: wrap;}
.text_box4{width: 50%;  justify-content: center; }
.PIC_BOX2{width: 50%; 
    aspect-ratio: 16 / 13;  
    background: url("../imag/div(3).png") no-repeat center ; background-size:cover;}
.heading5{color:white;  text-align: center;


    animation-name: ds;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}
.PARA1{color: white; width: 400PX;  margin-left: 15%;
  }
.pic11{width: 80%;    margin-top: 30%;  margin-left: 10%;


animation-name: zom;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;



}

@keyframes zom { 0%{transform:rotate(360deg) scale(0.5);}


100%{transform:rotate(0deg) scale(1); }
    

}






.products{ width: 100%; overflow: hidden; padding-bottom: 5%; display: grid; grid-template-columns: repeat(2,1fr); background-color: black;

 animation-name: boc;
 animation-timing-function: linear;
 animation-iteration-count: 1;
 animation-duration: 8s;



}


@keyframes boc { 0%{ transform: rotate(100deg) scale(0.5);

    100% { transform: scale(0.0)  rotate(0deg);
}
}
}

.PIC_BOX3{}
.PIC_BOX4{}
.pic12{width: 80%; margin: 0 auto; display: block; margin-bottom: 5%; height: 420px; }
.pic13{width: 80%; margin: 0 auto; display: block;}
.pic14{width: 80%; margin: 0 auto; display: block;  margin-bottom: 5%;}
.pic15{width: 80%; margin: 0 auto; display: block; }
.heading7{margin-left: 5%; font-size: 40px; color: white; grid-column: 1/-1;}
.black_box{ background-color: rgb(53, 48, 48); width: 80%; margin: 0 auto; display: block;  height: 50px; overflow: hidden;}
.pic16{width: 50%; margin:  0 auto; display: block; margin-top: 5%;}
.bar{display: grid; grid-template-columns: repeat(3,1fr);padding-bottom: 5%; }
.pic17{width: 80%;  margin:  0 auto; display: flex;

transition: all;
transform-origin: center;
transition-duration: 3s;
transition-timing-function: ease-out;


}


.pic17:hover{ transform:scale(1.2);}
.heading9{color: white; grid-column: 1/_1; font-size: 35px; margin-left: 5%;


    animation-timing-function: linear;
    animation-name: side;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
.paper{width: 100%; display: grid;  grid-template-columns: 1fr; }
.desging{width: 70%; margin: auto; display: block;

    transition: all;
    transform-origin: center;
    transition-duration: 3s;
    transition-timing-function: ease-out;


}


.desging:hover{transform: scale(1.2) translateY(80px);}
.gren{width: 100%; display: grid;  grid-template-columns:repeat(2,1fr);}
.fg{background: url(../imag/bg.png) ; grid-column: 1/2; background-size: cover; background-position: center; position: relative; right: 180px; background-repeat: no-repeat;  padding-bottom: 25%;}
.heading17{   color: white; margin-left: 50%; margin-top: 30%; position: relative; top: 50PX; font-size: 40px; font-weight:bold;

 animation-timing-function: linear;
 animation-name: side;
 animation-duration: 5s;
 animation-iteration-count: infinite;

}


@keyframes side { 0%{transform: translatey(-100px);}
100%{transform: translatey(0px);}
    
}
.para2{color: white; margin-left: 50%; font-size: 20px; margin-top: 20%;}
.hd{ display: grid;  grid-column: 2,1fr; align-items: center; display: flex;}

.PIC30{margin-top: 90%; width: 80%; position: relative; right: 200PX;}
.PARA30{width: 400PX; color: white; position: relative; right: 190PX;   }
.PARA31{width: 400PX; color: white;  position: relative; right: 190PX;}
.gB{margin-top: 30%;}
.about{width: 100%; overflow: hidden; display: grid;  padding-bottom: 5%;  grid-template-columns: repeat(3,1fr);}
.heading18{color: white; font-size: 30px; font-weight: bold;}
.para33{color: white;}
.about_1{width: 40%; margin-left: 30%;

 animation-name: ds;
 animation-duration: 10s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;

}

@keyframes   ds { to { transform: scale(1.2s);}
from { transform: scale(0);}
}
.para34{color: white;}
.para34{width: 50%;}
.about03{width: 40%; margin-left: 5%;

    animation-name: ds;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}
.footer{width: 100%; background-color: black; display: grid; grid-template-columns: 1fr;}
.mine{ width: 100%; height: 350px; background: url(../imag/hdfg.png);  background-position: center; background-size: cover; display: grid; grid-template-columns:repeat(2,1fr);}
.w2{display: grid; grid-template-columns: repeat(2,1fr); justify-content: end; align-items: center;}
.heading22{color: white;}
.heading23{color: white; margin-left: 20%; font-size: 25px; margin-top: 15%;}
.para39{color: white; margin-left: 20%;}
.pk{color: white; margin-left: 20%; font-size: 25px;}
.para40{color: white; margin-left: 20%;}
.c{animation-name: ds;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;}
.para33:hover{color: aqua;}
.heading18:hover{color: aqua;}
.para34:hover{border: 2px; border-bottom-style: dotted; border-color: aqua; }

.heading23:hover{ border-bottom: solid 1px; border-color: aqua; width: 50%; border-bottom-style:groove; }
.para39:hover{color: aqua;}
.pk:hover{color: aqua;}
.para40:hover{color: aqua;}
.pic10:hover{color: aqua;}
.PARA1:hover{color: aqua;}
.link:hover{color: aqua;}