*{
margin: 0;
padding: 0;
box-sizing: border-box; 
scroll-behavior: smooth;
font-family: 'poppins';
text-decoration: none;
}
*::-webkit-scrollbar{
width: 1px;
background-clip: padding-box;
border: 1px solid transparent;
}
*::-webkit-scrollbar-thumb {  
border-radius: 20px;   
box-shadow: inset 0 0 0 10px;
}
.scrollbar{
overflow-y: auto;
color: rgba(0, 0, 0, 0);
transition: color .3s ease;
}
.scrollbar:hover{
color: rgba(0, 0, 0, 0.3);
}

body{
width: 100%;
height: 100%;
}
p{
text-align: justify;
margin:0 0 10px 0;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.width-full{
width: 100%;
}
.flex{
display: flex;
align-items: center;
}
.flex-col{
flex-direction: column;
}
.jcsb{
justify-content: space-between;
}
.jccen,.landing{
justify-content: center;
}
.cursor{
cursor: pointer;
}
.header{
padding: 0 20px;
height: 60px;
z-index: 1;
position: fixed;
top: 0;
transition: all ease-in-out .2s;
color: #ffffff;
}
.white{
background-color: #ffffff;
color: #000000;

}
.header .links.active{
color: #ffffff;
font-weight: 800;
}
.white .links.active{
color: #000000;
font-weight: 800;
}
.headcon{
height: 30px;
}
.logo{
font-size: 32px;
font-weight: 800;
}
.menu{
width: 35%;
font-size: 20px;
}
.mobilemenu{
display: none;
}
.links{
color: #a9a9a9;

}
.links:hover{
color: #000000;
font-weight: 800;
}
.footer{
background-color: #000000;
height: 120px;
padding: 20px;
color: #ffffff;
}
.flogo{
font-size: 30px;
font-weight: bold;
}
.pe{
height: 40px;
padding: 0 30px;
margin: 0 0 2px 0;
}
.i-con{
width:30px;height: 30px;border-radius: 50%;background-color: #ffffff;color: #000000;margin: 0 5px 0 0;
}
.social-links{
width: 10%;
}
.container{
height: fit-content;
padding: 0 20px;
}
.landing{
height: 100vh;
position: relative;
background-position: center;
}
.lhead{
font-size: 60px;
padding: 50px 0 0 0;
font-weight: bolder;
}
.lcontentcon,.slcontentcon{
padding: 40px 100px;
}
.lcontent{
font-size: 40px;
text-align: center;
font-weight: 800;
}
.name{
font-size: 80px;
font-weight: bold;
color: #ffffff;
}
.quote{
font-size: 30px;
font-weight: 600;
}
.extend{
height: fit-content;
}
.about,.ul-mtr,.products,.contact-us{
overflow: hidden;
height: fit-content;
padding: 20px;
}
.con-first{
padding-top: 50px;
}
.textcon,.landing{
    display: flex;
    align-items: center;  
}
.textcon{
    justify-content: space-between;
}
.about-mtr p{
margin-bottom: 10px;
}
.team-con{
margin:0 10px 20px 0;
height: 230px;
width: 280px;
padding: 5px;
border-radius: 8px;
cursor: pointer;
}
.team-con:hover{
-webkit-box-shadow: 0px 0px 10px 5px rgba(222,222,222,1);
-moz-box-shadow: 0px 0px 10px 5px rgba(222,222,222,1);
box-shadow: 0px 0px 10px 5px rgba(222,222,222,1);
}
.team-img{
width:100%;
height: 85%;
overflow: hidden;
background-position: center;
}
.team-img img ,.product-img img{
width: 100%;
height: 100%;
background-position: center;
border-radius: 8px;
}
.team-position{
height: 30px;
padding: 4px;
}
.product-mtrcon{
height: fit-content;
}
.product-img{
width: 40%;
}
.product-mtr{
width: 59%;
font-size: 18px;
}

.product-img,.product-mtr{
height: 240px;
}
.home-product-designs{
height: 480px;
}
.home-product-designs .team-con,.product-designs .team-con {
float: left;
}
.map{
height: 450px;
margin: 0 0 30px 0;
}
.cback{
background-color: #d2d2d2;
height: 120px;
width: 120px;
border-radius: 50%;
}
.rotate{
font-size: large;
font-weight: bold;
text-align: center;
transform: rotate(-17.09deg);
}
.chead{
margin: 0 0 10px 0;
}
.contact-details,.contact-form{
width: 49.5%;
height: 550px;
}
.contact-detail{
width: 80%;
height: 80px;
background-color: #d2d2d2;
margin:0 0 25px 0;
padding: 0 20px;
}
.inputfiled{
width: 100%;
height: 50px;
margin: 0 0 30px 0;
}
.inputtext{
height: 200px;
}
.input-data{
height: 50px;
width: 100%;
position: relative;
}
.input-data input {
height: 100%;
width: 99%;
outline: none;
padding: 0 15px;
background-color: transparent;
font-size: 17px;
border: 2px solid silver;
color: #696969;
transition: all  0.3s ease-in-out;
border-radius: 6px;
}
.input-data textarea {
height: 200px;
width: 99%;
outline: none;
padding: 15px;
background-color: transparent;
font-size: 17px;
border: 2px solid silver;
color: #696969;
transition: all  0.3s ease-in-out;
border-radius: 6px;
}
.input-data input:focus,.input-data textarea:focus{
transform: scaleX(1);
border:2px solid #1f8df8;
}
.input-data input:valid,.input-data textarea:valid{
border:2px solid #1f8df8;
color:#1f8df8;
}
.input-data input:focus ~ label,
.input-data input:valid ~ label,
.input-data textarea:focus ~ label,
.input-data textarea:valid ~ label {
transform: translateY(-25px);
font-size: 15px;
color: #1f8df8;
}
.inputfiled .input-data label{
position: absolute;
bottom: 15px;
left: 15px;
padding: 0 5px;
color: grey;
background-color: #ffffff;
pointer-events: none;
transition: all 0.3s ease;
}
.cbtn{
width: 140px;
height: 40px;
border-radius: 99rem;
border: none;
background-color: #d2d2d2;
}
.product-details{
display: none;
z-index: 1;
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0,0,0,1);
}
.product-details-maincon{
position: relative;
height: 100%;
}
.product-main-con{
width: 920px;
max-height: 95%;
background: #fff;
padding:10px;
overflow-y: scroll;
}
.product-details-con{
height: 100%;
padding:10px;


}
.pro-details{
border: 1px solid;
}
.phead{
width: 22%;
padding: 10px;
background-color:#000000;
color: #ffffff;
}
.shead {
width: 15%;
height: 50px;
padding: 0 20px;
}
.pmtr{
padding: 0 20px; 
}
.close {
position: absolute;
height: 40px;
width: 40px;
font-size: 30px;
top: 20px;
right: 100px;
}
.contactus-con{
margin:0 0 50px 0;
}
.product-pic{
width: 100%;
height: 320px;
background-position: center;
}
.product-pic img{
width: 100%;
height: 100%;
}
#name {
font-size: 32px;
font-weight: bold;
}
#uses{
padding: 0 15px;
height: fit-content;
}
#uses li{
width: 50%;
float: left;
margin: 0 0 10px 0;
}
.product-mtr-con{
margin:0 0 10px 0;
}
.knowmore{
padding: 2px 10px;
border-radius: 99rem;
}
.knowmore:hover{
background-color: #000000;
color: #fff;
}
.maintext,.smalltext{
color: #000000;
padding: 20px;

height: 100%;
}
.maintext{
width: 60%;
padding: 0 50px;
}

