@charset "ISO-8859-1";

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

*

{

 margin: 0;

 padding: 0;

 box-sizing: border-box;

 font-family: 'Arial', sans-serif;

}

body 

{

 display: flex;

 justify-content: center;

 align-items: center;

 min-height: 100vh;

 background: #000;

}

section 

{

 position: absolute;

 width: 100vw;

 height: 100vh;

 display: flex;

 justify-content: center;

 align-items: center;

 gap: 2px;

 flex-wrap: wrap;

 overflow: hidden;

}

section::before 

{

 content: '';

 position: absolute;

 width: 100%;

 height: 100%;

 background: linear-gradient(#000,#f6570a,#000);

 animation: animate 5s linear infinite;

}

@keyframes animate 

{

 0%

 {

 transform: translateY(-100%);

 }

 100%

 {

 transform: translateY(100%);

 }

}

section span 

{

 position: relative;

 display: block;

 width: calc(6.25vw - 2px);

 height: calc(6.25vw - 2px);

 background: #181818;

 z-index: 2;

 transition: 1.5s;

}

/*section span:hover 

{

 background: #f6570a;

 transition: 0s;

}*/



section .signin

{

 position: absolute;

 width: 400px;

 background: #222; 

 z-index: 1000;

 display: flex;

 justify-content: center;

 align-items: center;

 padding: 40px;

 border-radius: 4px;

 box-shadow: 0 15px 35px rgba(0,0,0,9);

}

section .signin .content 

{

 position: relative;

 width: 100%;

 display: flex;

 justify-content: center;

 align-items: center;

 flex-direction: column;

 gap: 25px;

}

section .signin .content h2 

{

 font-size: 2em;

 color: #f6570a;

 text-transform: uppercase;

}



section .signin .content h6 

{

 font-size: 3em;

 color: #f6570a;

 display:center;

 font-family: Times New Roman;

}



section .signin .content .form 

{

 width: 100%;

 display: flex;

 flex-direction: column;

 gap: 25px;

}

section .signin .content .form .inputBox

{

 position: relative;

 width: 100%;

}

section .signin .content .form .inputBox input 

{

 position: relative;

 width: 100%;

 background: #333;

 border: none;

 outline: none;

 padding: 25px 10px 7.5px;

 border-radius: 4px;

 color: #fff;

 font-weight: 500;

 font-size: 1em;

}

section .signin .content .form .inputBox i 

{

 position: absolute;

 left: 0;

 padding: 15px 10px;

 font-style: normal;

 color: #aaa;

 transition: 0.5s;

 pointer-events: none;

}





.signin .content .form .inputBox input:focus ~ i,

.signin .content .form .inputBox input:valid ~ i

{

 transform: translateY(-7.5px);

 font-size: 0.8em;

 color: #fff;

}

.signin .content .form .links 

{

 position: relative;

 width: 100%;

 display: flex;

 justify-content: space-between;

}

.signin .content .form .links a 

{

 color: #fff;

 text-decoration: none;

}

.signin .content .form .links a:nth-child(2)

{

 color: #f6570a;

 font-weight: 600;

}

.signin .content .form .inputBox input[type="submit"]

{

 padding: 10px;

 background:#f6570a;

 color: #000;

 font-weight: 600;

 font-size: 1.35em;

 letter-spacing: 0.05em;

 cursor: pointer;

}

input[type="submit"]:active

{

 opacity: 0.6;

}





.text-center {

 text-align: center !important;

}

.mb-0 {

 margin-bottom: 0 !important;

 margin-top: 25px;

}

p {

 margin-top: 0;

 color:#f5d1bc;

 margin-bottom: 1rem;

}

*, *::before, *::after {

	color:#f6570a;

 box-sizing: border-box;

}

user agent stylesheet

p {

 display: block;

 margin-block-start: 1em;

 margin-block-end: 1em;

 margin-inline-start: 0px;

 margin-inline-end: 0px;

}

.row {

 --bs-gutter-x: 1.5rem;

 --bs-gutter-y: 0;

 display: flex;

 flex-wrap: wrap;

 margin-top: calc(var(--bs-gutter-y) * -1);

 margin-right: calc(var(--bs-gutter-x) / -2);

 margin-left: calc(var(--bs-gutter-x) / -2);

}





@media (max-width: 900px)

{

 section span 

 {

 width: calc(10vw - 2px);

 height: calc(10vw - 2px);

 }

}

@media (max-width: 600px)

{

 section span 

 {

 width: calc(20vw - 2px);

 height: calc(20vw - 2px);

 }

}



* {

 margin: 0;

 padding: 0;

 box-sizing: border-box;

 list-style-type: none;

 text-decoration: none;

}



/*main content css*/



section#main-content {

 width: 80%;

 float: right;

}





.pro-table {

 float: left;

 width: 65%;

 background-color: #fff;

 box-shadow: 10px 10px 20px #bbb;

 padding: 15px;

}



.pro-cus {

 float: right;

 width: 30%;

 background-color: #fff;

 box-shadow: 10px 10px 20px #bbb;

 padding: 15px;

}



.content-pro-par {

 margin: 6% 2% 0 2%;

}



.pro-table {

 float: left;

 width: 68%;

 background-color: #fff;

 box-shadow: 10px 10px 20px #bbb;

 padding: 15px;

}



.pro-cus {

 float: right;

 width: 30%;

 background-color: #fff;

 box-shadow: 10px 10px 20px #bbb;

 padding: 15px;

}



table th {

 text-align: left;

}



table td {

 padding: 8px 0px;

}



table td {

 padding: 20px 0px 0px 0px;

}



span.rev-span {

 width: 10px;

 height: 10px;

 background-color: #fd5a5e;

 display: inline-block;

 border-radius: 10px;

 margin-right: 8px;

}



.see-all button {

 background-color: #fd5c62;

 color: #fff;

 border: none;

 width: 70px;

 height: 40px;

 line-height: 40px;

 border-radius: 8px;

 cursor: pointer;

}



.rec-pro-h {

 float: left;

}



.see-all {

 float: right;

}



.recent-project {

 margin-bottom: 20px;

}



img.table-img {

 width: 35px;

}



td.cnt-info-td i {

 color: #fd5c62;

 padding-right: 8px;

}





@media screen and (max-width :768px) {





 section#main-content {

 width: 84%;

 }



 .pro-table {

 float: none;

 width: 100%;

 margin: 0 auto;

 }



 .pro-cus {

 float: none;

 width: 100%;

 margin: 20px auto;

 }



 table td {

 font-size: 14px;

 }



 .rec-pro-h h2 {

 font-size: 18px;

 }



 .see-all button {

 width: 50px;

 height: 40px;

 line-height: 40px;

 font-size: 11px;

 }



}