/* utilities  */

/* background black */
.bg-black{
    background-color: black;
}
.bg-blue{
    background-color: #0062d3;
 }

 .bg-gray{
    background-color: #cac9c9;
 }

.w-85{
    width: 85%;
}

.w-90{
    width: 90%;
}
.w-10{
    width: 10%;
}

.z-index-xx{
    z-index: 9999999999999999999;
}

.me-xx{
    margin-right: 75px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* ------------------------------------------------------------------------------------------------- */


*{
    font-family: 'Noto Naskh Arabic', serif;
}

/* .navbar img{
    width: 200px;
} */


/* home section */
.home{

    height: 50vh;
    background-image: url(../images/1.\ BG.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.home h2{
    font-size: 50px;
}


.home_text{
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}



 .icons i:hover  {
    background-color: #569ff3;

    
 }

 
 .mt-10{
    
    margin-top: 10%;
    
 }


 .home button{
    width: 100% !important;
 }

 /* .powerdBy{
    position: absolute;
    bottom: 25px;
    left:50%;
 } */



 .pt-xx{
    padding-top: 240px;
 }


 @media all and (min-width:768px) and (max-width:1023px) {
    .responsiveSD{
        width: 100% !important;
    }


 
    
 }

 @media all and (max-width:768px) {
    .responsiveSD{
        width:100% !important;
    }
    
    .card{
        width: 100% !important;
    }

    .me-xx{
        margin: 0;
    }
    
 }
 




  @media all and (min-width:768px) and (max-width:1023px) {
    .pt-xx{
        padding-top: 433px !important;
    }
 
    
 }

 main{
    margin-top: 0 !important;
 }

 *{
    box-sizing: border-box;
 }
 .dashboard .card-icon{
    width: 27px !important;
    height: 27px !important;
 }


 
 @media all and (max-width:280px) {
    .pt-xx{
        padding-top: 192px;
    }

    .home{
        height: 120vh !important;
       
    }

    .body {
        width: 100%;
        overflow-x: hidden !important;
    }

    .home h2 {
        font-size: 36px;
    }

    .home form{
        padding: 30px !important;

    }
 }



 @media all and (max-width:360px) and (min-width:280px) {
    .row{
        width: 85% !important;
    }

    .vh-100 {
        height: 103vh!important;
    }


 }

 @media all and (max-width:412px) and (min-width:360px) {
    .home form{
        width: 75% !important
    }

 }

 @media all and (min-width:1023px){
    .home form{
        width: 50% !important
    }
 }