.smalltext{
width: 39%;
font-size: 44px;
font-weight: bold;
}
.logotext{
font-size: 6rem;
font-weight: bold;
margin : 0 0 20px 0;
background-image: url(../images/bright-tan-brown.jpg);
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.quote{
font-size: 24px;
font-weight: 800;
animation-delay: 500ms;
margin : 0 0 40px 0;
}
.text{
animation-delay: 1500ms;
}
.habout{
animation-delay: 750ms;
}
.img-one,.img-two{
float: left;
width: 200px;
height: 340px;
border-radius: 8px;
box-shadow:-1px 3px 15px 0 rgba(0,0,0,.12);
}
.img-one{
transform: rotate(-17deg);
background-color: #000000;
background-image: url('../images/bright-black-galaxy-granite.jpg');
animation-delay: 1.5s;
}
.img-two{
transform: rotate(-14deg);
background-color: antiquewhite;
background-image: url('../images/bright-tan-brown.jpg');
animation-delay: 2s;

}
.img-two{
z-index: 1;
transform: rotate(13deg);
margin: 90px 0 0 -20px;
}
.loading{
    width: 60px;
    display: none;
}
.product-designs{
    width: fit-content;
    height: fit-content;
    float: left;
    box-shadow:-1px 3px 15px 0 rgba(0,0,0,.12);
    margin:4px;
    border-radius: 8px;
    padding: 10px;
}
.product-designs .head{
    font-size: 22px;
    font-weight: 800;
    padding: 0 5px;
}

/* mobile */
@media (max-width: 1124px){
    .header,.container{
     padding: 0 15px;   
    }
.menu {
position: absolute;
width: 100%;
left: 0;
height: 0px;
align-items: center;
background-color: #dedede;
margin: 120px 0 0 0;
padding: 0 5%;
transition: height .5s;
overflow: hidden;
z-index: 2;
font-size: 16px;
}
.menu.active{
height: 70px;
}

.about, .ul-mtr, .products, .contact-us {
    padding: 15px;
}
.link {
width: 100%;
height: 50px;
margin: 0 0 30px;
text-align: center;
}
.mobilemenu{
display: block;
float: right;
color: #000000;
font-size: 22px;
}
.landing{
    height: fit-content;
}
.textcon{
flex-direction: column;
}
.maintext,.smalltext{
    width: 100%;
    padding: 0;
}
.logotext{
    font-size: 3.2rem;
}
.quote{
    font-size:1.4rem ;
    margin: 0 0 20px 0;
}
.img-one,.img-two{
    height: 230px;
    width: 140px;}
.img-one{
    margin: 10px 0 0 40px;float:left;
}
.lhead{
    font-size: 2.66rem;
    text-align: center;
}
.lcontentcon{
    width: 100%;
    padding: 0;
    margin: 25px 0;
}
.lcontentcon .lcontent{
    font-size: 19px;
}
.slcontentcon{
    width: 100%;
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;
}
.slcontent{
    margin: 0 0 10px 0;
}
.team-con {
    margin: 0 0 5px 0;
    height: 140px;
    width: 180px;
    padding: 0 5px 0 0;
    border-radius: 8px;
    cursor: pointer;
}
.team-position{
    font-size: 14px;
}
.footer{
    width: 100%;
    padding: 15px;
    height: 320px;
    flex-direction: column;
}
.pecon {
    width: 100%;
    margin: 0 0 10px 0;
}
.pe{
    height: auto;
    flex-direction: column;
    padding: 0 15px;
    font-size: 13px;
}
.address{
    padding: 0 15px;
    font-size: 13px;
    text-align: justify;
}
.fmtr{
    width: 90%;
}
.social-links {
    width: 50%;
}
.product-mtrcon {
    height: fit-content;
    flex-direction: column;
}
.product-img{
    width: 100%;
}
.product-mtr{
    width: 100%;
    height: fit-content;
    text-align: left;
}
.product-designs{
    width: fit-content;
    height: fit-content;
    float: left;
}
.knowmore {
    padding: 2px 2px;
    font-size: 12px;
}
.home-product-designs .team-con {
    width: 175px;
}

.head{
    font-weight: 800;
}
.contactus-con {
    flex-direction: column;
}
.contact-detail,.contact-details, .contact-form  {
    width: 100%;
}
.chead .head{
    font-size: 20px;
    font-weight: 800;
    margin: 10px 0;
}
.close{
    font-size: 24px;
    top: 1px;
    right: 0px;
}
}