/*
الألوان
#277071
#3560ab
#047e79
#848784
*/
*{text-decoration:none;margin:0;padding:0;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.par-tp{display:block;width:100%;clear:both;height:35px;position:fixed;top:0;right:0;left:0;max-width:1100px;margin:0 auto;}

body{
    background-color: #fbfeff;
    margin: 0px;
}
@font-face {
    font-family: myFirstFont;
    src: url(font/Tajawal-Bold.ttf);
}
/*تطبيق الخط على كل النص*/
*{font-family: myFirstFont;}
    .fixed-bottom{
    position: fixed;
    margin-right: 1200px !important;
   
     }
     @media(max-width:992px) {
           .fixed-bottom{
    position: fixed;
    margin-right: 0px !important;
    background-color: #eee;
           }
     }
header {
    background-color: #f9f9ff;
    max-width: 100%;
    width: 100%;
    height: 80px;
    border-bottom: 4px solid #277071;
    position: fixed;
    z-index: 1300;

}
.img{
    width:20%;
    margin:5px 0px;
    margin-top:10px;
    margin-bottom: 0px;
}
.button3 {
  background-color: #CBEAF6; 
  color: red; 
  border: 0px solid #000000;
}
.fas{padding-left:3px;}
.navbar{
    width:77%;
    float:left;
    display:block;
    clear:both;
    position:relative;
    font-size:13px;
    padding:0 15px 0 0;
    margin-top: 10px;
    margin-bottom: 0px;
}
.navbar:before{
    background:#277071;
    box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
    color:#ffffff;
    width:2000px;
    overflow:hidden;
    display:block;
    clear:both;
    position:absolute;
    border-bottom-left-radius:5px;
    transform:skewX(30deg);
    right:0;
    content:"";
    transform:skewX(-30deg);
    border-bottom-right-radius:5px;
    height:40px;
}
.navbar-nav .nav-item a{
    color:#fff !important;/*لون خط القائمة */ 
    text-align:right;/*اتجاه نص القائمة*/
    float:right;
    margin:0;
    font-size:12px;
    position:relative;
    left:0px;
    display:inline-block;	
}
.dropdown-menu{
    background-color:#fff !important; /*لون القائمة  المنسدلة*/	
}
.navbar-nav .nav-item .dropdown-item{
    color:#277071!important;
}
/*تغير لون القائمة المنسدلة عند مرور الماوس*/	
.navbar-nav .nav-item .dropdown-item:hover{
    background-color:#277071 !important; 
    color:#fff !important; 
}
.navbar .navbar-nav .nav-link:focus {
    color: #fff;
    border-bottom:2px solid #fff;
}
.img2{
    display:none;
}
@media screen and (max-width:992px){
    #icon{
        color:#277071;
    }
    .navbar:before{
        color:#277071;
        width:100%;
        display:block;
        clear:both;
        position:absolute;
        border-bottom-left-radius:none;
        transform:none;
        right:none;
        content:none;
        transform:none;
        border-bottom-right-radius:none;

    }
    .navbar:after{
        content: ''; 
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: opacity .15s ease-in-out;
        opacity: 0;
        visibility: visible;
        background-color: rgba(0,0,0,.7);
        pointer-events: none;

    }
    .dropdown-menu {
        background-color:#fff!important;
        margin-top:5px;
    }

    .navbar .navbar-nav .nav-link:focus {
        color:none;
        border-bottom:none;

    }
    header{
        background-color:#f9f9ff;
        max-width:100%;
        height:0px;
        text-align:center;
    }
    .img{
        width:50%;
        margin-top:60px;
        display:none;
    }
    .img2{
        width:50%;
        display:block;
        margin-right:25%;
      
    }
    .navbar {
        background: #fff;
        width: 100%;
    }
    .navbar-nav .nav-item a{
        color:#277071 !important;

    }
    .navbar-toggler {
        position: relative;
        top:3vh;
        z-index: 1035;
    }

}


/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}	
/* ============ desktop view .end// ============ */


@media all and (min-width:991px) {  
    .dropdown:after{
        content: ''; 
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: opacity .15s ease-in-out;
        opacity: 0;
        visibility:hidden;
        background-color: rgba(0,0,0,.5);
        pointer-events: none;
        z-index:1033;
    }

    .dropdown:hover .nav-link{
        position:relative;

    }

    .dropdown:hover:after{
        z-index:10; opacity:1; 
        visibility:visible;
        position: fixed;
    }
}
* {box-sizing:border-box}

