@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;
}



body{
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.backImg{
    width: 100vw;
    height:100vh;
    background-image: url('/res/imgs/truck-of-baloda-transport.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
}

.topBar{
    width: 100vw;
    height:7vh;
    background-color: #89CFF3;
    position: absolute;
    top:5%;
    display: flex;
    flex-direction: row;
    
}

.logoSide{
    width: 50vw;
    height: 100%;
    align-items: center;
    justify-content: start;
    
}

.menuSide{
    width: 50vw;
    height: 100%;
    align-items: center;
    justify-content: end;
    
}
.logoSide object{
    margin-left: 3%;
    margin-top: 0.5%;
}

.menuSide ul{
    margin-right: 5%;
    margin-top: 2.5%;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 5%;
    align-items: center;
    justify-content: end;
}

.menuSide ul li{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
    font-weight: 800;
    color: var(--floral-white);
}

.firstPage{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.firstLeft{
    width: 50%;
    height: 100%;
    
}

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

.firstRightTop{
 width: 100%;
 height:20% ;

}

.firstRightBottom{
width: 100%;
height: 80%;

display: flex;
flex-direction: column;
align-items: center; 
justify-content: center;
}

.firstRightBottomTop{
   width: 100%;
   height: 30%;

}
.firstRightBottomTop h2{
    font-family: var(--style-font);
    font-size:4rem;
    letter-spacing: 0.1rem;
    font-weight: 600;
    color:var(--pure-blue-color);
    margin-left: 5%;
}
.firstRightBottomBottom{
    width: 100%;
    height: 70%;
    align-items: center;
    justify-content: center; 
}


.firstRightBottomBottom p{
    background-color: antiquewhite;
    opacity: 0.7;
    font-family: var(--heading-fonts);
    font-size: 1.5rem;
    font-weight: 200;
    color: var(--pure-blue-color);
    padding: 10%;
    border-radius: 30px;
}

.secondPage{
    width: 100vw;
    height: 40vh;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    background-color: var(--floral-white);
}

.s-topSide{
    width: 100%;
    height: 20%; 
}

.s-bottomSide{
    width: 100%;
    height: 80%;     
}

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

.s-bottomSide p{
    font-family: var(--heading-fonts);
    font-size: 1.4rem;
    font-weight: 200;
    color:black;  
    padding-left: 3%;
    margin-top: 4%;
}

.servicePage{
    width: 100vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
}

.sp-headPart{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction:row;
}
.sp-leftSide{ 
    box-sizing: border-box;
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction:column;  
    background-color: var(--floral-white);
}

.sp-rightSide{
  width: 60%;
  height: 100%;
}

.sp-heading{
    width: 100%;
    height: 50%;
}

.sp-heading h2{
    align-items: center;
    justify-content: center;
    margin-left: 6%;
    font-family: var(--heading-fonts);
    font-size: 4rem;
    letter-spacing: 0.2rem;
    font-weight: 800;
    color: var(--pure-blue-color);  
    
}
.sp-details{
    box-sizing: border-box;
    width: 100%;
    max-width: 94%;
    height:auto;
    margin-left: 6%;
    font-family: var(--heading-fonts);
    font-size: 1.4rem;
    font-weight: 200;
    color: black;
}


.truckImage{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-image: url('/res/imgs/baloda-transport-dubai.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}

.sp-legPart {
    width: 100%;
    height:50%;
    padding: 2%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    background-color:var(--floral-white);
}

.sp-rows{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
}

.serve{
    width:32%;
    height: 100%;
    border-radius: 20px;
    background-color: #00AEEF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align:center;
    box-sizing: border-box;
}    

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

.ser1{
    width: 100%;
    height: 50%;
    background-image: url('/res/imgs/heavy-cargo-truck-transport--in-dubai.svg');
    background-repeat: no-repeat;
    background-position: center;

}

.ser2{
    width: 100%;
    height: 50%;
    background-image: url('/res/imgs/readymade-construction-walls-transportation-in-dubai.svg');
    background-repeat: no-repeat;
    background-position: center;

}
.ser3{
    width: 100%;
    height: 50%;
    background-image: url('/res/imgs/\ construction-equipment-truck-transport--in-duba.svg');
    background-repeat: no-repeat;
    background-position: center;

}
.ser4{
    width: 100%;
    height: 50%;
    background-image: url('/res/imgs/tow-truck-vehicle-service-in-dubai.svg');
    background-repeat: no-repeat;
    background-position: center;

}
.ser5{
    width: 100%;
    height: 50%;
    background-image: url('/res/imgs/forklift-rental-service-in-dubai.svg');
    background-repeat: no-repeat;
    background-position: center;

}
.ser6{
    width: 100%;
    height: 50%;
    background-image: url('/res/imgs/24-by-7-service-in-dubai.svg');
    background-repeat: no-repeat;
    background-position: center;

}

.staticsSection{
    width: 100vw;
    height: 50vh;
    display: flex;
    flex-direction:column;
    background-color: var(--floral-white);
}

.s-heading{
    width: 100%;
    height: 40%;
}


.s-heading h2{
font-family: var(--heading-fonts);
    font-size: 2rem;
    letter-spacing: 0.2rem;
    font-weight: 800;
    color: var(--pure-blue-color);
    padding-left: 3%;
    margin-top: 1%;
}
.s-heading p{
    font-family: var(--heading-fonts);
        font-size: 1.4rem;
        font-weight: 200;
        color: black;
        padding-left: 3%;
        margin-top: 0.5%;
}

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

.s-serve{
    width: 30%;
    height: 90%;
    display: flex;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
}

.numbers{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}
.n-det{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

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

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

.footer{
    width: 100vw;
    height:auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #7a7a7a;
}
.fupper{
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction:row;
    box-sizing: border-box;

}

.logoside {
    width: 40%;
    height:auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logoside img {
    max-width: 70%;
    max-height:auto;
    object-fit: contain;
}

.contentside{
    width: 60%;
    height: 100%;
    display: flexx;
    flex-direction: row;
    box-sizing: border-box;
    
}

.address{
    width: 100%;
    height:auto;
    text-align: center;

}

.address h2{
    font-family: var(--heading-fonts);
        font-size: 2rem;
        letter-spacing: 0.2rem;
        font-weight: 800;
        color:var(--snow);
        padding-left: 3%;
        margin-top: 1%;
}
.address h3{
    font-family: var(--heading-fonts);
        font-size: 1.4rem;
        font-weight: 200;
        color: black;
        padding-left: 3%;
        margin-top: 0.5%;
        line-height: 1.6;
}

.address p{
    font-family: var(--heading-fonts);
        font-size: 1.4rem;
        font-weight: 200;
        color: black;
        padding-left: 3%;
        margin-top: 0.5%;
        line-height: 1.6;

}
.aboutus{
    width: 100%;
    height:auto;
    
}

.aboutus  p{
    font-family: var(--heading-fonts);
        font-size: 1.4rem;
        font-weight: 200;
        color: black;
        padding-left: 3%;
        margin-top: 0.5%;
        line-height: 1.6;
    align-items: center;
    padding-right: 1%;
}

.aboutus h2{
    text-align: center;
    font-family: var(--heading-fonts);
        font-size: 2rem;
        letter-spacing: 0.2rem;
        font-weight: 800;
        color:var(--snow);
        padding-left: 3%;
        margin-top: 1%;

}

.aboutus h3{
    font-family: var(--heading-fonts);
        font-size: 1.4rem;
        font-weight: 200;
        color: black;
        padding-left: 3%;
        margin-top: 0.5%;
}
.flover{
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: antiquewhite;
}

.cop{
    font-family: var(--heading-fonts);
    font-size: 1.4rem;
    font-weight: 200;
    color: black;
    padding-left: 3%;
    /* makes it more readable */
}


.techfelicitas{
    width: 70%;
}
.techfelicitas a {
    margin-left: 10%;
    color: rgb(167, 0, 0);
    /* red color */
    text-decoration: none;
    /* remove underline */
    cursor: pointer;
    /* show hand cursor */
    font-family: var(--heading-fonts);
    font-size: 1.4rem;
    font-weight: 400;
}

/* This for the mobile version only */

/* Style for hamburger icon */
.hemburger {
    display: none !important;
    /* Hide by default on larger screens */
}

@media screen and (min-width: 485px) and (max-width: 1024px) {
    .hemburger {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .menu {
        display: block;
        /* Show the menu on small screens */
    } }