@charset "utf-8";
/* CSS Document */
@font-face { font-family: "vazir"; src: url("fonts/Vazir-Medium.ttf") format("truetype"); }
	@font-face { font-family: "sf"; src: url("fonts/SFArabic-Ultralight.ttf") format("truetype"); }
	@font-face { font-family: "yekan"; src: url("fonts/Yekan.ttf") format("truetype"); }


.about-card *{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{

font-family:"sf";
overflow-x:hidden;

}

.about-card{

width:100%;
display:flex;
justify-content:center;
padding:120px 0;

}

.glass-card{

position:relative;

width:1400px;
height:470px;

border-radius:40px;

background:rgb(203 203 203 / 21%);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border:2px solid rgba(255,255,255,.25);

overflow:hidden;

display:flex;
align-items:center;

box-shadow:

0 1px 36px rgb(203 203 203 / 14%);
	margin-top: 35px;
}


.shine{

position:absolute;

top:-150%;

left:-60%;

width:40%;

height:350%;

background:linear-gradient(

90deg,

transparent,

#0fbea569,

transparent

);

transform:rotate(-35deg);

transition:1.4s;

filter:blur(15px);

opacity:.8;

pointer-events:none;

}

.glass-card:hover .shine{

left:150%;

}


.left{

width:35%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:5;

}

.logo{

width:180px;

margin-bottom:30px;

}

.left h1{

font-size:68px;

font-weight:700;

color:#939598;

margin-bottom:15px;

}

.left span{

font-size:25px;

letter-spacing:4px;

color:#169d8a;

}


.divider{

width:2px;

height:300px;

background:linear-gradient(

transparent,

#169d8a,

transparent

);

box-shadow:0 0 40px #169d8a;

}


.right{

width:65%;

padding:70px;

display:flex;

align-items:center;

justify-content:center;

direction:rtl;

z-index:5;

}

.right p{

color:#169d8a;

font-size:20px;

line-height:46px;

text-align:justify;

font-weight:300;

}


.particles{

position:absolute;

width:100%;
height:100%;
left:0;
top:0;

overflow:hidden;

pointer-events:none;

}

.particle{

position:absolute;

border-radius:50%;

background:#63ffe4;

box-shadow:

0 0 10px #63ffe4,

0 0 20px #63ffe4,

0 0 35px #63ffe4;

animation:float linear infinite;

opacity:.8;

}

@keyframes float{

0%{

transform:translateY(50px);

opacity:0;

}

20%{

opacity:1;

}

80%{

opacity:1;

}

100%{

transform:translateY(-900px);

opacity:0;

}

}


/*================ MOBILE =================*/

@media (max-width:900px){

.about-card{

    padding:40px 15px;

}

.glass-card{
margin-top: 20%;
    width:100%;
    height:auto;

    flex-direction:column;

    padding:40px 25px;

    border-radius:25px;

}

.left{

    width:100%;

    margin-bottom:30px;

}

.logo{

    width:130px;
    margin-bottom:20px;

}

.left h1{

    font-size:42px;

}

.left span{

    font-size:16px;
    letter-spacing:2px;
    text-align:center;

}

.divider{

    width:80%;
    height:2px;

    margin:25px 0;

}

.right{

    width:100%;
    padding:0;

}

.right p{

    font-size:17px;

    line-height:38px;

    text-align:justify;

}

}




/*نور*/
.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:2;   /* مهم */
}

.left,
.right,
.divider{
    position:relative;
    z-index:5;
}

.particle{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:0%;
    background:rgb(113 218 203);

    box-shadow:
        0 0 8px rgb(113 218 203),
        0 0 16px rgb(113 218 203),
        0 0 30px rgb(113 218 203);

    animation: floating linear infinite;
}

@keyframes floating{

0%{
    transform:translateY(30px);
    opacity:0;
}

20%{
    opacity:1;
}

80%{
    opacity:1;
}

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

}

/****************************************مشتریان****************************************/

.customers{

    width:100%;
    padding:50px 0 22px;
    overflow:hidden;

}

.customers-title{

    text-align:center;
    font-size:48px;
    color:#169d8a;
    margin-bottom:25px;

}

.customers-counter{

    text-align:center;
    margin-bottom:60px;

}

#customerNumber {

    display:block;
    font-size:72px;
    font-weight:bold;
    color:#169d8a;
    line-height:1;

}
#systemNumber {

    display:block;
    font-size:72px;
    font-weight:bold;
    color:#169d8a;
    line-height:1;

}

.customers-counter p{

    color:#8d8d8d;
    font-size:22px;
    margin-top:10px;

}

