@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@500&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

.font-top{

  font-family: 'Reem Kufi', sans-serif;



}

body{

  font-family: "Cairo", sans-serif;

    background-color: #e4e6e7; /* لون رمادي فاتح */

    color: #212529; /* لون النص */

  /* background: #ffffff; */

  display: inline;

}



/*********animated-backgroun-end****/



.img-pack {

  height: 280px;

  width: 100%;

  background: url("../img/5.jpg")no-repeat center bottom fixed;

  background-size: cover;

  z-index: 1;

  color: #fff;

  position: relative;

}



.img-pack .content {

 position: absolute;

  text-align: center;

  

  width: 100%;

  top: 5rem;}





.color {

  height: 280px;

  width: 100%;

  z-index: 3;

    background-color: rgb(11 38 82 / 60%);

}



footer .social ul li a {

  transition: 0.5s ease;

  font-size: 1.5rem;

  color: #0dcaf0;

}



footer .social ul li a:hover {

  transition: 0.5s ease;

  color: #585858 ;

}



footer .email a {

  transition: 0.5s ease;

  font-size: 1.5rem;

  color: #0dcaf0;

}



.ser{

    font-size:1.1rem;

    color: #585858 ;

    padding: 20px; font-weight: 550;

}

/************************************************************************************/

.counter{

  font-family: 'Poppins', sans-serif;

  text-align: center;

  width: 200px;

  height: 200px;

  padding: 25px 15px 35px;

  margin: 0 auto;

  border: 18px solid #585858;

  border-radius: 100% 100%;

  box-shadow: inset 0 8px 10px rgba(0, 0, 0, 0.3);

}

.counter .counter-value{

  color: #fff;

  font-size: 35px;

  font-weight: 600;

  display: block;

  margin: 0 0 25px;

}

.counter h3{

  font-size: 16px;

  font-weight: 600;

  text-transform: uppercase;

  margin: 0;

}

.counter.red{

  color: #585858;

  background: linear-gradient(to bottom, #585858 49%, transparent 50%);

  border-color: #585858;  transition: 0.5s;

}

.counter.red:hover

{



    transform: scale(1.1);

}



.counter.blue{

  color: #1f8bc1;

  background: linear-gradient(to bottom, #1f8bc1 49%, transparent 50%);

  border-color: #1f8bc1;

}

@media screen and (max-width:990px) {

  .counter{ margin-bottom: 40px; }

}

/**************************uplod***************************************/





.uploadrow{padding: 50px 0px}

form .uploader {

  display: block;

  clear: both;

  margin: 0 auto;

  width: 100%;

  max-width: 600px;

}

form .uploader label {

  float: left;

  clear: both;

  width: 100%;

  padding: 2rem 1.5rem;

  text-align: center;

  background: #fff;

  border-radius: 7px;

  border: 3px solid #eee;

  transition: all 0.2s ease;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}

.uploader label:hover {

  border-color: #008c1e;

}

.uploader label.hover {

  border: 3px solid #008c1e;

  box-shadow: inset 0 0 0 6px #eee;

}

.uploader label.hover #start i.fa {

  transform: scale(0.8);

  opacity: 0.3;

}

.uploader #start {

  float: left;

  clear: both;

  width: 100%;

}

.uploader #start.hidden {

  display: none;

}

.uploader #start i.fa {

  font-size: 50px;

  margin-bottom: 1rem;

  transition: all 0.2s ease-in-out;

}

.uploader #response {

  float: left;

  clear: both;

  width: 100%;

}

.uploader #response.hidden {

  display: none;

}

.uploader #response #messages {

  margin-bottom: 0.5rem;

}

.uploader #file-image {

  display: inline;

  margin: 0 auto 0.5rem auto;

  width: auto;

  height: auto;

  max-width: 200px;

  border-radius: 10px;

}

.uploader #file-image.hidden {

  display: none;

}

.uploader #notimage {

  display: block;

  float: left;

  clear: both;

  width: 100%;

}

.uploader #notimage.hidden {

  display: none;

}

.uploader progress,

.uploader .progress {

  display: inline;

  clear: both;

  margin: 0 auto;

  width: 100%;

  max-width: 180px;

  height: 8px;

  border: 0;

  border-radius: 4px;

  background-color: #eee;

  overflow: hidden;

}

.uploader .progress[value]::-webkit-progress-bar {

  border-radius: 4px;

  background-color: #eee;

}

.uploader .progress[value]::-webkit-progress-value {

  background: linear-gradient(to right, #393f90 0%, #454cad 50%);

  border-radius: 4px;

}

.uploader .progress[value]::-moz-progress-bar {

  background: linear-gradient(to right, #393f90 0%, #454cad 50%);

  border-radius: 4px;

}

.uploader input[type=file] {

  display: none;

}

.uploader div {

  margin: 0 0 0.5rem 0;

  color: #5f6982;

}



/*****************************************login**************************************************/



.login .img-pack {

  height: 100vh;

  width: 100%;

  background: url("../img/1.jpg")no-repeat center bottom fixed;

  background-size: cover;

  z-index: 1;

  color: #fff;

  position: relative;

}



.login .img-pack .content {

 position: absolute;

  text-align: center;

  width: 100%;

  top: 5rem;}





  .login .color {

  height: 100vh;

  width: 100%;

  z-index: 3;

    background-color: rgb(11 38 82 / 60%);

}

.login-box{

  background: rgba(255, 255, 255, 0.815);

  padding: 20px;

  border-top: 0;

  color: #666;

  border-radius: 22px;

  transition: 0.5s ease;





 

    position: absolute;

    width: 50%;

    height: auto;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    /* margin: 7% auto; */

}

@media (max-width: 768px){

.login-box{

  width: 90%;



}

}









.contact .font {

    text-align: center;

    margin: 15px 0;

}

.contact .font li {

  display: inline-block;

  margin: 0 5px;

}

.contact .font li a {

  transition: 0.5s ease;

  color: #3f3d56;

}

.contact .font li a:hover {

  color: #0dcaf0;

}





html, body {

  height: 100%; /* اجعل الصفحة تمتد لكامل الشاشة */

  margin: 0; /* أزل الهوامش الافتراضية */

  display: flex;

  flex-direction: column; /* ترتيب العناصر رأسيًا */

}



main {

  flex: 1; /* اجعل القسم الرئيسي يتمدد لملء الفراغ */

}



footer {

    background-color: #e4e6e7; /* لون رمادي فاتح */

    text-align: center; /* محاذاة النص في الوسط */

    padding: 1rem 0; /* مسافة داخلية */

    position: relative; /* موقع الفوتر */

}