body {
    background-image: url('../img/BGPic5.jpg') ;
    background-attachment: fixed;
    font-family: 'Noto Nastaliq Urdu Draft', serif;
}

 
* {
  box-sizing: border-box;
}

.column {
  float: right;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.header img {
  float: right;
  width: 100px;
  height: 100px;
  // background: #555;
}

.header hline {
  position: absolute; // relative;
  top: 8px;
  right: 250px;
  font-size: 30px;
    color: black;
    font-family: 'Arial Black', serif;
    text-shadow: 2px 2px 0 red, 0 5px 4px white;
}

#mySidenav a {
    position: fixed; 

    transition: 0.5s;
    padding: 20px;
    width: 60px;
    text-decoration: none;
    font-size: 24px;
    color: white;
    border: 2px solid black;
    border-radius: 40px 1px 40px 1px;
}

#mySidenav2 a {
     
    transition: 0.5s;
    padding: 20px;
    width: 60px;
    text-decoration: none;
    font-size: 24px;
    color: white;
    border: 2px solid black;
    border-radius: 30px 30px 30px 30px;

text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
	

}

#mySidenav a:hover {

	padding:30px;
	width: 70px;
	font-size: 28px;
	color: yellow; //white;
	border: 8px solid maroon;//#4CAF50;
	border-radius: 1px 40px 1px 40px;
	
}

#mySidenav2 a:hover {

	padding:35px;
	width: 70px;
	font-size: 32px;
	color: yellow; //white;
	border: 8px solid maroon;//#4CAF50;
	border-radius: 1px 40px 1px 40px;
	text-shadow: 3px 3px 0 red, -2px 0 0 black, 0 5px 4px white, -4px 0 0 maroon, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;


}


#mySidenav2link a {
     
  
    transition: 0.5s;
    padding: 20px;
    width: 60px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    border: 3px solid black;
    border-radius: 10px 10px 50px 50px;

text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}


#mySidenav2link a:hover {
 
	padding:30px;
	width: 70px;
	font-size: 28px;
	color: yellow; //white;
	border: 8px solid maroon;//#4CAF50;
	border-radius: 40px 40px 10px 10px;
	text-shadow: 3px 3px 0 red, -2px 0 0 black, 0 5px 4px white, -4px 0 0 maroon, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;

}


#about {

    background-color: #4CAF50;
}

#blog {

    background-color: #2196F3;
}

#projects {

    background-color: #f44336;
}

#contact {

 background-color: white;
}

#ending {
    
    background-color: #b97a57;
}



/*a:hover, a:active {
    background-color: #17a43b;
    color: white;
    font-size: 20px;
}*/

.button {
    background-color: cyan;
    color: black;
    border: 4px solid black;//#4CAF50;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 20px;
}

.center {
    margin: auto;
    width: 100%;
text-align: center;
    padding: 10px;
position: relative;
  top: 0;
  font-size: 20px;
  font-family: Algerian;
}
.menus {
    margin: auto;
    width: 70%;
    padding: 10px;
}
.menubg {
	border: 1px solid red;
 	 margin-left: 10%;
	 margin-right: 10%;
    width: auto;//360px;
    text-align: right;
    color: black;	 //darkblue;
	background-color:    white; // rgba(0, 0, 0, .1);

}


@import url(http://millifoundation.org/NastaliqUrdu/NastaliqUrdu.css);
	

*[lang=ur] {
	direction: rtl;
	font-family: 'Noto Nastaliq Urdu Draft', serif;
	font-size: 0px;
	text-align: justify;
	line-height: 190%;
	margin-left: 100px;
	margin-right: 100px;


}

@media screen and (max-width: 700px) {
  *[lang=ur] {
    	font-size: 18px;
	margin-left: 10%;
	margin-right: 10%;
  }
 Headding{
	
 }
} 

*[lang=urb] {
	direction: rtl;
	font-family: 'Noto Nastaliq Urdu Draft', serif;
	font-size: 28px;
	color: maroon;
	text-align: center;
	line-height: 230%;
	margin-left: 50px;
	margin-right: 50px;
	text-shadow: 2px 2px 0 yellow, 0 5px 4px white; 
}

.top {

right: 100px;
position: fixed;
background-color: #555;

}

.address30{

 	margin-left: 150px;
	margin-right: 150px;
    width: auto;//360px;
    text-align: center;
    color: black;
    font-size: 24px;
    background-color: rgba(0,0,0, 0.1); //#b0e0e6;
    font-family: 'Arial Black', serif;
    text-shadow: 2px 2px 0 cyan, 0 5px 4px white;

}

.address20{
 
 	margin-left: 150px;
	margin-right: 150px;
    width: auto;//360px;
    text-align: center;
    color: black;
    font-size: 20px;
    background-color: rgba(0,0,0, 0.1); //#b0e0e6;
    font-family: 'Arial Black', serif;
    text-shadow: 2px 2px 0 cyan, 0 5px 4px white;

}


@media screen and (max-width: 700px) {
  .address30   {
    	font-size: 18px;
	margin-left: 10%;
	margin-right: 10%;
  }
  .address20   {
    	font-size: 16px;
	margin-left: 10%;
	margin-right: 10%;
  }
} 

 

.navbarstripe2 {
  
  background-color: black;
  overflow:  hidden;
   width: 100%;
   text-align: center;
  
 text-shadow: 2px 2px 0 red, 0 5px 4px white;
 margin-left:0;
 margin-right:0;

}

.navbarstripe2 a {   
  color: white;
background-color: black;
  text-align: center;
  padding: 4px 30px;
  text-decoration: none;
  font-size: 24px;
line-height: 3;
text-shadow: 2px 2px 0 red;
border-bottom: 8px solid black;
border-top: 4px solid black;
    
 
}

.navbarstripe2 a:hover {
  background: black; // white; //#ddd;
  color: black;
  font-size: 26px;
line-height: 4;
  text-shadow: 2px 2px 2px green, 0px 5px 2px green;
border-top: 6px solid red; // #eee;
 border-top: 4px solid white;// #eee;
border-bottom: 4px solid white;
transition: 0.8s;
}
 
.mainn {
  padding: 16px;
  margin-top: 30px;
	margin-left:20%;
   /* Used in this example to enable scrolling */
}

//h3 { font-family: 'Noto Nastaliq Urdu Draft', serif;

   }