/*==========================
        CAROUSEL
==========================*/

.carousel{

    width:1280px;
    max-width:95%;

    margin:auto;

    overflow:hidden;

    position:relative;

    padding:45px 0;

}
.carousel1{

    width:1280px;
    max-width:95%;

    margin:auto;

    overflow:hidden;

    position:relative;

    padding:45px 0;

}

.carousel-track{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:30px;

    will-change:transform;

    touch-action:pan-y;

}
.carousel1-track{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:30px;

    will-change:transform;

    touch-action:pan-y;

}

/*==========================
          CARD
==========================*/

.customer-card{

    width:280px;
    min-width:280px;

    height:140px;

    border-radius:28px;

    background:#ffffff;          /* سفید مات */
    border:1px solid #e5e5e5;
    display:flex;
    align-items:center;
    gap:20px;
    padding:22px;
    text-decoration:none;
    transition:
    transform .55s,
    opacity .55s,
    box-shadow .55s;

    transform:scale(.82);
    opacity:.35;

    box-shadow:0 10px 25px rgba(0,0,0,.08);
}
/* کارت وسط */

.customer-card.active{

    transform:scale(1.12);

    opacity:1;

    z-index:20;

    box-shadow:

    0 18px 45px rgba(0,0,0,.12),

    0 0 35px rgba(22,157,138,.40);

}

.customer-card1{

    width:280px;
    min-width:280px;

    height:140px;

    border-radius:28px;

    background:#ffffff;          /* سفید مات */
    border:1px solid #e5e5e5;
    display:flex;
    align-items:center;
    gap:20px;
    padding:22px;
    text-decoration:none;
    transition:
    transform .55s,
    opacity .55s,
    box-shadow .55s;

    transform:scale(.82);
    opacity:.35;

    box-shadow:0 10px 25px rgba(0,0,0,.08);
}
/* کارت وسط */

.customer-card1.active{

    transform:scale(1.12);

    opacity:1;

    z-index:20;

    box-shadow:

    0 18px 45px rgba(0,0,0,.12),

    0 0 35px rgba(22,157,138,.40);

}

.customer-card2{

    width:280px;
    min-width:280px;

    height:140px;

    border-radius:28px;

    background:#ffffff;          /* سفید مات */
    border:1px solid #e5e5e5;
    display:flex;
    align-items:center;
    gap:20px;
    padding:22px;
    text-decoration:none;
    transition:
    transform .55s,
    opacity .55s,
    box-shadow .55s;

    transform:scale(.82);
    opacity:.35;

    box-shadow:0 10px 25px rgba(0,0,0,.08);
}
/* کارت وسط */

.customer-card2.active{

    transform:scale(1.12);

    opacity:1;

    z-index:20;

    box-shadow:

    0 18px 45px rgba(0,0,0,.12),

    0 0 35px rgba(22,157,138,.40);

}


/*==========================
          LOGO
==========================*/

.customer-logo{

    width:80px;

    height:80px;

    border-radius:18px;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.mcard{

    max-width:85px;

    max-height:85px;

}
.scard{
	max-width:120px;

    max-height:120px;
}


/*==========================
           NAME
==========================*/

.customer-name{

    color:#666;

    font-size:18px;

    font-weight:500;

}

/*==========================
        TABLET
==========================*/

@media(max-width:992px){

.carousel{

    width:100%;
    padding:35px 0;

}
.carousel1{

    width:100%;
    padding:35px 0;

}
.carousel2{

    width:100%;
    padding:35px 0;

}

.customer-card{

    width:240px;
    min-width:240px;
    height:125px;

}
.customer-card1{

    width:240px;
    min-width:240px;
    height:125px;

}
.customer-card2{

    width:240px;
    min-width:240px;
    height:125px;

}
.customer-logo{

    width:70px;
    height:70px;

}


.customer-name{

    font-size:19px;

}

}

/*==========================
         MOBILE
==========================*/

@media(max-width:768px){
	.scard{
		width: 100px;
		height: 100px;
	}

.customers{

    padding:80px 0 35px;

}

.customers-title{

    font-size:34px;

}

#customerNumber {

    font-size:52px;

}
#systemNumber {

    font-size:52px;

}
#processNumber {

    font-size:52px;

}
.customers-counter p{

    font-size:18px;

}

.carousel{

    width:100%;
    padding:25px 0;

}
.carousel1{

    width:100%;
    padding:25px 0;

}
.carousel2{

    width:100%;
    padding:25px 0;

}

