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

body{
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

.container-s {
  max-width: 94%;
  margin: 0 auto;
}

:root {
  --default-color: #002447;
  --default-bg: #002347;
}

.fon-color {
  color: #002347;
}

.nav-color {
  background-color: #002347;
}

.section-header h4 {
  font-weight: bold;
  color: var(--default-color);
  font-size: 36px;
}

/*header section styles*/
.logo-size {
  height: 50px;
  width: 50px;
}

.menu-active {
  color: rgb(6, 184, 74) !important;
}

.main-nav .nav-item {
  padding-left: 20px;
  font-size: 15px;
}

.main-nav .nav-item .nav-link:hover {
  color: rgb(6, 184, 74);
}

.dd-menu {
  position: absolute;
  visibility: hidden;
  width: 200px;
  background-color: #fff;
  margin-top: 5px;
  opacity: 0;
  transition: all 150ms linear;
  z-index: 1;
}

.dd-menu a {
  display: block;
  padding: 8px 30px;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
  color: #002347;
  transition: all 150ms linear;
  font-size: 15px;
}

.dd-menu a:hover {
  background: rgb(6, 184, 74);
  color: #fff;
}

.dd-btn:hover .dd-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}

/*end nav styles*/
.full-width {
  width: 100%;
  height: 70vh;
}

/* swiper css end */
#had-position span{
  width: 13%;
}
#had-position marquee a{
  line-height: 35px;
  padding: 0px 10px;
}
#had-position marquee a:hover{
  padding-bottom: 3px;
  border-bottom: 1px solid rgb(0 0 139);
}
#gool-s{
  background: linear-gradient(#f8dededb, #ebf739e9);
  border-radius: 10px;
  padding: 20px 0;
  margin: 20px auto;
  background-size: cover;
}
/* five stape start */
.empty-first {
  height: 3px;
  width: 40%;
  background-color: aqua;
  margin: 6px auto 40px auto;

}

.empty-second {
  
  border-radius: 20px;
  height: 3px;
  width: 60%;
  background-color: rgb(54, 60, 177);
  margin: 0 auto;
}

.five-stape {
  background-color: #273c75;
  height: 150px;
  width: 150px;
  padding: 2px;
}

.five-stape:hover {
  background-color: #5175d6;
}

.five-stape img {
  height: 50px;
  width: 50px;
  padding: 2px;
  margin: 0 auto;
}

.five-stape .card-body p {
  font-size: 12px;
  margin: 0px;
}

.Quran-i{
  height: 380px;
  width: auto;
}

/* five stape end */

/* right menu start */
.rite-menu{
  list-style: none;
  padding-left: 0px;
}

.rite-menu li{
  background-color: darkblue;
  border-radius: 30px;
  padding: 10px;
  margin: 2px 0px 2px 0px;
  text-align: center;
  cursor: pointer;
}
.rite-menu li a{
  color: lightblue;;
  text-decoration: none;
}
.rite-menu li:hover{
  background-color: rgb(3, 3, 192);
}

/* right menu end */


/* footer start */
.footer-bg{
 background: linear-gradient(#170d41c8, #0f2a1dc0), url(../images/footer-bg.jpg);
 width: 100%;
 height: auto;
 background-repeat: no-repeat;
 background-size: cover;
 color: #ccc;
 padding: 2%;
 border: 1px solid #ccc;
}
.footer-bg h3{
  color: azure;
 text-align: center;
}
.footer-bg p{
  font-size: 12px;
  color: #ccc;
}
.footer-bg a {
  text-decoration: none;
  color: #1acbc3db;
  display: table;
  font-size: 15px;
}
.footer-bg a span{
  margin-left: 5px;
}
.but_border span{
  margin-right: 3px;
}
.but_border i{
	height: 46px;
	width: 46px;
	margin: 0 auto;
	text-align: center;
	line-height: 36px;
	border: 5px solid #5d5555;
	border-radius: 50%;
	color: #0014ff;
	background: #f3f3f3f2;
	font-size: 28px;
	box-shadow: inset 0px 0px 7px 0px #000000ad;
}
.but_border i:hover{
  border: 5px solid #9f95b6;
	border-radius: 50%;
	color: #c6c9e8;
	background: #864cadf2;
}
.but_border a{
  text-decoration: none;
  color: #5b5e7a;
  text-align: center;
}
/* footer-bottom start */

#poweredBy{
  text-decoration: none;
  display: block;
  justify-content: center;
  line-height: 67px;
}
/* footer-bottom end */
/* footer end */