.topnav {
  overflow: hidden;
  background-color: #333;
  width: 100%;
}

.topnav a {
  float: left;   
  color: #f2f2f2;
  text-align: center;
  padding: 20px ;
  text-decoration: none;
  font-size: 30px; //width:10%;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.navbarstripe .icon {
  display: none;
}
@media screen and (max-width: 700px) {  
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: left;
    display: block;
  }
}


.navbarstripe {

  background-color: black;
  overflow:  hidden;
   width: 100%;
   text-align: center;
 text-shadow: 2px 2px 0 red, 0 5px 4px white;
 margin-left:0;
 margin-right:0;

}

.navbarstripe a {     
 
  color: white;
background-color: black;
  text-align: center;
  padding: 4px 30px;
  text-decoration: none;
  font-size: 24px;
line-height: 3;
text-shadow: 2px 2px 0 red;
border-bottom: 8px solid black;
border-top: 4px solid black;
    
 
}

.navbarstripe a:hover {
  background: white; 
  color: black;
  font-size: 26px;
line-height: 4;

  text-shadow: 2px 2px 2px green, 0px 5px 2px green;
border-top: 6px solid red; // #eee;
 border-top: 4px solid red;// #eee;
border-bottom: 4px solid red;
transition: 0.8s;

}


@media screen and (max-width: 700px) {
  .navbarstripe a:not(:first-child) {display: none;}
  .navbarstripe a.icon {
    float: left;
    display: block;
  }
}



@media screen and (max-width: 700px) {
  .navbarstripe.responsive {position: relative;}
  .navbarstripe.responsive .icon {
    position: absolute;
    left: 0;
    top: 0;

  }
  .navbarstripe.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

.sticky00 {
  top: 0;
  width: 100%;
}

.sticky00 + .content {
  padding-top: 102px;
}



.columnslides {
  float: right;
  width: 50%;
  padding: 10px;
}

/* Clearfix (clear floats) */
.rowslides::after {
  content: "";
  clear: both;
  display: table;
}


.column1 {
  float: left;
  width: 33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row1:after {
  content: "";
display: table;
  clear: both;
  
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 20 20px;
 
}
.column { 
 
  flex: 30%;
  max-width: 50%;
  padding: 0 20px;
border: 2px solid #1C6EA4;
-webkit-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 5px 5px 15px 5px #FF0000; 
box-shadow: 5px 5px 15px 5px #FF0000;
background-color: white;
   
}

@media screen and (max-width: 500px) {
 
  .column {
float: left;
    flex: 50%;
    max-width: 100%;
border: 2px solid #1C6EA4;
-webkit-border-radius: 12px;
border-radius: 12px; 
-webkit-box-shadow: 5px 5px 15px 5px #FF0000; 
box-shadow: 5px 5px 15px 5px #FFa0000;
column-gap: 5px;
background-color: white;
  }
 
}
.responsive {
  width: 100%;
max-width: 1000px;
   
  height: auto;
}


.icon-bar {
  position:  fixed;
  top: 15%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
   
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 1s ease;
  color: white;
  font-size: 20px;
  background-color: green;
 
    border: 2px solid black;
    border-radius: 40px 40px 40px 40px;
}

.icon-bar a:hover {
  background-color: Blue;
padding: 20px;
    width: 60px;
    text-decoration: none;
    font-size: 24px;
    color: white;
    padding: 20px;
    width: 60px;
    text-decoration: none;
    font-size: 24px;
    color: white;
    border: 2px solid black;
    border-radius: 40px 40px 40px 40px;

}



.icon-bar1 {
  position: fixed;
  top: 90%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
   
}

.icon-bar1 a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 1s ease;
  color: white;
  font-size: 20px;
  background-color: green;
 
    border: 2px solid black;
    border-radius: 40px 40px 40px 40px;
}

.icon-bar1 a:hover {
  background-color: Blue;
padding: 20px;
    //width: 60px;
    text-decoration: none;
    font-size: 24px;
    color: white;
    padding: 22px;
    //width: 60px;
    text-decoration: none;
    font-size: 26px;
    color: white;
    border: 2px solid black;
    border-radius: 40px 40px 40px 40px;
-webkit-box-shadow: 5px 5px 15px 5px blue; 
box-shadow: 5px 5px 15px 5px blue; // #FFa0000;
 
}

.fframe1 {
    border: 2px solid #1C6EA4;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 5px 5px 15px 5px #0000FF;
    box-shadow: 5px 5px 15px 5px #0000FF;
    background-color: white;
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 20.25%;
    position: relative;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom:5%
   
}

    .map-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }

#borderimg {
    border: 30px solid transparent;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    padding: 5px;
    border-image: url(../img/bord1.jpg) 30% round;
}