@import url('Fonts.css');



/*#14303e  ,  #17445a ,   #e4a42c    (background-color: #507c94; color: #333;)*/
   
        body,html{ padding: 0px; margin: 0px;}
        .Color-Box { position: absolute; top: 15px; left: 20px; padding: 0; margin: 0; width: 80px; background: #f1f1f1; }
        .Color-Box a { width: 20px; height: 20px; float: left; text-indent: -9999px; margin: 3px; cursor: pointer; border-radius: 3px; }
        #red { background: #371769; }
        #blue { background: #215384; }
        #gray { background: #496888; }
        .banel { margin: 0 auto; padding: 0px; width: 80%;}
        .banelleft { width: 60%; float: left; margin: 0 auto; padding-bottom: 10px; color: yellow ; text-align: left;}
        .banelright { width: 40%; float: right; margin: 0 auto; padding-bottom: 10px; color: white; text-align: center;}
        .banelleft img { width: 90%; height: 80px; }
        .banelTitle {width:100%; height:70px;margin:0 auto;padding:0px;}
        .PanelView { width: 100%; border-top: 2px solid white; padding: 5px; margin-top: 2%; background-color: transparent; }
        .btn { background: #507c94; color: yellow; border: 2px solid orange; font-family: Droid Arabic Kufi; margin-right: 10px; border-radius: 7px; }
        .btn:hover { text-decoration: none; background: orange; transition: .8s; color: white; }
        .butt { background: #2c3e50; color: white; padding: 5px; margin: 15px 5px 0px 0px; border-radius: 6px;border:2px solid #507c94; border-bottom: 3px solid orange; 
                font-family:'Cairo',serif; }
        .butt:hover { border-bottom: 3px solid orange; border-right: 2px solid orange;color:#069;background :white; }
        /*.labelText { width: 80%; height: auto; text-align: right; color: white; font-family: Calibri,serif; font-size: 16px; margin: 0px 10px 0px 2px; }*/

        .labelText { width: 80%; height: auto; text-align: right; color: #28ccdd; font-family: Droid Arabic Kufi; font-size: 16px; margin: 0px 10px 0px 2px; }
        .Label_Left { color: #2E6077; width:50px; float: left; margin-left:7px; text-align:right;font-family: Droid Arabic Kufi;font-size: 14px }
        .labelTextP { width: 100%; height: auto; text-align: center; color: #2E6077; font-family: Amiri; font-size: 16px;}
        .label_Header { width: 100%; height: auto; text-align: right; color: white /*#2E6077*/; font-family: Amiri; font-size: 16px;}
        .Text_Header {width: 100%; text-align: right; color: #2E6077; font-family: Amiri; font-size: 16px;border:none;}
        .Check_Style {padding-left :28px}
        .labeltitle { width: 18%; text-align: center;font-family: Amiri,serif;color :#DDD }
        .Title_P { width: 40%; font-family: Amiri,sans-serif; color:#2c3e50; font-size: 30px; text-align: center; margin: 28%;border-bottom:2px solid #28ccdd  }
        .textst { font-size: 16px; width: 250px; background: #ffffff; border-bottom: 2px solid #2c3e50;border-top:2px solid white;border-left:2px solid white;border-right:2px solid white; padding:5px; color: #2c3e50;font-weight:normal; 
                  margin:5px  auto; border-radius: 6px; text-align: center; font-family: 'Cairo', serif; }
        .textst:focus { border-bottom: 1px solid orange; }

        .contentes { border: 1px solid #563d7c; border-radius: 5px; width: 80%; height: auto; margin: 10px auto; overflow: hidden; padding: 0px; background-image: linear-gradient(45deg,#31354c,#507c94); }
        .contentes .Detials { width: 95%; height: auto; margin: 10px; padding: 10px; font-family: 'Calibri Light',Serif; }
        .contentes .Detials p { margin: 0; padding: 5px 20px 5px 5px; font-size: 14px; font-weight: bold; color: #0a487a; }
        .contentes .Detials h2 { margin: 10px; padding: 0px 0px 10px 0px; color: white; text-align: center; font-size: 20px; border-bottom: 1px solid yellow; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; width: 25%; }
        p a:hover { color: orange; border-bottom: 1px solid orange; border-radius: 5px; padding-bottom: 4px; }
       .Droplist { font-size: 12px; background: #ffffff; border: 2px solid orange; padding:0px; color: #2c3e50;font-weight:normal; 
                  margin:0px  auto; border-radius: 6px; font-family:'Cairo', serif;float:right;text-align:center;font-size:14px
}
       .Dropst { font-size: 14px; width:150px; background: #ffffff; border-bottom: 1px solid #2E6077; padding:0px; color: #2c3e50;
                  margin:0px  auto; border-radius: 6px; font-family: Droid Arabic Kufi, serif;float:right }
        /*--------------------------nav------------------------------------------------*/
        .warrp { margin: 0 auto; padding: 0px; width: 100%; font-family: Calibri,sans-serif}
        #nav-bar { border: none; margin: 0px 0px 5px 0px; padding: 0px; height: 70px; overflow: hidden; }
        .navbar-brand img { margin: 0 auto; width: 90%; padding: 0px; border: 3px solid red; }
        .navbar ul { float: right; padding: 0px; margin: 0 auto; }
        .navbar-nav li { padding: 0px; margin: 10px; display: block; }
        .navbar-nav li a { text-align: center; }
        #nav-bar ul li a { position: relative; font-family: Calibri,sans-serif; text-transform: uppercase; color: aliceblue; 
                           text-decoration: none; transition: .5s; z-index: 1; padding: 5px;margin:0px}
        #nav-bar ul li a:hover { color: #DDD; }
        #nav-bar ul li a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid orange;
                                    border-bottom: 1px solid orange; transform: scaleY(2); opacity: 0; transition: .6s; border-radius: 4px; }
        #nav-bar ul li a:hover::before { transform: scaleY(1.2); opacity: 1;}
        #nav-bar ul li a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0); background: orange;
                                   border-radius: 4px; transition: .6s; z-index: -1; }
        nav ul li ul {display:block;background-image: linear-gradient(180deg,#507c94,#17445A);min-width:60px;border-radius:6px;position:fixed;
                      margin-top:1px;box-shadow:0 2px 5px rgba(0,0,0,.5);transition:.5s;opacity:0;visibility:hidden;transform:translateY(30px) }
        nav ul li:hover ul { visibility:visible;opacity:1;transform:translateY(10px);border:1px solid white;z-index:1}/*المنيو المتحركة*/

        #nav-bar ul li a:hover::after { transform: scale(1); }
        .navbar /*المنيو الرئيسي*/ { background-color :#507c94;padding: 10px; width: 100%; }
        .navbar-toggler { border: none; background: #17445A; }
        .nav-link, .show-login-btn { height: 20px; color: white; font-size: 16px; text-transform: uppercase; font-family: Calibri,serif; font-weight: bold;}
        .active { background: #3b728e; border-top: 2px solid orange; border-bottom: 2px solid orange; border-radius: 4px; }
        /*-----------------------------------------------------footer------------------*/

        #footer { background-image: linear-gradient(360deg,#507c94,#17445A); color: #fff; padding: 0px; width: 80%; margin: 10px auto; border-radius: 5px;
                   height: 50px;}
        .fa-heart-o { margin: 3px; color: red; }
        /*================================================================-=--=-===================About=====*/
        #about { background: #555; height: 100%; width: 50%; border: 2px solid red; }
            #about .btn { margin-top: 20px; margin-bottom: 30px; }
        .about-content { padding-top: 20px; }
        .skills-bar p { margin-bottom: 6px; font-weight: 600; }
        .progress-bar { border-radius: 16px; }
        .progress { border-radius: 16px; margin-bottom: 20px; }
        /*--------------------------services---------------------*/
        #container { color: #2c3e50; background-attachment: fixed; padding: 5px 0px 0px 0px; width: 80%; border-radius: 5px; margin: 0 auto; overflow: hidden; }
        #services { background-image: linear-gradient(180deg,#f9fafb,#f9fafb); padding: 0px; width: 80%; border-radius: 5px; margin: 0 auto; min-height:80vh;}
        #services h1, #container h1 { text-align: center; color:#2c3e50 /*#2c3e50*/; padding-top: 15px; }
                 
        #services h1::after, #container h1::after { content: ''; display: block; color: #2c3e50; height: 3px; width: 370px; margin: 20px auto 5px; border-bottom: 3px solid #28ccdd; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
        .services { margin-top: 20px; direction: rtl; }
        .icon { font-size: 40px; margin: 20px auto; padding: 20px; height: 80px; width: 80px; border: 1px solid gold; border-radius: 50%; }
        #services p { font-size: 14px; padding-top: 20px; color: #2c3e50; text-align: justify; direction: rtl; }
        #services .container { margin: 0 auto; padding: 0px; width: 98%; padding: 10px; overflow: hidden; }
        .text-center { font-size: 14px; padding-top: 20px; color: #ccc; text-align: center; }
        .services .col-md-3:hover { background: #007bff; cursor: pointer; transition: 0.7s; border-radius: 10px; }
        /*-------------------------------------------------------------------------------------------------*/
        .login-box { position: absolute; top: 35%; left: -100%; width: 50%; height: 50%; background-image: linear-gradient(90deg,#DDD,#17445A);
                      transition: 0.4s; border-radius: 8px; box-shadow: 5px 5px 5px gold; }
        .login-contient { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; text-align: center;font-family:'Cairo',serif;}
        .login-form h1 { font-weight: 400; margin-top: 0; }
        .txtb { display: block; box-sizing: border-box; width: 240px; background: #ffffff; border: 1px solid white; padding: 10px 20px; color: #2c3e50; outline: none;
                 margin: 10px 0; border-radius: 6px; text-align: center; font-family:'Cairo',serif;width:100% }
        .txtb:focus { border-right: 5px solid orange; border-radius: 6px; }
        .login-btn { width: 240px; background: #2c3e50; border: none; color: white; padding: 10px; margin: 10px 0px; border-radius: 6px;
                      border-bottom: 3px solid white; font-family:'Cairo',serif;width:100%  }
        .login-btn:hover { border-bottom: 3px solid yellow; border-right: 4px solid orange; }
        .hide-login-btn { color: white; position: absolute; top: 10px; right: 40px; cursor: pointer; font-size: 24px; opacity: .7; }
        /*#show-login-btn{position: absolute;top: 10%;right: 10%;transform: translate(-50%,-50%);color: white;border: 2px solid;padding: 10px;cursor: pointer;font-size:20px;}
            .show-login-btn{position: absolute;top: 10%;right: 10%;transform: translate(-50%,-50%);color: white;border: 2px solid;padding: 10px;cursor: pointer;font-size:20px;}*/
        .show-login-btn:hover { background-image: linear-gradient(180deg,#1f4f67,#17445A); transition: 0.4s; }
        .showed { left: 25%; }
       

        /*------------------------Massages style----------------------------------------------------------------------*/
        .Massage { border: 2px solid orange; border-radius: 17px; margin-left :2%;margin-bottom :30px;padding: 0px; width: 63%; background-image: linear-gradient(100deg,#ccc,white); 
                   overflow: hidden; font-family: Calibri,sans-serif; line-height: 20px; }
        .DetialesMs { border-top: 38px solid #435669; padding: 5px; font-size: 12px; width: 100%; }
        .DivSend { width: 100%; min-height: 35px; margin-top: 10px; padding: 10px 0px; overflow: hidden; bottom: 5px; }
        .ButnDivSender { width: 15%; border: 2px solid #435669; min-height: 35px; border-radius: 5px; float: right; margin-right: 10px; color: black; Height: 39px; }
        .ButnDivSender:hover { background-color: orange; color: white; border: 2px solid blue; }
        .TextSend { width: 100%; border: 2px solid #435669; border-radius: 7px; text-align: center; float: left; margin-left: 10px; color: blue; padding-top: 10px; }
        .TextSend:focus { border-right: 8px solid #435669; padding-top: 10px; border-radius: 7px; }
        /*=========================================================================================================================*/
        .services-section { background: url(../Img/manger2.jpg); background-size: cover; padding: 60px 0px; }
        .inner-width { width: 100%; max-width: 1200px; margin: auto; padding: 0 20px; overflow: hidden; }
        .section-title { text-align: center; color: white; text-transform: uppercase; font-size: 40px; }
        .border { width: 190px; height: 2px; background: #82ccdd; margin: 20px auto; }
        .services-container { display:flexbox;flex-wrap:wrap;margin-top:21px}
        .services-box {float:right;max-width:25%; padding: 10px; text-align: center; color: #2c3e50; cursor: pointer; }
        .services-icon { display: inline-block; width: 70px; height: 70px; border: 3px solid #28ccdd; color: #28ccdd; transform: rotate(45deg); margin-bottom: 30px;margin-top:16px;transition:0.3s linear }
        .services-icon i { line-height:70px;font-size:30px;transform:rotate(-45deg)}
        .services-box:hover .services-icon{background:#28ccdd;color:#ddd }
        .services-title { font-size:22px;text-transform:uppercase;margin-bottom:10px;font-family: 'Droid Arabic Kufi', serif}
        .services-desc { font-size:18px;}
        @media screen and (max-width:960px) 
        {
            .services-box { max-width:50%;}
            .Detials { max-width:100%;}
        }
        @media screen and (max-width:768px) 
        {
            .services-box { max-width:39%;}
            .Detials{ max-width:100%;}
        }
        @media screen and (max-width:480px) 
        {
            .services-box { max-width:100%;}
        }

        /**8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888*/

            header {position:absolute;top:0 ;left:10%;padding:0 20px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;
                    width:80%;margin:0 auto;box-sizing:border-box;background-image: linear-gradient(180deg,#9fbaa8,#31354c);}
            header .logo { color:white;height:50px;line-height:50px;font-size:24px;float:left;font-weight:bold}
            header nav { float:right;}
            header nav ul { margin: 0 auto; padding: 0;display:flex}
            header nav ul li { list-style:none}
            header nav ul li a { height:50px;line-height:50px;padding:0 20px;color:#fff;text-decoration:none;display:block }
            /*header nav ul li a::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid orange; border-bottom: 1px solid orange; transform: scaleY(2); opacity: 0; transition: .6s; border-radius: 4px; }
            header nav ul li a:hover ::before  { transform: scaleY(1.2); opacity: 1; }
            header nav ul li a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0); background: orange; border-radius: 4px; transition: .6s; z-index: -1; }*/
            header nav ul li a:hover,header nav ul li a.active {color:#fff;background-image: linear-gradient(180deg,#1f4f67,#17445A);}
           .menu-toggle { color:#fff;float:right;line-height:50px;font-size:24px;cursor:pointer;margin:10px;display:none}

        @media (max-width:991px) 
        {
            header {padding:0 20px;margin-bottom:80px }
            .menu-toggle { display:block}
            header .logo { display:none;}
    
   
            header nav { position:absolute;width:100%;height:40vh;background:#333;top:40px;left:-115%;transition:0.5s}
            header nav.active { left:0}   
            header nav ul,#nav-bar ul,navbar-nav {display:block;text-align:center }
            header nav ul li a{ border-bottom:1px solid rgba(0,0,0,.2)}
        }

       .navbar{border-radius:4px}
       .nav.toggle-collapse{
            position: absolute;
            top:0%;
            display: none;
            width:90%;
            cursor: pointer;
    }
       .nav.toggle-collapse{
            position: absolute;
            top:0%;
            display: none;
            width:90%;
            cursor: pointer;
        }
       .nav.toggle-collapse .toggle-icons{
            display :flex;
            justify-content: flex-end;
            padding: #3f4954;
            padding: 1.7rem 0;

        }
        .nav.toggle-collapse .toggle-icons i{
            font-size: 1.4rem;
            color: #3f4954;
        }
        .collapse{
            height: 80vh;  
        }
        
.btnLogo
{	
    width:50%; 
    text-align:center;
    border:1px solid red;
	position: relative;
	display: block;
    text-transform :uppercase;
	color:rgba(255,255,255,0.1) /*#2f4145;*/   ;
    background-image:url(http://localhost:50432/AbservSystem/img/Water.png);
    background-repeat :repeat-x ;
    -webkit-background-clip:text; 
    animation :animate 35s linear infinite;
	font-size: 35px;
	font-family:Abel,serif;
	text-decoration: none;
	padding: 5px;
    margin:0 auto;
    margin-left:10px;  
	overflow: hidden;
	transition: 1s all ease;
}
@keyframes animate 
{
    0% 
    {
        background-position :left 0px top 80px;
    }
    40% 
    {
        background-position :left 800px top -50px;
    }
    80% 
    {
        background-position :left 1600px top -50px;
    }
    100% 
    {
        background-position :left 2400px top 80px;
    }
}
        @media (min-width: 300px) and (max-width:1212px){
      
              .banelleft { width: 15%;text-align:center}
              .banelright { width: 80%; float: right;} 
             }
        @media only screen and (max-width:750px){
        .navbar .nav-menu,.nav .nav-items{
            flex-direction: column;
    
        }
        .nav-items{
            background-color: #104f55;
        }
        .navbar.toggle-collapse{
            display: initial;
        }
        }

        /*---------------------------------*/
.inputbox {     position:relative;width:250px  }
.inputbox input {width:100%;padding:10px;border:1px solid rgba(255,255,255,0.25);background:#1d2b3a;border-radius:5px;outline:none;color:#fff;font-size:1em ;transition:0.5s   }
.inputbox span {position :absolute;left:0;padding:10px;pointer-events:none;font-size:1em;color:rgba(255,255,255,0.25);text-transform:uppercase;transition:0.5s    }
    .inputbox input:valid ~ span,
    .inputbox input:focus ~ span {
        color:#00dfc4;
        transform:translateX(10px) translateY(-7px);
        font-size:0.56em;
        padding:0 10px;
        background:#1d2b3a;
        border-left:1px solid #00dfc4;
        border-right:1px solid #00dfc4;
        letter-spacing:0.2em;
    }
    .inputbox input:valid,
    .inputbox input:focus {border:1px solid #00dfc4;    }
        /*-----------------------------------*/