:root{
    --orange : #FFAA23;
    --red : #FE6150;
    --blue : #124E70;
    --light-blue : #1BC0C6;
    --gray : #DFE0E5;
    --skyblue : #5CBEC5;
    --white : #fff;
    --main-font: 'El Messiri', sans-serif;
    --main-font2: 'Tajawal', sans-serif;
}
@font-face {
  font-family: testfont;
  src: url(../fonts/ArbFONTS-Montserrat-Arabic-Regular.ttf);
}
@font-face {
    font-family: testfont3;
    src: url(../fonts/ArbFONTS-Montserrat-Arabic-Light.ttf);
  }
html{
      scroll-padding-top : 150px;
      scroll-behavior : smooth;
  }
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #f6f6f6;
    overflow-x: hidden;
    font-family: testfont;
}
.title{
    margin: 4vh auto;
    font-size : 7.5vh;
}
.subtitle{
    color : #b7b7b7;
    font-family : testfont2;
}
.contact-form{
    margin: 15vh auto;
    direction: rtl;
    color: var(--blue);
}
.track-label{
    color : var(--blue);
    margin-bottom : 10px;
    font-size : 20px;
}
.form-input{
    margin: 2vh 0;
    padding: 0;
}
.submit-btn{
    width: 10%;
    font-size: large;
    background-color: var(--skyblue);
    border: 1px solid var(--skyblue);
    color: var(--white);
    padding : 5px 0;
}
::-webkit-input-placeholder { /* Edge */
    color: #cccccc !important;
    }
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #cccccc !important;
    }
::placeholder {
    color: #cccccc !important;
    }
/*****************************************************************************/
.track-container{
    direction : rtl;
    text-align : right;
    width : 100%;
    font-family : testfont;
}
.info-title{
    font-size : 24px;
    color : #b7b7b7;
    padding-bottom : 7px;
    padding-right : 5%;
    border-bottom : 1px solid var(--gray);
}
.info-value{
    font-size : 22px;
    padding-right : 5%;
    color : var(--skyblue);
}
.request-section{
    background-color : #efefef;
    margin : 0 auto;
    text-align : center;
    color : #b7b7b7;
    padding : 2.5% 5%;
}
.request-section:nth-child(odd){
    background-color : #fff;
}
.request-title{
    color : var(--blue);
    padding-bottom : 5px;
    border-bottom : 1px solid var(--gray); 
    text-align : right;
    font-size : 24px;
}
.request-row{
    margin : 20px auto;
}
.request-col{
    margin-bottom : 15px;
}
.request-col-data,
.request-col-value{
    font-size : 16px;
}
.request-col-value{
    color : var(--skyblue);
}
.car-ref{
    text-decoration : none;
    color : var(--skyblue);
}
.car-ref:hover{
    color : var(--skyblue);
}
.request-status{
    text-align : right;
    font-size : 16px;
    color : var(--skyblue);
}
.update-time{
    text-align : left;
    font-size : 14px;
}
@media only screen and (max-width : 850px){
    .track-container{
        width : 100%;
    }    
}