@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');
@import url(https://fonts.googleapis.com/earlyaccess/notonaskharabic.css);

@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@400;600&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body{
  background-image: url(../img/bg-back.png);
}
/*-----=======================================----Header style ---=================----------*/

.header{
  width: 100%;
  height: auto;
  font-family: 'Ubuntu', sans-serif;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 35px 0px 35px;
  
}

.header .header-left {
  width: 40%;
  height: auto;


}
.header .header-left img{
  width: 75%;
}

.header .header-right img{
  width: 100%;
}

.header .header-right {
  width: 20%;
  height: auto;
 
}



.header .test-sh{
      border: 2px solid red;
      padding: 6px
}
 .header .test-sh img{

    width: 150px;
    height: 30px;
  }

 .header .test-sh:hover{
      border: 2px solid yellow;
      padding: 6px;
      cursor: pointer;
}


/*-----=========================================----NAVBAR STYLE------=================-------*/

.navbar{
    width: 100%;
    height: auto;
    font-family: 'Ubuntu', sans-serif;
    background-color: #756ae3;
    transition: all 0.3s;
    border-bottom: 2px solid #19178a;
    border-top: 2px solid #19178a;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.toggle,
[id^=drop] {
	display: none;

}

/* Giving a background-color to the nav container. */
nav { 
  width: 100%;
	margin:0;
	padding: 0;
	background-color: #564fac;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: #564fac;
	}

/* Styling the links */
nav a {
	display:block;
	padding:14px 20px;	
	color:#FFF;
	font-size:17px;
	text-decoration:none;
  transition: 0.5s;
}


nav ul li ul li:hover { 
  background: #19178a;
 }

/* Background color change on Hover */
nav a:hover { 
	background-color: #19178a; 
  text-decoration: none;
  color: rgb(248, 244, 244);
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 54px; 

}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
  width: 200px;
	float:none;
  background-color: #19178a; 
	display:list-item;
	position: relative;
}

nav ul ul li a:hover {
  background-color: #564fac;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-54px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }






/* Media Queries
--------------------------------------------- */

@media all and (max-width : 990px) {



	nav {
		margin: 0;
		height:auto;

	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}




	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #5d52db;
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
    text-align: center;
	}


	.mob-nav {
		text-align: right;
	}


	.toggle:hover {
		background-color: #19178a;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
    text-align: center;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 30px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #19178a;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #19178a; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}




}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}



/* ======================================Slider section styling =====================*/

.slider{
    width: 100%;
    height: auto;

    
}

.slider img{
    width: 100%;
    height: 470px;
}




/*-------------------------------combined code for all --------*/



.section-title{
    text-align: center;
    padding: 20px;
    font-family: Oswald, sans-serif;
    color: #2114a4;
    font-size: 35px;
}









 /*-------------------------------Contianter--------*/


.icon_menu{
  width: 100%;
  height: 100px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}


.icon_menu a{
  display: block;
  font-size: 40px;
  text-align: center;
  text-decoration: none;
  transition: 0.5s;
  color: darkblue;
  padding: 0% 5% 0% 5%;
}

.icon_menu a:hover{
  cursor: pointer;
  color: rgb(78, 78, 136);
}

.icon_menu p{
  font-size: 12px;
}

 /*-------------------------------DSJ Msg--------*/

 .dsj-msg-main{
    width: 100%;
    padding: 20px 0px;
   
}


.msg-pic{
    width: 1000px;
    padding: 20px 0px;
    display: flex;
    margin: 0 auto;
}

.dsj-pic{
    width: 30%;
    height: auto;
}

#urdu-txt{
  font-family: 'Noto Naskh Arabic', serif;
  text-align: right;
}

.dsj-pic img{
    width: 100%;
    box-shadow: 0px 0px 3px 2px;
}

.dsj-msg{
   width: 75%;
   height: auto;
   padding: 0px 20px;
}

.dsj-msg strong{
  font-size: 25px;
  font-family: 'Sansita Swashed', cursive;
}

.dsj-msg p{
   font-size: 20px;
   line-height: 30px;
   text-align: justify;
   font-family: Poppins, sans-serif;
}




  

/*--------------------------------statistic notification--------------------*/

.statistic-notification{
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	display: flex;
	justify-content: space-around;
  background-color: #d5d5d5;
  padding: 20px 10px 20px 10px;

}

.statistic-main{
	width: 60%;
	height: auto;
	background-image: url(img/dots-bg.png);
	
}

.padding{
  width:100%;
  height: auto;
}




.statistic-main #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.notification-update{
	width: 34%;
	height: auto;
	background-image: url(img/dots-bg.png);
	padding-bottom: 20px;
  background-color: #d5d5d5;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
  border-radius: 5px;
  position: relative;
  z-index: 1;
  background: inherit;
  overflow: hidden;

}


.notification-update:before {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  filter: blur(10px);
  margin: -20px;
}







/* line 9, ../sass/style.scss */


/* line 13, ../sass/style.scss */


/* line 19, ../sass/style.scss */
.verticalCarousel {
  margin: 0px auto;
  max-width: 500px;
  
}

