@font-face {
  font-family: 'fontawesome';
  src: url('../fonts/FontAwesome/fa-solid-900.eot') format('eot'),
    url('../fonts/FontAwesome/fa-solid-900.woff') format('woff'),
    url('../fonts/FontAwesome/fa-solid-900.ttf') format('truetype'),
    url('../fonts/FontAwesome/fa-solid-900.svg') format('svg');
}

@font-face {
  font-family: 'alqalam';
  src: url('../fonts/Al Qalam Quran Majeed.ttf') format('truetype');
}

@font-face {
  font-family: 'diavlo';
  src: url('../fonts/Diavlo_BLACK_II_37.otf') format('truetype');
}

@font-face {
  font-family: 'steagal';
  src: url('../fonts/Steagal-Me.otf') format('truetype');
}
.icon-runsalah{
  text-align: center;
  font-family: 'runsalah';
  font-size: 48px !important;
}

.icon-smscir{
  text-align: center;
  font-family: 'smscir';
  font-size: 48px !important;
}

.awesome{
  font-family: 'fontawesome';
  font-size: 48px !important;
  font-weight: 400 !important;
}

.align{
  text-align: center;
}

.margin-auto
{
  margin: auto;
}

.close
{
  width: 60px;
}
.arabe
{
  font-family: 'alqalam';
  font-weight: normal;
  font-size: 42px;
}

.date
{
  margin-top: 15px;
}

/* ---- HEADER ---- */

#section_nav p{
  font-size: 32px;
  color: black;
}

.main-text{
  color: #000000;
font-size: 22px;
font-weight: bold;
background: #FFFFFFBF;
text-align: center;
border-radius: 30px;
padding: 10px;
}

#mainNav {
  background-color: #FF000000 ;
  color: #fff;
  height: 60px;
  padding: 0px 0px 0px 150px;
}

header{
  background:url(../img/maxresdefault.jpg) 50% 100% no-repeat fixed;
}

footer{
  color: #c8c8c8;
  margin-top: 70px;
  margin-bottom: 30px;
  font-weight: 200;
}

.navbar-light .navbar-toggler {

border-color: #000000 !important;
width: 56px;
}



/* ---- PRODUCTION ---- */


ul
{
  padding-left: 40px !important;
}

p{
 color: #656565;
 font-size: 17px;
 font-weight: 300;
}

.title{
  background-color: #EFEFEF;
  color: #000000;
  padding-top: 50px;
  padding-bottom: 50px;
  font-family: 'steagal';
  font-size: 40px;
  margin-bottom: 40px;
}

.logo-app{
  height: 100px;
  width: 100px;
  border-radius: 10px;
}



.logo
{
  height: 200px;
}
.mobile{
  background: url(../img/phone.png) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 280px 560px;
  height: 560px;
}

.mobile>img{
  width: 240px;
  margin-top: 60px;
}

.badge_app{
  height: 70px;
}

.appstore{
  padding: 30px;
}

.tv{
  background: url(../img/tv1.png) ;
  background-repeat: no-repeat;
  background-position: center;
/*  background-size: 767px 430px;*/
  width: 75%;
  margin: auto;
}

.tv>img{
  width: 96%;
  margin: 2%;
}

.competence{
  line-height: 150px;
  width: 150px;
  text-align: center;
  border-radius: 75px;
  color: #FFFFFF;
  font-size: 18px;
  margin: auto;
  margin-bottom: 15px;
}


.itemApp{
  font-size: 18px;
}

.itemApp:hover>p {
  font-size: 20px;
}



.formation {
  max-width: 250px;
  text-align: center;
  border: 1px solid #CACACA;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 50px;
  background-color: #FFFFFF;
}

.contact_phone
{
  max-width: 250px;
  text-align: center;
  border: 1px solid #000000;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 50px;
  background-color: #FFFFFF;
}

.graduationicon {
  width: 100px;
  height: 100px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #000;
  text-align: center;
  line-height: 100px;
  background: #FFFFFF;
  border-radius: 100px;
}

.phoneicon {

  color: #000;
  text-align: center;
  background: #FFFFFF;
  font-family: 'fontawesome';
  font-size: 35px !important;
  margin-left: 30px;

}

.backgroundgraduation {
  background-color: #29B6F6;
  padding: 10px;
}

.graduationlocalisation {
  font-size: 18px;
  font-style: normal;
}

.graduationtitle {
  font-size: 20px;
  font-weight: 500;
  margin-top: 50px;
  margin-bottom: 50px;
}

