@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;700&family=Tajawal:wght@400;700&display=swap');

h1, h2, h3, h6, p, div, li {font-family: 'Tajawal', sans-serif}

/* h1, h2, h3, p, div {font-family: 'El Messiri', sans-serif;} */

h1 {font-weight:700}

a:link
{ text-decoration:none; color:#13b9e6}
a:hover
{color:#cfa968 }
a:visited
{color:#13b9e6 }
a:visited:hover
{color:#cfa968 }

p, li, .my-text-normal
{color: #607d8b; text-align:justify}


*:focus {
    outline-color: #cfa968;
}

.my-logout {font-family: 'Tajawal', sans-serif !important;}

.my-margin {margin:50px 0px;}

.my-gold {background-color:#cfa968 !important;}
.my-text-gold { color:#cfa968 !important;}

.my-blue {background-color:#13b9e6 !important;}
.my-text-blue {color:#13b9e6 !important;}

.my-maxwidth { max-width:1100px; }

.my-menu-link
{font-size:15px !important; padding:12px !important}

.my-menu-link:hover
{color:#13b9e6 !important}

.my-light-grey
{background-color: #f9f9f9}


.my-menu
{color:#13b9e6; text-decoration:none}
.my-menu:link
{color:#13b9e6;}
.my-menu:hover
{color:#cfa968;}
.my-menu:focus
{color:#cfa968 !important;}

.my-submenu:visited { color:#13b9e6 !important;}
.my-submenu:hover { color:#cfa968 !important; background-color:#f4f4f4 !important }

.my-submenu-border {border: 1px solid #e0e0e0!important;}

/* submenu background color change */
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#f4f4f4;}

.my-footer { line-height: 15px !important; }
.my-footer:link {color:#607d8b}
.my-footer:hover {color:#cfa968}

hr.sep1 {
  width:200px;
  margin:auto;
  border-width:3px;
  border-color:#cfa968;
  padding-bottom:40px;  
}

hr.sep2 {
  width:100px;
  margin:15;
  border-width:3px;
  border-color:#13b9e6;    
}

.my-white { border-color:#fff !important; }

.my-parallax
{
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.my-bg1 { background-image: url("../img/bg1.jpg"); }
.my-bg2 { background-image: url("../img/bg2.jpg"); }
.my-bg3 { background-image: url("../img/bg3.jpg"); }

.mySlides {display:none}

.my-slide0 { background-image: url("../img/slider0.jpg"); }
.my-slide1 { background-image: url("../img/slider1.jpg"); }
.my-slide2 { background-image: url("../img/slider2.jpg"); }

.my-subhead-about { background-image: url("../img/subheader3.jpg"); }

.subheader {	  
  background-position:center;
  height: 210px;
  padding:60px 100px;
  color:#fff;
}

.showcase {	  
  background-position:center;
  height: 600px;
  padding:140px 100px;
  color:#fff;
}
.showcase h1{
  font-size: 60px; 
  line-height:65px;
  padding-bottom:30px;  
}
.showcase h1{
  font-size: 60px; 
  line-height:65px;
  padding-bottom:30px;  
}
.showcase p {
  font-size:30px;
  line-height:0px;
  color:white;
}

.showcase hr {
  width:300px;
  margin:0px;
  border-width:2px;
  border-color:#fff;
}

hr.section
{
  margin:0px;
  border-width:3px;
  border-color:#cfa968;
}

h1{
  font-size: 48px; 
  line-height:65px;
  padding-bottom:20px;
}

h2 { font-size: 34px; }

h6 {font-size:15px; color:grey}

.my-head-padding { padding-top:132px}
.my-subhead-padding { padding-top:374px}

.my-animate-left { animation: 1.6s ease 0s normal none 1 running animateleft; }
.my-animate-right { animation: 1.6s ease 0s normal none 1 running animateright; }
.my-animate-top { animation: 1s ease 0s normal none 1 running animatetop; }

.my-logo {height:75px}

.my-small-logo {height:55px}


/* Logo Sliding */
.logo-banner {
	background-image: url('../img/logos-background.jpg');
	height: 100px;
	width: 100%;	
	filter: opacity(80%);
	animation: backgroundScroll 80s linear infinite;
}
@keyframes backgroundScroll {
	from {background-position: 0 0;}
	to {background-position: -4502px 0;}
}


/* Mobile CSS Section */

@media only screen and (max-width:600px)
{
  .showcase {
    height:350px;
    padding: 90px 0;
  }
  
.showcase h1{
  font-size: 28px; 
  line-height:40px;
  padding-bottom:10px;
}

.showcase p {
  font-size:25px;
  line-height:0px;
}

.showcase button
{font-size:12px !important;}


h1{
  font-size: 45px; 
  line-height:40px;
  padding-bottom:20px;
}

h2 { font-size: 29px; padding-bottom:0px;}

.my-head-padding { padding-top:110px; }

.subheader {	  
  background-position:center;
  height: 130px;
  padding:15px 0px;
  color:#fff;
}

hr.sep1 {
  width:200px;
  margin:auto;
  border-width:2px;
  border-color:#cfa968;
  padding-bottom:40px;  
}

hr.sep2 {
  width:100px;
  border-width:2px;
  border-color:#13b9e6;  
}

.my-logo {height:55px}
.my-small-logo {height:55px}

.my-slide0 { background-image: url("../img/slider0-small.jpg"); }
.my-slide1 { background-image: url("../img/slider1-small.jpg"); }
.my-slide2 { background-image: url("../img/slider2-small.jpg"); }


}