:root {
    --color-p: #545454;
    --color-button: #ff5722;
    --color-head: black;
    --color-p-button: white;
    --color-tapsi: rgba(23,26,60,.7);
    --color-btn-driver: #1974df;
    --padding-container: 6% 10%;        /* میشود از px هم استفاده کرد ولی در طراحی تپسی %است */
    --padding-bottom: 20px 20px;
    --font-size-h2: 35px;
    --font-weight-h2: 700;
    --margin-p: 60px;
    --font-p-medium: 18px;
    --font-p-small: 16px;
    --padding-very-small: 10px;
    --padding-larg-bottom-top: 50px;
    --margin-small-bottom-top: 15px; 
    --margin-medium-bottom: 20px;
    --line-height: 32px;
                                            /* بیشتر از 2 بار استفاده شده */
}


* {
    box-sizing: border-box;
    direction: rtl;
    margin: 0;
    padding: 0;
    border: 0 solid transparent; 
    
}


nav, ul {
    display: flex;
    padding: 4px 80px;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    background-color: #f8f8f8

}




.li-nav {
    padding-left: 20px;
    list-style-type: none;
    font-size: 15px;
    color: var(--color-p);
}

.li-nav:hover {
    color: var(--color-button);
}




.btn-download {
    padding: var(--padding-very-small) 40px;
    background-color: var(--color-button);
    border-radius: 8px;
    color: var(--color-p-button);
    text-decoration: none;
}

.btn-download:hover {
    background-color: #ff3c00;
}


.menu-mobile {
    display: none;
    flex-direction: column;

}

.nav-menu-btn {
    display: none;
    background-color: rgba(255, 255, 255, 0);
    cursor: pointer;
}

.li-nav-mobile {
    margin: 10px;
    list-style: none;
}

.fa {
    width: 24px;
}

.start-background-tapsi {
    background-image: url(./image/banner.jpg);
    background-position: center center;
    height: 73vh;
    background-size: cover;
    position: relative;
    margin-bottom: 70px;
}




.img-mobile-work {
  height: 100%;            /*برای اینکه همزمان با خود بک گراند نسبت به اون حرکت  بالا و پایین کوچیک بشود و نسبت درصد بر اساس والد است = (بک گراند)  */
  position: absolute;
  left: 10%;
  top: 36%;       
}


.tabsi-box-start {
  position: absolute;
  right: 160px;
  bottom: 20px;
  margin: 36px;
  border-radius: 18px;
  padding: 25px;
  width: 500px;
  background-image: linear-gradient(51deg,rgba(23,26,60,.7) 5%,rgba(23,26,60,.3) 95%);
} 

h1 {
    font-size: 50px;
    font-weight: 700;
    color: var(--color-p-button);
    padding-bottom: var(--padding-very-small);
}

.tabsi-p-box {
    color: #fff;
    font-size: 24px;
    margin-bottom: 30px;
}


.all-btn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}



.btn {
    background: #fff;
    border-radius: 12px;
    color: #000;
    display: flex;
    flex-direction: row;
    font-size: var(--font-p-small);
    max-height: 56px;
    margin: 5px;
    padding: 16px;
    text-align: center;
    width: 212px;
    text-decoration: none;
    transition: transform 0.5s;
}

.btn:hover {
    transform: scale(1.1);
}


.btn-border {
    background-color: var(--color-tapsi);
    border: 1px solid white;
    color: var(--color-p-button);
}


.div-btn > img {
    width: 20px;
}

.section-opption {
    padding: var(--padding-larg-bottom-top) 0;
}

.section-otopake {
    border: solid #ddd;
    border-width: 0 0 1px;
    margin: 0 200px;
    padding-bottom: 100px; 
    padding-top: 30px;
    
}

.opption-tapsi-h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-h2);
    margin-bottom: 35px;
}

.all-car {
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--padding-larg-bottom-top);
}


.a-car {
    color: var(--color-p);
    text-align: center;
    text-decoration: none;
    font-size: var(--font-p-small);
    
}

