722 lines
10 KiB
CSS
722 lines
10 KiB
CSS
.content {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.parent {
|
|
position: relative;
|
|
overflow-x: clip;
|
|
}
|
|
|
|
|
|
.parent::before {
|
|
content: "";
|
|
display: flow-root;
|
|
width: 300px;
|
|
height: 308px;
|
|
background-image: url(../public/assets/photos/stick.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: absolute;
|
|
top: 25%;
|
|
right: -70px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.parent::after {
|
|
content: "";
|
|
display: flow-root;
|
|
width: 300px;
|
|
height: 308px;
|
|
background-image: url(../public/assets/photos/stick.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: absolute;
|
|
top: 32%;
|
|
left: -15px;
|
|
z-index: 10;
|
|
rotate: -90deg;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
font-size: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.title h1 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.desc {
|
|
display: inline-block;
|
|
width: calc(55% - 50px);
|
|
}
|
|
|
|
.desc p {
|
|
display: -webkit-box;
|
|
height: max-content;
|
|
text-align: justify;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 2.6;
|
|
/*-webkit-line-clamp: 8;*/
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.image {
|
|
width: calc(50% - 30px);
|
|
position: absolute;
|
|
z-index: -10;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* cards */
|
|
.cards {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
/* services */
|
|
.services {
|
|
margin: 50px 0;
|
|
}
|
|
|
|
/* hyperAutomation */
|
|
.hyperAutomation {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: var(--defaultColor);
|
|
margin-bottom: 85px;
|
|
border-radius: 30px;
|
|
margin: 10px 0 65px;
|
|
gap: 40px;
|
|
}
|
|
|
|
.aboutHyper {
|
|
width: calc(50% - 10px);
|
|
}
|
|
|
|
.aboutHyper .title {
|
|
margin-top: 0;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.aboutHyper p {
|
|
width: 100%;
|
|
line-height: 2.6;
|
|
text-align: justify;
|
|
}
|
|
|
|
.descRobot {
|
|
position: relative;
|
|
width: calc(50% - 10px);
|
|
box-shadow: rgb(99 99 99 / 10%) 50px -29px 69px -10px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.robotic {
|
|
display: flex;
|
|
background: var(--mainGrd);
|
|
color: var(--defaultColor);
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 175px;
|
|
height: 175px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 50%;
|
|
transform: translate(50%, -60%);
|
|
font-size: 16pt;
|
|
}
|
|
|
|
.robotic::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -22px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: transparent;
|
|
border: 10px solid;
|
|
border-radius: 50%;
|
|
border-color: rgb(106, 203, 185);
|
|
}
|
|
|
|
.field::before {
|
|
content: '';
|
|
display: flow-root;
|
|
width: 22px;
|
|
height: 22px;
|
|
background: var(--hardOrange);
|
|
position: absolute;
|
|
/* right: -10px; */
|
|
border-radius: 50%;
|
|
/* top: 0; */
|
|
border: 4px solid;
|
|
}
|
|
|
|
.first::before {
|
|
left: -8px;
|
|
top: 0;
|
|
|
|
}
|
|
|
|
.seconde::before {
|
|
left: -15px;
|
|
bottom: 8px;
|
|
}
|
|
|
|
.third::before {
|
|
right: -15px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.fourth::before {
|
|
top: 0;
|
|
right: -10px;
|
|
}
|
|
|
|
|
|
|
|
.field::after {
|
|
content: '';
|
|
display: flow-root;
|
|
width: 130px;
|
|
height: 20px;
|
|
background-image: url('../public/assets/icons/line.svg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: absolute;
|
|
}
|
|
|
|
.first::after {
|
|
top: -9px;
|
|
right: -137px;
|
|
transform: rotateX(195deg);
|
|
}
|
|
|
|
.seconde::after {
|
|
right: -140px;
|
|
bottom: -4px;
|
|
}
|
|
|
|
.third::after {
|
|
left: -140px;
|
|
bottom: -6px;
|
|
transform: rotateY(165deg);
|
|
}
|
|
|
|
.fourth::after {
|
|
top: -9px;
|
|
left: -137px;
|
|
rotate: -180deg;
|
|
|
|
}
|
|
|
|
.interduce {
|
|
display: flow-root;
|
|
position: relative;
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.interduce>div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
width: 18%;
|
|
gap: 10px;
|
|
}
|
|
|
|
.interduce>div::before {
|
|
content: '';
|
|
display: flow-root;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--hardOrange);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--defaultColor);
|
|
position: absolute;
|
|
z-index: 20;
|
|
}
|
|
|
|
.interduce>div:nth-child(2n)::before {
|
|
left: -10px;
|
|
top: 25px;
|
|
}
|
|
|
|
.interduce .circleRight::before {
|
|
right: -21px;
|
|
top: 25px;
|
|
}
|
|
|
|
.interduce .BPMS {
|
|
top: 20px;
|
|
right: 89px;
|
|
}
|
|
|
|
.interduce .AL {
|
|
left: 76px;
|
|
top: 20px;
|
|
}
|
|
|
|
.interduce .Others {
|
|
top: 204px;
|
|
right: 86px;
|
|
}
|
|
|
|
.interduce .ML {
|
|
left: 70px;
|
|
top: 207px;
|
|
}
|
|
|
|
.interduce .BPMS h2 {
|
|
right: -15px;
|
|
text-align: right;
|
|
}
|
|
|
|
.interduce .BPMS p,
|
|
.interduce .Others p {
|
|
margin-right: -15px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
/* .interduce .AL h2 {
|
|
left: -13px;
|
|
text-align: end;
|
|
} */
|
|
|
|
/* .interduce .AL p {
|
|
margin-left: -10px;
|
|
} */
|
|
|
|
.interduce .Others h2 {
|
|
right: -15px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* .interduce .Others p {
|
|
margin-right: -15px;
|
|
} */
|
|
|
|
.interduce .ML h2,
|
|
.interduce .AL h2 {
|
|
left: -5px;
|
|
text-align: left;
|
|
}
|
|
|
|
.interduce .ML p,
|
|
.interduce .AL p {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.interduce h2 {
|
|
font-size: 15pt;
|
|
width: calc(100% - 7px);
|
|
color: var(--secondTextColor);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
top: -6px;
|
|
}
|
|
|
|
.interduce p {
|
|
font-size: 9pt;
|
|
color: var(--textColor);
|
|
font-weight: normal;
|
|
text-align: left;
|
|
margin-top: 37px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.mainContent {
|
|
position: relative;
|
|
margin-top: 100px;
|
|
/* z-index: -20; */
|
|
}
|
|
|
|
.hyperDesc {
|
|
color: var(--textColor);
|
|
}
|
|
|
|
/* customerBrand */
|
|
.customerBrand {
|
|
display: flex !important;
|
|
width: 125px !important;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
box-shadow: var(--boxShadow);
|
|
padding: 20px;
|
|
|
|
}
|
|
|
|
.customerBrand img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* whatIsSepehrdata */
|
|
|
|
.whatIsSepehrdata {
|
|
display: flow-root;
|
|
}
|
|
|
|
.whatIsSepehrdata p {
|
|
line-height: 2;
|
|
text-align: center;
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.sepehrDesc {
|
|
margin: 45px 0 60px;
|
|
}
|
|
|
|
|
|
.headContent {
|
|
margin: 90px 0 0;
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width:360px) and (max-width:601px) {
|
|
.image {
|
|
display: none;
|
|
}
|
|
|
|
.desc {
|
|
width: 100%;
|
|
}
|
|
|
|
.cards {
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.card {
|
|
width: calc(100% - 50px);
|
|
}
|
|
|
|
.title {
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.hyperAutomation {
|
|
flex-direction: column;
|
|
gap: 160px;
|
|
margin-bottom: 110px;
|
|
}
|
|
|
|
.aboutHyper {
|
|
width: 100%;
|
|
}
|
|
|
|
.descRobot {
|
|
width: 320px;
|
|
margin: 0 auto 110px;
|
|
scale: 0.8;
|
|
}
|
|
|
|
.fourth::after {
|
|
left: -121px;
|
|
}
|
|
|
|
.field::after {
|
|
width: 120px;
|
|
}
|
|
|
|
.first::after {
|
|
right: -124px;
|
|
}
|
|
|
|
.seconde::after {
|
|
right: -123px;
|
|
}
|
|
|
|
.third::after {
|
|
left: -124px;
|
|
}
|
|
|
|
.interduce {
|
|
width: 100%;
|
|
margin: unset;
|
|
}
|
|
|
|
.interduce .Others {
|
|
top: -119px;
|
|
right: -36px;
|
|
}
|
|
|
|
.interduce .BPMS {
|
|
top: 60px;
|
|
right: -35px;
|
|
}
|
|
|
|
.interduce .AL {
|
|
left: -43px;
|
|
top: -121px;
|
|
}
|
|
|
|
.interduce h2 {
|
|
left: -6px;
|
|
}
|
|
|
|
.interduce .ML {
|
|
left: -40px;
|
|
top: 63px;
|
|
}
|
|
|
|
.interduce>div::before {
|
|
display: none;
|
|
}
|
|
|
|
.interduce>div {
|
|
width: 27%;
|
|
}
|
|
|
|
.interduce .BPMS p,
|
|
.interduce .Others p {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.robotic {
|
|
transform: translate(50%, -50%);
|
|
}
|
|
|
|
/*.parent::before {*/
|
|
/* top: 480px;*/
|
|
/*}*/
|
|
|
|
}
|
|
|
|
@media screen and (min-width:601px) and (max-width:1024px) {
|
|
.image {
|
|
display: none;
|
|
}
|
|
|
|
.desc {
|
|
width: 100%;
|
|
}
|
|
|
|
.cards {
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.card {
|
|
width: calc(100% - 50px);
|
|
}
|
|
|
|
.title {
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.hyperAutomation {
|
|
flex-direction: column;
|
|
gap: 160px;
|
|
margin-bottom: 120px;
|
|
}
|
|
|
|
.aboutHyper {
|
|
width: 100%;
|
|
}
|
|
|
|
.descRobot {
|
|
width: 320px;
|
|
margin: 0px auto 110px;
|
|
scale: 0.9;
|
|
}
|
|
|
|
.fourth::after {
|
|
left: -121px;
|
|
}
|
|
|
|
.field::after {
|
|
width: 120px;
|
|
}
|
|
|
|
.first::after {
|
|
right: -124px;
|
|
}
|
|
|
|
.seconde::after {
|
|
right: -123px;
|
|
}
|
|
|
|
.third::after {
|
|
left: -124px;
|
|
}
|
|
|
|
.interduce {
|
|
width: 100%;
|
|
margin: unset;
|
|
}
|
|
|
|
.interduce .Others {
|
|
top: -119px;
|
|
right: -36px;
|
|
}
|
|
|
|
.interduce .BPMS {
|
|
top: 60px;
|
|
right: -35px;
|
|
}
|
|
|
|
.interduce .AL {
|
|
left: -43px;
|
|
top: -121px;
|
|
}
|
|
|
|
.interduce h2 {
|
|
left: -6px;
|
|
}
|
|
|
|
.interduce .ML {
|
|
left: -40px;
|
|
top: 63px;
|
|
}
|
|
|
|
.interduce>div::before {
|
|
display: none;
|
|
}
|
|
|
|
.interduce>div {
|
|
width: 27%;
|
|
}
|
|
|
|
.interduce .BPMS p,
|
|
.interduce .Others p {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.robotic {
|
|
transform: translate(50%, -50%);
|
|
}
|
|
|
|
/*.parent::before {*/
|
|
/* top: 530px;*/
|
|
/*}*/
|
|
|
|
}
|
|
|
|
@media screen and (min-width:1024px) and (max-width:1250px) {
|
|
/*.parent::before {*/
|
|
/* top: 530px;*/
|
|
/*}*/
|
|
|
|
.image {
|
|
top: 80px;
|
|
}
|
|
|
|
.hyperAutomation {
|
|
flex-direction: column;
|
|
gap: 160px;
|
|
margin-bottom: 120px;
|
|
}
|
|
|
|
.aboutHyper {
|
|
width: 100%;
|
|
}
|
|
|
|
.descRobot {
|
|
width: 320px;
|
|
margin: 0px auto 110px;
|
|
scale: 1;
|
|
}
|
|
|
|
.fourth::after {
|
|
left: -121px;
|
|
}
|
|
|
|
.field::after {
|
|
width: 120px;
|
|
}
|
|
|
|
.first::after {
|
|
right: -124px;
|
|
}
|
|
|
|
.seconde::after {
|
|
right: -123px;
|
|
}
|
|
|
|
.third::after {
|
|
left: -124px;
|
|
}
|
|
|
|
.interduce {
|
|
width: 100%;
|
|
margin: unset;
|
|
}
|
|
|
|
|
|
.interduce p{
|
|
font-size: 9.5pt;
|
|
}
|
|
|
|
.interduce .Others {
|
|
top: -119px;
|
|
right: -36px;
|
|
}
|
|
|
|
.interduce .BPMS {
|
|
top: 60px;
|
|
right: -35px;
|
|
}
|
|
|
|
.interduce .AL {
|
|
left: -43px;
|
|
top: -121px;
|
|
}
|
|
|
|
.interduce h2 {
|
|
left: -6px;
|
|
}
|
|
|
|
.interduce .ML {
|
|
left: -40px;
|
|
top: 63px;
|
|
}
|
|
|
|
.interduce>div::before {
|
|
display: none;
|
|
}
|
|
|
|
.interduce>div {
|
|
width: 27%;
|
|
}
|
|
|
|
|
|
.interduce .BPMS p,
|
|
.interduce .Others p {
|
|
margin-left: 3px;
|
|
}
|
|
.robotic {
|
|
transform: translate(50%, -50%);
|
|
}
|
|
|
|
.cards{
|
|
gap: 20px;
|
|
}
|
|
} |