/* line 24, ../sass/style.scss */
.verticalCarouselHeader {

  border-width: 0px;
  border-style: solid;
  padding: 5px;
}
/* line 27, ../sass/style.scss */
.verticalCarouselHeader:after {
  content: "";
  display: block;
  clear: both;
}
/* line 32, ../sass/style.scss */
.verticalCarouselHeader h3 {
  float: left;
  margin: 0px;
}
/* line 36, ../sass/style.scss */
.verticalCarouselHeader .vc_goUp, .verticalCarouselHeader .vc_goDown {
  float: right;
  display: block;
  width: 25px;
  height: 25px;
  background: #fff;
  text-align: center;
  color: #000;
  margin-left: 10px;
}
/* line 45, ../sass/style.scss */
.verticalCarouselHeader .vc_goUp:active, .verticalCarouselHeader .vc_goDown:active {
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -webkit-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
}

/* line 52, ../sass/style.scss */
.verticalCarouselGroup.vc_list > li {
  margin: 15px;
  border-width: 0px;
  border-style: solid;
  border: 1px solid darkgray;
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}
/* line 57, ../sass/style.scss */
.verticalCarouselGroup.vc_list > li h4 {
  margin: 0px 0px 15px;
}
/* line 60, ../sass/style.scss */
.verticalCarouselGroup.vc_list > li p {
  margin: 0px 0px 0px;
  padding: 10px;
  text-align: justify;
}
#date-time{
  width: 100%;
  height: auto;
  background-color: darkgray;
  position: relative;
}
#date-time span{
font-size: 12px;
margin-left: 5px;
}

#date-time a{
right: 3px;
position: absolute;
text-decoration: none;
transition: 0.5s;
}

#date-time a:hover{
color: blue;
}

/* 
#notification-main{
            width: 95%;
            height: auto;
            /* background-color: rgb(51, 38, 21); 
            padding: 4px; 
			      margin: 0 auto;
        }
        #box{
            width: 100%;
            height: auto;
            color: #000;
			      transition: 0.7s;
            border: 4px solid darkgray;
            
           
        }
        #date-time{
            width: 100%px;
            margin-top: -16px;
            height: auto;
            background-color: darkgray;
            position: relative;
        }
        #date-time span{
          font-size: 12px;
          margin-left: 5px;
        }

        #date-time a{
          right: 3px;
          position: absolute;
          text-decoration: none;
          transition: 0.5s;
        }

        #date-time a:hover{
          color: blue;
        }

        #box p{
            text-align: justify;
            padding: 4px;
        }

        #box:hover{
            box-shadow: 1px 3px 9px 1px;
            cursor: pointer;
        } */


           /*-------------------------------Video Section styling--------*/

/* Defines the width of the carousel and centers it on the page */

.video-section{
    width: 100%;
    height: auto;
    padding: 15px;
    margin-top: 20px;
    padding-bottom: 40px;
}

.video-section .video-main{
    width: 80%;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}

.video-section .video-frame{
    width: 350px;
    height: auto;
    background-color: darkgray;
    padding: 10px;
    margin-top: 20px;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: inherit;
    overflow: hidden;
}

.video-section .video-frame:before {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  filter: blur(10px);
  margin: -20px;
}



.video-section .video-frame video{
    width: 100%;
}

.video-section .video-frame p{
    font-size: 18px;
    text-align: justify;
}




/*-------------------------------EVENTS--------*/

/* Defines the width of the carousel and centers it on the page */