.a-car:hover{
    color: var(--color-button);
}



.car {
    width: 100%;
    max-width: 137px;
    filter: opacity(.35);
}

.car:hover {
    filter: opacity(1);
}


.container-opption {
    
    display: flex;
    flex-direction: row-reverse;
}

.img-opption {
    background-image: url(./image/man-otopake.png);
    background-size: cover;
    flex: 1;
    background-size: contain;
    background-repeat: no-repeat;
    height: 500px;

}


.text-opption {
    flex: 1;
}

.h2-opption {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: var(--margin-medium-bottom);
}


.p-opption {
    font-size: var(--font-p-medium);
    line-height: var(--line-height);
    margin-bottom: 30px;
    color: var(--color-p);
    margin-left: var(--margin-p);
}


.img-special {
    background-image: url(./image/i-mac.png);
}

.container-row-medical {
    padding: var(--padding-container);
    flex-direction: row;
    margin: 0;
}

.container-article {
    padding: var(--padding-container);
    margin: 0;
}

.a-info-div {
    margin-top: 10px;
    margin-bottom: 10px;
    transition: transform 0.5s;
}


.a-info-div:hover {
    transform: translateX(-20px);
}


.a-information {
    color: var(--color-button);
    font-size: 15px;
    text-decoration: none;
    
}


.btn-saptname {
    margin-top: 60px;
    transition: transform 0.5s;
}


.btn-saptname:hover {
    transform: translateY(-10px);
}

.h2-special {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-h2);
    margin-bottom: var(--margin-medium-bottom);
}

.saptname-a-btn{
    align-items: center;
    border-radius: 12px;
    background-color: var(--color-button);
    color: var(--color-p-button);
    padding:  var(--padding-bottom);
    text-decoration: none;
    font-size: inherit;

}


.img-medical {
    background-image: url(./image/macbook.png);
}


.img-middle {
    background-image: url(./image/parallax.jpeg);
    background-size: cover;
    background-attachment: fixed;
    height: 180px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}



.line {
    background-color: #fff;
    height: 50px;
    width: 2px;
}

.text-travel {
    padding: 0 var(--padding-very-small);
    text-align: center;
    color: var(--color-p-button);
    padding: 0px 60px;
    flex-wrap: wrap;
    
}

.travel-h3 {
    font-size: 20px;
    font-weight: 700;
    padding-top: 30px;
    
}

.travel-p {
    display: inline;
    font-size: var(--font-p-small);
    margin-top: var(--margin-small-bottom-top);
    visibility: hidden;
}

.text-travel:hover  .travel-p{
    display: flex;
    visibility: visible;
    
}




.article-driver {
    margin-left: var(--margin-p);
}

.section-driver {
    padding: 100px 0 var(--padding-larg-bottom-top);
}

.container-drivers {
    display: flex;
    flex-direction: row-reverse;
    padding: 0 10%;                                   /* پیکسل هم می شود به کار برد اما برای شبیه تر شدن طراحی از خود استایل  اندازه تپسی استفاده شده */
}

.img-driver {
  background-image: url(./image/driver.png);
  border-radius: 12px;
  height: 450px;
}




.p-driver {
    font-size: var(--font-p-medium);
    line-height: var(--line-height);
    margin-bottom: var(--margin-medium-bottom);
    color: var(--color-p);
}


.h3-driver {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: var(--margin-medium-bottom);
    margin-top: 50px;
    color: var(--color-p);
}

.span-tapsi {
    color: #0065dc;
}

.nav-driver {
    font-size: var(--font-p-small);
    line-height: var(--line-height);
    margin-bottom: var(--margin-medium-bottom);
    color: var(--color-p);
}

.div-btn-driver {
    margin-top: 50px;
    flex-wrap: wrap;
}

.btn-driver {
    background-color: var(--color-btn-driver);
}

.btn-driver:hover {
    background-color: #479bfc;
}