.customer-card{

    width:80vw;

    min-width:80vw;

    height:115px;

}
.customer-card1{

    width:80vw;

    min-width:80vw;

    height:115px;

}
.customer-card2{

    width:80vw;

    min-width:80vw;

    height:115px;

}
.customer-card.active{

    transform:scale(1);

}

.customer-card.side{

    transform:scale(.92);

}
.customer-card1.active{

    transform:scale(1);

}

.customer-card1.side{

    transform:scale(.92);

}
.customer-card2.active{

    transform:scale(1);

}

.customer-card2.side{

    transform:scale(.92);

}
.customer-logo{

    width:60px;
    height:60px;

}

.mcard{

    max-width:42px;
    max-height:42px;

}

.customer-name{

    font-size:18px;

}

}

/*==========================
    COVER FLOW - RESPONSIVE
==========================*/

.carousel{

    overflow:hidden;

}
.carousel1{

    overflow:hidden;

}
.carousel2{

    overflow:hidden;

}

.carousel-track{

    position:relative;

    width:100%;

}
.carousel1-track{

    position:relative;

    width:100%;

}
.carousel2-track{

    position:relative;

    width:100%;

}
@media(max-width:992px){

.carousel-track{

    min-height:180px;

}
.carousel1-track{

    min-height:180px;

}
.carousel2-track{

    min-height:180px;

}

}

@media(max-width:768px){
.scard{
		width: 100px;
		height: 100px;
	}
.carousel-track{

    min-height:150px;

}
.carousel1-track{

    min-height:150px;

}
.carousel2-track{

    min-height:150px;

}

}

@media(max-width:480px){
	.scard {
    width: 85px;
    height: 85px;
    margin-right: 16px;
    margin-top: 11px;
}
.customer-card{

    width:78vw;

    min-width:78vw;

    height:105px;

    padding:16px;

    gap:14px;

}
.customer-card1 {
    width: 78vw;
    min-width: 78vw;
    height: 125px;
    padding: 16px;
    gap: 14px;
}
.customer-card2{

    width:78vw;

    min-width:78vw;

    height:105px;

    padding:16px;

    gap:14px;

}
.customer-logo{

    width:55px;
    height:55px;

}


.customer-name {
    font-size: 16px;
    margin-right: 8px;
}

}



/*==========================
      PROCESS SECTION
==========================*/

.process-carousel{
    width:1280px;
    max-width:95%;
    margin:auto;
    overflow:hidden;
    position:relative;
    padding:45px 0;
}

.process-track{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:30px;
    will-change:transform;
    position:relative;
    width:100%;
    touch-action:pan-y;
}

.process-card{
    width:280px;
    min-width:280px;
    height:140px;

    border-radius:28px;
    background:#fff;
    border:1px solid #e5e5e5;

    display:flex;
    align-items:center;
    gap:20px;
    padding:22px;

    text-decoration:none;

    transform:scale(.82);
    opacity:.35;

    transition:
        transform .55s,
        opacity .55s,
        box-shadow .55s;

    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.process-card.active{
    transform:scale(1.12);
    opacity:1;
    z-index:20;
    box-shadow:
        0 18px 45px rgba(0,0,0,.12),
        0 0 35px rgba(22,157,138,.40);
}

@media(max-width:992px){

.process-carousel{
    width:100%;
    padding:35px 0;
}

.process-track{
    min-height:180px;
}

.process-card{
    width:240px;
    min-width:240px;
    height:125px;
}

}

@media(max-width:768px){

.process-carousel{
    width:100%;
    padding:25px 0;
}

.process-track{
    min-height:150px;
}

.process-card{
    width:80vw;
    min-width:80vw;
    height:115px;
}

.process-card.active{
    transform:scale(1);
}

.process-card.side{
    transform:scale(.92);
}

}

@media(max-width:480px){

.process-card{
    width:78vw;
    min-width:78vw;
    height:105px;
    padding:16px;
    gap:14px;
}

}

/*==========================
      PROCESS NUMBER
==========================*/

#processNumber{
    display:block;
    font-size:72px;
    font-weight:bold;
    color:#169d8a;
    line-height:1;
}

/*========== TABLET ==========*/

@media(max-width:992px){

    #processNumber{
        display:block;
        font-size:72px;
        font-weight:bold;
        color:#169d8a;
        line-height:1;
    }

}

/*========== MOBILE ==========*/

@media(max-width:768px){

    #processNumber{
        display:block;
        font-size:52px;
        font-weight:bold;
        color:#169d8a;
        line-height:1;
    }

}

/*========== SMALL MOBILE ==========*/

@media(max-width:480px){

    #processNumber{
        display:block;
        font-size:52px;
        font-weight:bold;
        color:#169d8a;
        line-height:1;
    }

}