:root{
  --main: #4033C7;
  --sup: #8f8d8d;
  --info:#F4FAF3;
}

*{
  font-family: 'Tajawal', sans-serif;
}

.navbar{
  background-color: #fff;
}
body{
    background-image: url(images/back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
a{
    text-decoration: none;
    color: #B4B4B4;
}
.logo{
    background-color: white;
    border-radius: 7px;
    top: 40px;
    position: relative;
}

.inputemail input{
    border: none;
}
        .table-striped tbody tr {
          margin-top: 10px;
            height: 70px; 
        }
        tbody tr:nth-child(odd) {
          background-color: #f2f2f2;
          }
          td, th {
            border: none;
          }
 @media (max-width: 576px) { 
    .background{
        display: none;
    }
    .background2{
        display: none;
    }

    .card1{
        position: relative;
        right: 50%;
        top:-10%;
        width: 45%;
        padding: 0px 5px;
    
      }
      .card2{
        position: relative;
        right: 50%;
        top: -80%;
        width: 45%;
        padding: 0px 5px;
    
      }
      .card3{
        position: relative;
        margin-top: 25px;
        margin-right: 15px;
        width: 45%;
      }
      .loge{
        display: flex;
        
      }
      .icon1 ,.icon2 , .icon3{
        top: 0;
        right: 0;
        left: 0;
        display: inline;

      }
      .searchgroup{
        width: 100%;
      }
      #search{
        display: none;
      }
      .cont{
        flex-direction: column;
      }

      .login2{
        display: none;
      }
      .login{
        margin-top: 60px;
      }
} 


 @media (min-width: 768px) { 


    
    .card1{
        position: relative;
        right: 60%;
        top:-10%;
        width: 40%;
        padding: 0px 5px;
    
      }
      .card2{
        position: relative;
        right: 50%;
        top: 10%;
        width: 40%;
        padding: 0px 5px;
    
      }
      .card3{
        position: relative;
        right: -18%;
        top: 45%;
        width: 40%;
      }
      .icon1{
        top: -60px;
      }
      .icon2{
        top: -70%; 
        right: 65%;
      }
      .icon3{
        top: -410px; left: 28px;
      }
      .searchgroup{
        width: 75%;
      }

 
      .login{
        padding-right: 120px;
      }
}
 
 @media (min-width: 992px) {


    .card1{
        position: relative;
        right: 65%;
        top:-10%;
        width: 40%;
        padding: 0px 5px;
    
      }
      .card2{
        position: relative;
        right: 50%;
        top: 10%;
        width: 40%;
        padding: 0px 5px;
    
      }
      .card3{
        position: relative;
        right: -18%;
        top: 40%;
        width: 40%;
      }
      .icon1{
        top: -80%;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;      }
      .icon2{
        top: -50%; 
        right: 70%;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;      }
      .icon3{
        top: -7.5%; left: 25%;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;      }
      .searchgroup{
        width: 75%;
        padding: 0px 45px;
      }
      .cont{
        justify-content: space-between;
      }

      .login{
        padding-right: 120px;
      }
  }
 
 @media (min-width: 1200px) { 
    
  }
 
 @media (min-width: 1400px) { 
    
  }
  .background , .background2{
    position: absolute; z-index: -1;
  }
  .card1 p , .card2 p ,.card3 p{
    margin-bottom: 5px;
    font-size: 10px;
    color: var(--sup);
  }
  .card1 h6 , .card2 h6 , .card3 h6{
    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 600;
    color:var(--main) ;
  }
  .card{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 8px;    
    border: none;
  }
  
  .card-header{
    background-color: #22a10900;
  }
  .code-input {
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 20px;
    margin: 5px;
    border-radius: 7px;
    border: 0.5px solid var(--sup);
  }
  .list-group-item{
    border: none;
  }
  .breadcrumb{
    font-size: 14px;
  }
.dropdown-menu {
        text-align: right;
    }
.footer1{
  padding-bottom: 15px;
}

.bg-text {

  color: white;
  font-weight: bold;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}
.ofer .nav-item .nav-link:hover,
.ofer .nav-item .nav-link.active{
  color: #2BB673;
}
.ofer .nav-item .nav-link{
  color: #C4C4C4;
}