@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
  font-family: "Lato", sans-serif !important;
  font-weight: 400;
}
:root {
    --shadow: 0px 10px 13px -10px #ddd;
    --shadow-hover: 0px 10px 20px 0px #ddd;
    --border: 1px solid #f3f3f3;
    --animate: translate(0, -2%);
    --gradient-bg: linear-gradient(to right, rgba(255, 134, 23, 0.90), rgba(255, 135, 23, 0.90), rgba(255, 194, 37, 0.90));
    --gradient-single: rgba(255, 134, 23, 0.90);
    --primary-color: #6B6B6B;
    --radius: 13px;
    --ef: 'Philosopher', sans-serif;
    --lato: "Lato", sans-serif;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

.container2{
    max-width: 1330px;
}

@media (min-width:576px) {
  .container {
      max-width: 540px
  }
}

@media (min-width:768px) {
  .container {
      max-width: 720px
  }
}

@media (min-width:992px) {
  .container {
      max-width: 960px
  }
}

@media (min-width:1200px) {
  .container {
      max-width: 1200px
  }
}
/*header area styles*/

.navbar {
    padding: 0;
}
.header-logo {
    width: 75px;
    padding: 5px;
}

header {
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #000338;
    transition: .5s;
}



.menu-area > ul {
    margin: 11px 0;
    padding: 0;
}

.menu-area > ul > li {
    list-style: none;
    display: inline-block;
}

.menu-area ul li a {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

.dropdown-menu1 ul li a .fa {
    margin-right: 10px;
}

.menu-area > ul > li > a {
  text-decoration: none;
  color: #fff;
  padding: 0px 15px;
  display: block;
  transition: .5s;
  text-transform: capitalize;
  font-size: 16px;
}

.menu-area ul li a:hover {
    color: #FD9722;
    /* background: #ff910d; */
}

.logo-image {
    margin-top: 15px;
}

.menu-active {
    color: #FD9722 !important;
}

.dropdown-menu1 {
    position: absolute;
    background: #fff;
    width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: 0.4s;
    box-shadow: var(--shadow);
    border-top: var(--border);
    top:75px;
}

.dm-software {
    width: 630px;
}

.dropdown-menu1 ul {
    margin: 0;
    padding: 0;
}

.dropdown-menu1 ul li {
    list-style: none;
}

.dropdown-menu1 ul li a {
    text-decoration: none;
    color: #817e7b;
    padding: 7px 10px;
    display: block;
    padding: 10px;
    transition: .4s;
    text-transform: capitalize;
}

.dropdown-menu1 ul li a:hover {
    background: var(--bd);
    color: #FD9722;
}

.dd-btn1:hover .dropdown-menu1 {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
}

.dropdown-menu2 {
    position: absolute;
    left: 100%;
    top: 0;
    background: #fff;
    width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: 0.4s;
}


.dd-btn2 {
    position: relative;
}

.dd-btn2:hover .dropdown-menu2 {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
}
/*toggler css*/

.menu-icon {
    display: none;
}

.menu-icon {
    float: right;
}

.menu-icon {
    color: var(--tn);
    font-size: 30px;
    cursor: pointer;
}

/*on scrolled css*/

/*mobile menu styles*/
.mobile-menu {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: #fdfdfd;
    transition: .3s;
    z-index: 9999;
    border-right: 1px solid #ddd;
    overflow: scroll;
}

.mobile-menu-active {
    left: 0;
}

.mm-logo {
    border-bottom: 1px solid #ddd;
}

.mm-logo .logo {
    width: 130px;
    padding: 10px 15px;
}

.menu-link a {
    display: block;
    padding: 10px 15px;
    color: var(--tm);
    border-bottom: 1px solid #ddd;
    transition: .3s;
    font-family: var(--fl);
    text-decoration: none;
}

.mobile-menu a .fa {
    color: var(--tn);
}

.menu-link a .fa-plus {
    float: right;
    margin-top: 5px;


}

.menu-link a .fa-minus {
    float: right;
    margin-top: 5px;

}

.menu-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-body ul li {
    border-bottom: 1px solid #ddd;
}

.menu-body .card-body {
    padding: 0;
    background: #fafafa;
}

.menu-body ul li a {
    padding: 10px 10px;
    display: block;
    color: var(--tm);
    text-decoration: none;
    font-family: var(--fl);
}

.mm-logo {
    position: relative;
}

.mm-cross-icon {
    position: absolute;
    right: 10px;
    top: 10px;
}

.mm-cross-icon .fa {
    font-size: 20px;
    color: var(--ttm);
}

.mm-ci {
    cursor: pointer;
}
/*-----------------Common style--------------*/
.heading-title> h3 {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    font-family: var(--ef);
    text-transform: capitalize;
    color: #000338;
    margin-bottom: 3px;
}
.heading-border {
    height: 3px;
    width: 100px;
    background-color: #ff8339;
    margin: 0 auto;
}
.common-shadow {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: var(--border);
    transition: .4s;
    overflow: hidden;
    background: #fff;
}
.common-shadow:hover {
    transform: var(--animate);
}
.btn-primary {
    color: #fff;
    background-color: #000338;
    border-color: #000338;
}
/*-----------------end Common style--------------*/
.salah-section {
    background-color: #333333;
    padding: 30px 0px;
}
.calendar-heading > h5{
    font-family: var(--lato);
}
.salah-box {
    background: #484848;
    text-align: center;
    height: 170px;
    margin-bottom: 20px;
}
.salah-box > .title {
    background-color: #000338;
    padding: 3px 0px;
}
.salah-box > .title > h3 {
    font-size: 20px;
    color: #fff;
    font-family: var(--ef);
}
.salah-box > .salah-name > h2{
    font-size: 20px;
    color: #fff;
    font-family: var(--lato);
}
.salah-box > .salah-name {
    padding: 18px 0px;
}
.salah-box > .salah-time {
    background-color: #bf9123;
    padding: 7px 0px;
    border-radius: 6px;
    cursor: pointer;
}
.salah-box > .salah-time > h4{
    font-size: 20px;
    color: #fff;
    font-family: var(--lato);
}

/***************** *********************
         slider area styles
****************** ********************/
.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 70vh;
}

/* End slider area  */
.about-img > img{
    width: 100%;
}
.welcome-text{color: #000338;}
.text-section h2 {
  font-size: 45px;
}
.text-section h3 {
  font-size: 27px;
  line-height: 50px;
  position: relative;
  margin-top: -20px;
font-family: 'Philosopher', sans-serif;
}

.text-section p {
    font-size: 20px;
    text-align: justify;
    line-height: 30px;
    color: #737373;
    margin-bottom: 25px;
    font-family: open-sans;
}
.text-section .btn-about {
  background: #000338;
  padding: 12px 25px;
  color: #fff;
  font-size: 17px;
  border-radius: 5px;
  box-shadow: 3px 7px 30px 0px #d2d2d2;
}
.text-section .btn-about:hover{
  background: #016AD9;
  text-decoration: none;
}
/* statr Our service sectoin*/

.service-box {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    border: 3px solid #ddd;
    transition: 0.3;
}
.service-box:hover{
    border: 3px solid #000338;
}
.service-box > img {
    width: 60px;
    margin-bottom: 15px;
}
.service-box > h2 {
    font-size: 20px;
    color: #000;
    font-family: var(--lato);
    text-transform: capitalize;
}
  .service-box > p {
    text-align: justify;
    font-size: 16px;
    color: #3a3737;
}

/* end Our Program sectoin*/

/*Start Footer Section*/
.footer-section{
   padding: 50px 0;
    margin-top: 50px 0;
    background: #032926;
}
.ft-para h5 {
    color: #BFC7C6;
    font-size: 16px;
    font-weight: normal;
}
.ft-logo {
    margin-bottom: 55px;
}
.ft-title h2 {
    font-size: 25px;
    color: #fff;
    margin-bottom: 15px;
}
.ft-para ul{margin: 0; padding: 0;}
.ft-para ul li, .child-para li {
    list-style: none;
    line-height: 30px;
    color: #BFC7C6;
}
.ft-para ul li:last-child{
    border-bottom:none;
}
.ft-para ul li a, .child-para li a{
    color: #BFC7C6;
    text-decoration: none;
    transition: 0.3s;
    display:block;
}.ft-para ul li a:hover{
    color: #FF8824;

}

/*End Footer Section*/
/*-----------------------------------------------*/
/*Start Footer Section*/
.copyright-section {
  background: #003131;
  color: #dddddd;

  padding: 20px 0px 15px 0; }
  .copyright-section .copyright-text p {
    color: #9b9b9b; }
.copyright-text a {
    color: #9b9b9b;
    font-weight: 600;
}.copyright-text a:hover {
    color: #fe4157;
    font-weight: 600;
}
/*breadcrumb-section*/
.breadcrumb-section{
    background: url('../images/bg/parallax-bg.png') no-repeat;
    background-position: center center;
    background-size:cover;
    padding: 75px 0px;
}
.page-breadcrumb > span{
    color: #d78a11;
    font-size: 16px;
}
.page-breadcrumb > span > a {
    text-decoration: none;
    color: #d78a11;
    font-size: 16px;
}
.page-title > h2 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 0;
    margin-top: 15px;
    font-family: "Croissant One", serif;
}
/*----------------About us page -------------------------------*/
.image-box > img {
    width: 100%;
    border: 3px solid #ff8d00;
    border-radius: 7px;
}
.page-heading > h3 {
    background: #000338;
    font-size: 22px;
    text-align: center;
    padding: 10px 0px;
    color: #fff;
    border-radius: 5px;
    font-weight: 600;
}
.about-text{
    font-family: var(--lato);
}
/*----------------Service Details page -------------------------------*/
.service-details > p{
    font-size: 16px;
    font-family: var(--lato);
}
.service-details-img > img{
    width: 100%;

}