.gaduationdate {
  font-size: 29px;
  font-weight: 300;
  margin: 30px;
}

.zone
{
  font-size: 29px;
  font-weight: 300;
  background: #30af4a;
  font-family: 'steagal';
  color: #000000;
}

#descriptionHadj {
  color: #000;
  background-color: #FFFFFF;
  padding-top: 40px;
  padding-bottom: 40px;
}


#smscir {
  color: #000;
  background-color: #CFDCDA;
  padding-top: 40px;
  padding-bottom: 40px;
}

#smscir h2{
  color: #DB6736;
}

#runmasdjid {
  color: #000;
  background-color: #EDEDED;
  padding-top: 40px;
  padding-bottom: 40px;
}

#runmasdjid{
  color: #399BF3;
}

#oscadi {
  color: #000;
  background-color: #FFFFFF;
  padding-top: 40px;
  padding-bottom: 40px;
}

#ercane {
  color: #000;
  background-color: #F4F4F4;
  padding-top: 40px;
  padding-bottom: 40px;
}

#contact a{
  color: #000000;
}

.nav-link
{
  color: #000000 !important;
  font-family: 'steagal';

  font-size: 22px;
}

.hotel
{
  width: 100%;
  border-radius: 20px;
  text-align: center;
  max-width: 750px;
}

.logoFooter
{
  width: 100%;
  border-radius: 20px;
  text-align: center;
  max-width: 380px;
}

h2
{
  background-color: #30af4a;
  color: #000000;
  width: 200px;
}

ul
{
  font-size: 1.3em;
}

button, [type=submit]
{
  background: #30af4a;
border-color: #000000;
width: 200px;
border-radius: 10px;
border: none;
margin: 10px;
}

#mentionLegal
{
  background: #FFFFFF;
border-color: #FFFFFF;
color:#4381C1;
width: 200px;
font-size: 1em;
border-radius: 0px;
border-width: 0PX;
}

.ref
{
  font-size: 16px;
}

.important
{
  color: #FF0000;
  font-weight: bold;
}

@media (max-width: 1200px) {
  #section_nav p{
    font-size: 18px;
  }
}
/* ---- Media ---- */
@media (max-width: 992px) {

  #mainNav {
    background-color: #FFFFFF !important ;
    color: #fff;
    height: 100px !important;
    padding: 0px ;
    margin: 0px;
  }

  #section_nav{
    padding-top: 60px !important;
  }

  #section_nav p{
    font-size: 18px;
  }

.navbar-nav {
    background-color: #FFFFFFBF !important ;

  }

  .competence{
    line-height: 40px;
  }

}

.textTop
{
  font-size: 18px;
  color: #000000;
  text-align: justify;
}

.textTop2
{
  font-size: 18px;
  color: #000000;
  text-align: justify;
  font-style: italic;
}

/* ---- Media ---- */
@media (max-width: 460px) {

  .navbar-dark .navbar-brand {
    font-size: 0.94em !important;
  }
  #section_nav p{
    color: #000000;
    font-size: 18px;
  }
}

/* ---- COLOR ---- */

.bg-primary {
background-color: #ececec !important;
}

.colorRS1{
  color: #65318F !important;
}

.colorRS2{
  color: #A2206A !important;
}

.colorRS3{
  color: #EC1C4B !important;
}

.colorRS4{
  color: #F16A43 !important;
}

.colorRS5{
  color: #FFC107 !important;
}

.colorsmscir1{
  color: #DB6736 !important;
}

.colorsmscir2{
  color: #073B47 !important;
}

.colorsmscir3{
  color: #13979A !important;
}

.colorsmscir4{
  color: #D74646 !important;
}

.coloroscult1{
  color: #D64B6D !important;
}

.coloroscult2{
  color: #2D6CF6 !important;
}

.colorgranulimage1{
  color: #741F23 !important;
}

.colorgranulimage2{
  color: #7EBC3D !important;
}


.colorbackground1{
  background-color: #1976D2;
}

.colorbackground2{
  background-color: #2196F3;
}

.colorbackground3{
  background-color: #64B5F6;
}

.colorbackground4{
  background-color: #2E7D32;
}

.colorbackground5{
  background-color: #43A047;
}

.colorbackground6{
  background-color: #66BB6A;
}

.modal-footer{
  justify-content: center;
}

form{
  display: flex;
  justify-content: center;
}

.form-group{
  max-width: 250px;
}

.content-text{
  font-size: 18px !important;
  font-weight: normal;
  margin-bottom: 20px;
}