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

@font-face {
    font-family: 'engArabic';
    src: url('/res/fonts/Abizhar.ttf') format('truetype');
}


:root {
    --primary-color: #00AEEF;
    --secondary-color: #89CFF3;
    --third-color: #A0E9FF;
    --fourth-color: #CDF5FD;
    --floral-white: #FFFAF0;
    --snow: #FFFAFA;
    --uniBack-color: #e3faff;
    --style-font: 'engArabic';
    --heading-fonts: 'Raleway', sans-serif;
    --pure-blue-color: #0a53c9;
}

@media screen and (min-width: 320px) and (max-width: 844px) and (orientation: portrait) {


    /* Show the menu when it has the class "show" */
    #menuList{
    display: none;
    }
    .hemburger {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: end;
        align-items: center;
        cursor: pointer;
    }

    .logoSide {
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .hemburger-icn,
    .logo-icn {
        width: auto;
        height: 70%;
    }

    .hemburger-icn {
        margin-right: 3%;
    }

    .logo-icn {
        margin-left: 3%;
    }

   .backImg{
    height: 100vh;
    background-position: 30% 50%;
   }
    .firstPage {
        height: fit-content;
        
    }

    .firstLeft {
        display: none;
    }
        .firstRight {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
    
        .firstRightTop {
            height: 20vh;
        }
    
        .firstRightBottom {
            height: 60%;
            border-radius: 20px;
            background-color: antiquewhite;
            opacity: 0.7;
            box-sizing: border-box;
            padding: 2% 5%;   
          }

        .firstRightBottomTop{
            height: fit-content;
        }

        .firstRightBottomBottom p{
            margin:0;
            padding:0 5% 7% 5%;
            height: fit-content;
        }

    .firstRightBottomTop h2 {
        font-size: 1.9rem;
    }

    .secondPage{
        height: fit-content;
    }

    .s-topSide{
        height: fit-content;
        
    }
    
    .s-bottomSide{
        margin: 0;
        padding: 0;
        
    }
    .s-topSide h2{
        font-size: 1.7rem; 
    }

    .s-bottomSide p{
        font-size: 1rem;
        padding-left: 3%;
        margin-top:0;
    }


    .sp-headPart{
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
 .sp-leftSide{
    background-image: url("/res/imgs/baloda-transport-dubai.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 50%;
    margin: 0;
    padding: 0;
}

.comb{
    height:100%;
    background-color:rgb(0, 0, 0);
    width: 100%;
    opacity: 0.7;
}
.sp-rightSide{
    display: none;
}
.sp-heading{
    height: fit-content;
    margin: 0;
    padding: 0;
}
.sp-heading h2 {
    align-items: center;
    justify-content: center;
    margin-left: 3%;
    font-family: var(--heading-fonts);
    color: var(--floral-white);
    font-size: 1.7rem;
    letter-spacing: 0.2rem;
    font-weight: 800;
    
}

.sp-details{
    height: fit-content;
    margin: 0;
    padding: 0;
}
.sp-details p {
    box-sizing: border-box;
    width: 100%;
    max-width: 94%;
    height: auto;
    margin-left: 3%;
    font-family: var(--heading-fonts);
    color: var(--floral-white);
    font-size: 1rem;
    font-weight: 200;
}


.serve p {
    height: 30%;
    font-family: var(--heading-fonts);
    font-size: 0.7rem;
    font-weight: 200;
    color: black;
}

.s-heading{
    height: fit-content;
}

.s-heading h2 {
    height: fit-content;
    font-family: var(--heading-fonts);
    font-size: 1.7rem;
    letter-spacing: 0.2rem;
    font-weight: 800;
    color: var(--pure-blue-color);
    padding-left: 3%;
    margin-top: 1%;
}

.s-heading p {
    height: fit-content;
    text-align: center;
    font-family: var(--heading-fonts);
    font-size: 1rem;
    font-weight: 200;
    color: black;
    padding-left: 3%;
    margin-top: 0.5%;   
}

.staticsSection{
       width: 100vw;
        height:fit-content;
        display: flex;
        flex-direction: column;
}

.s-details {

    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    gap: 2%;
    box-sizing: border-box;
}

.numbers h2 {
    font-family: var(--heading-fonts);
    font-size: 2rem;
    letter-spacing: 0.2rem;
    font-weight: 800;
    color: var(--pure-blue-color);
    padding-left: 0;
    margin-top: 0;
}

.n-det {
    margin: 0%;
    font-family: var(--heading-fonts);
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    color: black;
    padding-left: 3%;
}

.s-serve{
    width: 100%;
    margin: 0;
    padding: 0;
}

.counter{
        margin: 0;
        padding: 0;
}

.n-det{
    margin: 0;
        padding: 0;
}

.staff,.trips,.trucks{
    height: fit-content;
    margin: 0;
    padding: 0;
}


.fupper{
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction:column-reverse;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

.contentside{
    width: 100%;
    height:fit-content;
    
}

.address{
    justify-content: center;
    align-items: center;
}
.address h2{
    height: fit-content;
    font-size: 2rem;   
}

.address h3{
    font-size: 1.2rem;
    padding: 0 7% 0 7%;
height: fit-content;
}

.address p{
    font-size: 1rem;
    padding: 0 7% 0 7%;
  height: fit-content;
}

.aboutus{
    height: fit-content;
    justify-content: center;
    align-items: center;
}

.aboutus p{
    font-size: 1rem;
    padding: 0 7% 0 7%;
}


.flover{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cop{
    text-align: center;
    font-size: 1rem;
    padding: 0 7% 0 7%;
}

.techfelicitas{
    width: 100%;
    height: fit-content;
    margin-bottom: 20px;
}
.techfelicitas a{
    width: 100%;
    height: fit-content;
    text-align: center;
        font-size: 1rem;
        padding: 0 7% 0 7%;
}
}