.carousel-item{
    margin-top: 40px;
    height: 300px;
    text-align: justify;
}
@media(max-width:767px) {
    .carousel-item{
        margin-top: 40px;
        height: 300px;
        text-align: justify;
        alignment-adjust: middle;
        position: inherit;
    }
}
.carousel-p{
    margin-top: -180px;

    text-align: center;

}
@media(max-width:767px) {
    .carousel-p{


        text-align: center;
        alignment-adjust: middle;

    }
}
.carousel-inner{
    margin-top: 65px;
    height: 300px

}
@media(max-width:767px) {
    .carousel-inner{
        margin-top: 70px;
        max-width:none;
        height: max-content;
        margin-right:-50px;
        margin-left: 20px;
        text-align: right;

    }
}
#demo {
    background: linear-gradient(112deg, #EEF8FC 50%, #CBEAF6 50%);
    max-width: max-content;
    max-height: none;
    margin-right:150px;
    margin-left: 150px;
}
@media(max-width:767px) {
    #demo {
        background: linear-gradient(112deg, #EEF8FC 50%, #CBEAF6 50%);
        max-width: max-content;
        max-height: none;


    }
}
.carousel-caption {
    position: static;
    z-index: -1;
    padding: 5rem 8rem;
    color: rgba(78, 77, 77, 0.856);
    text-align: center;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: bold;
    line-height: 2rem;
    margin-top:150px;

}

@media(max-width:767px) {
    .carousel-caption {
        position: relative;
        z-index: -1;
        padding: 3rem 2rem;
        color: rgba(78, 77, 77, 0.856);
        text-align: center;
        font-size: 0.7rem;
        font-style: italic;
        font-weight: bold;
        line-height: 1.5rem;
        margin-top:150px;   
    }

}
.carousel{
    z-index:-1;
    margin-left: 100px;
    position: static;



}
@media(max-width:767px) {
    .carousel {
        z-index: -1;

        position: static;
        margin-bottom: 50px;

    }
}
.carousel-caption img {
    width: 6rem;
    border-radius: 5rem;
    margin-top: 1rem;

    text-align: center; 

}

@media(max-width:767px) {
    .carousel-caption img {
        width: 4rem;
        border-radius: 4rem;

        text-align: center; 
    }
}
#image-caption {

    margin-top: 0.5rem;
    width:max-content;

    text-align: center; 
}

@media(max-width:767px) {
    #image-caption {

        width: max-content;

        text-align: center; 
    }
}

.carousel-control-next{
    z-index: 1031;
    top: inherit;
    margin-bottom:190px;

    margin-left: 100px;
}
.carousel-control-prev{
    z-index: 1031;
    top: inherit;
    margin-bottom:190px;
    margin-right: 150px;

}
@media(max-width:767px) {
    .carousel-control-next, .carousel-control-prev{
        z-index: 1031;
        top: inherit;
        margin-bottom:200px;
    }
    .modal{
        z-index: 1600;
    }
}
 .modal{
        z-index: 1600;
    }

.table1 {
    margin-right: 40px;
    margin-left: 50px;
    z-index:1500;

    width: 80% ;
    text-align: center;
    font-size: small
}
.th, .td{
    width: 15% ;
    border: 1px black solid ;

}
.button1{
    margin-top: 10px;
    text-align: right;
    background-color: #555555;
    padding: 12px 20px;
    border: 2px solid #4CAF50;
    border-radius: 12px;

}

.button1:hover{
    background-color:#009900; /* Green */
    color: white;
}
.button2{
    margin-top: 30px;
    text-align: right;
    background-color: #d60706;
    padding: 12px 40px;
    border: 2px solid #4CAF50;
    border-radius: 12px;
}
.button2:hover{
    background-color: #721c24; /* Green */
    color: white;
}
@media(max-width:767px) {
    .par-tp {
        display: block;
        width: 100%;
        clear: both;
        height: 25px;
        position: initial;
        top: 0;
        right: 0;
        left: 0;
        max-width: 1100px;
        margin: 0 auto;
        margin-top: -10px;
        z-index: 1500;

    }

}


@media(max-width:767px) {

}


.tableshow{
    width:max-content; 
    margin-top: 80px; 
    margin-bottom: auto;
    font-size: medium;


} 
.th.td{
    width: 50px;
}
@media(max-width:767){
    .tableshow{
        width:max-content; 
        margin-top: 80px; 
        margin-bottom: auto;
        font-size: small;

    }    
    .th.td{
        width: 30px;

    }
}
.box-1 {
    margin-top: 30px;
    /* border: 1px solid #F3F3F3; */
    /* background-color: #F3F3F3; */
    text-align: center;
    padding: 20px;
    transition: transform .2s;
}
.trcolor{
    background-color: #EEF8FC
}
.thcolor{
    background-color: royalblue;
    color:white
}
.skitter2{
    padding-top:100px;
}
.auto_height { 
  width: 65%;
}

.et-demo-options-toolbar {
  position: relative;
  top: 50%;
  width: 40px;
  right: 0;
  line-height: 60px;
  border: 1px solid #eee;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  z-index: 99999;
  background: #fff;
  text-align: center;
  -webkit-box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1);
          box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1);
}

.et-demo-options-toolbar a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #000000;
}

.et-demo-options-toolbar a:focus, .et-demo-options-toolbar a:hover {
  color: #111 !important;
}