.article-box {
    padding: var(--padding-larg-bottom-top) 0;
}

.h2-new {
    margin-bottom: var(--padding-larg-bottom-top);
}



.all-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.h2-iran {
    margin-bottom: 30px;
}

.box {
    padding:  var(--padding-bottom);
    min-width: 33%
}
  
  
.box:hover {
      box-shadow: 0 0 15px rgb(155, 152, 152);
}
  

.h3-box {
    font-size: 22px;
    font-weight: 500;
    margin: 10px 10px;
    color: #333;
}

.p-box {
    -webkit-line-clamp: 3;                         /* بر اساس موتور جستجو  وب کیت هست که یک نوع موتور چیدمان است  */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--font-p-medium);
    line-height: 25px;
    overflow: hidden;
    text-align: justify;
    color: #9b9b9b;
}

.div-img-box {
    display: flex;
    justify-content: center;

}

.img-box {
    width: 100%;
    border-radius: 18px;
}

.city-of-iran {
    background-image: url(./image/map-back.svg);
    background-color: #f8f8f9;
    padding: 40px 10%;
    background-size: contain;
    background-repeat: no-repeat;
}

.container-list-city {
    display: flex;
    flex-wrap: wrap

}


.tehran {
    font-size: var(--font-p-medium);
    margin-bottom: var(--margin-small-bottom-top);
    width: 130px;
}

#iran-p {
    font-size: 14px;
    letter-spacing: 3px;
}

footer {
    padding: 5% 10%;
    background-color: var(--color-head);
    color: var(--color-p-button);
    
}

.container-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}


#main-tapsi {
    color: #acacac;
    
}


.logo-footer > p {
    font-size: 13px;
    padding-top: 20px;
}

.text-footer {
    display: flex;
    flex-direction: column;

}

.text-footer > a {
    font-size: 14px;
    text-decoration: none;
    color: var(--color-p-button);
    line-height: 30px;
}

.text-footer > a:hover {
    color: var(--color-button);
}

.h3-footer {
    font-size: var(--font-p-medium);
    font-weight: 700;
    margin-bottom: var(--margin-small-bottom-top);
}

.text-footer {
    padding-left: var(--padding-very-small);
}


.joine {
    display: flex;
    

}

.joine-box {
    background-color: white;
    height: 250px;
    border-radius: 18px;
    margin: 0px 10px;
    align-items: center;
    display: flex;
}




.p-end {
    padding-bottom: 40px;
    padding-top: 40px;
}


.p-end > img {
    padding: var(--padding-very-small);
}




@media (max-width: 768px) {
    .section-otopake {
        margin: 20px;
    }
    .all-btn {
        flex-direction: column;
    }
    .img-mobile-work {
        display: none;
    }

    .tabsi-box-start {
        max-width: 270px;
        right: 0;
    }
    
    h1 {
        font-size: 25px;
    }


    .tabsi-p-box, .p-opption, .p-driver, .tehran, .p-end{
        font-size: var(--font-p-small);
    }
    .travel-h3  {
        font-size: 18px;
    }
    .h3-driver{
        font-size: 20px;
    }
    .opption-tapsi-h2, .h2-opption, .h2-special, .h2-new{
        font-size: 22px;
    }
    .img-mobile-opption {
        display: none;
    }

    .a-car {
        color: #00000000;
    }

    .container-row-medica, .container-opption, .container-drivers, .container-footer{
        padding: 20px;
        flex-direction: column;
    }
    .div-btn-driver {
        display: flex;
        justify-content: center;
    }
    .btn-driver {
        margin-top: 5px ;
    }
    
    .city-of-iran {
        display: none;
    }

    .container-article {
        display: none;
    }

    footer {
        padding-right: 10px;

    }

    .joine-box {
        margin: 5px;
    }

    .img-middle {
        flex-direction: column;
        height: 100%;
    }

    .line {
        display: none;
    }
}

@media (max-width: 480px) {
    .joine-box {
        display: none;
    }
}