.events-section{
    width: 100%;
    height: auto;
    padding: 5px 5px 5px 5px;
    margin-top: 20px;
    padding-bottom: 40px;
    background: linear-gradient(to bottom, rgba(11, 33, 160, 0.52), rgba(59, 57, 59, 0.73)), url(../img/hero-bg.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
}



.events-section .row{
    width: 90%;
    margin: 0 auto;
}

.img-div{
  width: 100%;
  height: auto;
  position: relative;
  border: 4px solid rgb(31, 64, 148);
}

.img-div .date-div{
  height: auto;
  background-color: rgb(31, 64, 148);
  margin-top: -22px;
  right: 0;
  position:absolute;
  padding-left: 6px;
  transition: 0.3s;
  color: #fff;
  border-top-left-radius: 10px;
}

.img-div .date-div span{
  font-size: 10px;
}

.events-section .details{
    width: 250px;
    height: 370px;
    background-color: darkgray;
    padding: 5px;
    margin: 0 auto;
    transition: 0.5s;

    
}
.events-section .details:hover img{
  cursor: pointer;
  -webkit-transform: scale(1.03);
	transform: scale(1.03);

}

.events-section .details:hover .date-div{
  margin-top: -22px;
  right: -4px;
}

.events-section .details img{
    width: 100%;
    height: 150px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}


.events-section .details p{
    text-align: center;
    font-size: 15px;
}



.slick-prev, .slick-next {
  border: none;
  font-size: 12px;
  background: transparent;
  color: #fff;
  margin: 0 auto;
  padding: 1px 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 5%;
  border: 1px solid rgb(255, 252, 252);
}

.slick-prev:hover, .slick-next:hover{
  cursor: pointer;
  background-color: rgb(145, 144, 146);
}

.slick-prev::before {
  content: '<<';
}


.slick-next::after {
  content: '>>';
}


.past-event{
  margin: 30px auto;
  text-align: center;
}

.past-event a{
  text-decoration: none;
  padding: 10px;
  background-color: #2114a4;
  color: white;
  transition: 0.5s;
  opacity: 0.5;
}

.past-event a:hover{
  background-color: #3228a5;
  opacity: 1;
}



  /*-------------------------------QUICK LINKS--------*/


  .quick-link-section{
    width: 100%;
    height: auto;
    padding: 40px 5px 40px 5px;
    margin-top: 20px;
}



.link-body{
    width: 85%;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}

.link{
    width: 100px;
    border-radius: 5px;
    transition: 0.5s;
    margin-top: 20px;
    border: 1px solid darkgray;
    
}


.link img{
    width: 100%;
    height: 100px;
    padding: 7px;
}

.link p{
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 0px;
 
}

.link a{
  text-decoration: none;
}

 /*--------for shining hover effect------*/
 .link::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.link:hover::before {
	-webkit-animation: shine 1s;
	animation: shine 1s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}



.link:hover{
  cursor: pointer;
  background-color: #eff2f5;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
  border-radius: 5px;
  position: relative;
  z-index: 1;
  background: inherit;
  overflow: hidden;
}
             /*-------------------------------footer--------*/


             .footer {
              color:#f0f9ff;
              background-color:#282d32;
              margin-top: 100px;
            }

            .footer .row{
              display: flex;
              justify-content: space-around;
              padding: 50px 10px;
            }

            .footer .row .left-footer{
              width: 30%;
              height: auto;
        
            }

            .footer .row .center-footer{
              width: 30%;
              height: auto;
     
            }

            .footer .row .right-footer{
              width: 30%;
              height: auto;
     
            }

            .footer .row .center-footer li{
              list-style: none;
            }

            .footer hr{
              color: #707070;
              background-color: #707070;
            }

            .footer .row .right-footer li{
              list-style: none;
            }

            .footer .row .center-footer li i{
              width: 30px;
              height: 30px;
              color: white;
            }

            .footer .row .right-footer li i{
              width: 30px;
              height: 30px;
              color: white;
            }


              .footer-2{
                background-color: #3e4144;
                text-align: center;
                padding: 10px;
                
              }
            
              .footer-2 p{
                margin: 0;
                font-size: 16px;
              }
           




/* =========================================================media query ======================================================== */



@media (max-width: 992px) {


  .container{
    width: 100%;
  }
    .msg-pic{
        width: 100%;
        padding: 10px;
        flex-direction: column;
    }

    .dsj-pic{
        width: 50%;
        height: auto;
        margin: 0 auto;
    }
    
    
    .dsj-msg{
       width: 100%;
       height: auto;
       padding: 0px 20px;
    }
    .dsj-msg p{
       font-size: 16px;
       line-height: 30px;
       text-align: justify;
    }





    .statistic-notification{
        flex-wrap: wrap;
    }

    .statistic-main{
        width: 100%;
    }
    
    
    .notification-update{
        width: 100%;
        margin-top: 20px;
    }

    .video-section .video-main{
      justify-content: center;
      
  }


  .footer .row{
    width: 100%;
    flex: none;
  }

  .footer .row .left-footer{
    width: 80%;
    text-align: center;
    margin-top: 40px;
  }

  .footer .row .center-footer{
    width: 80%;
    text-align: center;
    margin-top: 40px;
  }

  .footer .row .right-footer{
    width: 80%;
    text-align: center;
    margin-top: 40px;

  }
    
}


@media (max-width: 800px) {

  .header{
    width: 80%;
    margin: 0 auto;
    margin-top: 10px;
    flex-direction: column;
    height: 200px;
    margin-bottom: 30px;
    background: url('../img/small-screen-logo.png') no-repeat center;
    background-size: cover;
  }

  .header .header-left, .header-right{
    width: 1%;
    
    
  }
  
 .header .test-sh{
    right:0;
    position: absolute;
    top: 0;

  }
  

  
  
  
  .header .header-left img{
    width: 1%;
  }
  
  .header .header-right img{
    width: 1%;
  }
  
  
  .icon_menu a{
  font-size: 20px;
    }
}

@media (max-width: 400px) {
  .header .header-left, .header-right{
    display: none;
  }
    

  
  .header .header-right img{
    display: none;

  }
  .header{
    width: 80%;
    margin: 0 auto;
    margin-top: 10px;
    flex-direction: column;
    height: 200px;
    margin-bottom: 30px;
    background: url('../img/small-screen-logo.png') no-repeat center;
    background-size: cover;
  }
  
  
 
}
.new-badge{
  background:red;
  color:#fff;
  font-size:10px;
  padding:2px 6px;
  margin-left:5px;
  border-radius:10px;
  font-weight:bold;
}