/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  /* CSS */

}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {

  /* CSS */

}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {

  /* CSS */














}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  /* CSS */





  /*********  Global Css   ***********/

  .container {

    width: 80%;
  }

  /*********  header Css   ***********/



  .header-section-top .container .topbar .row {
    flex-direction: column-reverse;
  }


  .header-section-top .container .topbar .row .col .contact-info ul {

    margin-left: 8px !important;
    padding-bottom: 20px;
    padding-top: 10px;
  }

  .header-section-top .container .topbar .row .col .contact-info ul li .theme-btn {

    font-size: 13px !important;

  }





  .header-section-top .container .topbar .row .col .contact-intro {
    display: flex;
  }

  .header-section-top .container .topbar .row .col {}


  .header-section-top .container .topbar .row .col .contact-intro ul {

    width: 100%;
    padding-bottom: 10px;
  }



  .header-section-top .container .topbar .row .col .contact-info ul {

    display: flex;
    margin-left: -90px;

  }


  .header-section-bottom .container .mid-bar .row .col-lg-8 nav ul {
    flex-direction: column;
  }


  .header-section-bottom .container .mid-bar .row .col-lg-1 ul {

    margin-left: -6px !important;
  }


  /*********  banner Css   ***********/

  .banner-section .container .col-lg-7 .top h6 {
    width: 58% !important;

  }

  .banner-section .container .col-lg-7 .mid h2 {

    font-size: 40px !important;
    width: 100% !important;

  }


  .banner-section .container .col-lg-7 {
    margin-top: -150px;
    margin-bottom: 50px;
  }


  .banner-section .container .col-lg-5 .banner-img img {
    width: 100% !important;
  }



  .banner-section .container .col-lg-5 .banner-img {
    height: 80vh !important;
  }


  /* ******* About us css****** */

  .about-us-section .container .row .col-lg-6 .about-us-left img {
    height: 77vh !important;
    width: 100% !important;
    margin-bottom: 50px;
  }




  .about-us-section .container .row .col-lg-6 .about-us-right .mid h2 {

    width: 100% !important;
    font-size: 38px !important;
    line-height: 50px !important;
  }



  .about-us-section .container .row .col-lg-6 .about-us-right .btn ul {

    margin-right: -25px !important;
  }




  .about-us-section .container .row .col-lg-6 .about-us-right .btn .theme-btn {

    padding: 5px 10px !important;
    font-size: 14px !important;
  }



  /* *****  prayer-time-section ********/


  .prayer-time-section {

    width: 50%;
    padding: 20px !important;
  }






  .prayer-time-section .container .row .col-lg-5 .timer-text {
    margin-left: -70px;
  }


  .prayer-time-section .container .row .col-lg-5 .timer-text h2 {

    font-size: 32px !important;
    width: 175% !important;

  }

  .prayer-time-section .container .row .col-lg-5 .timer-text p {
    width: 118%;
    font-size: 20px !important;
  }




  .prayer-time-section .container .row .col-lg-5 .timer-text span {
    font-size: 16px !important;

  }

  .prayer-time-section .container .row .col-lg-5 .timer-num {
    margin-top: 50px;
    margin-left: -165px;
  }



  /* ******** Islamic school css ***** */


  .islamic-school-section .container .row .col-lg-6 .title h2 {
    font-size: 26px !important;
    line-height: 36px !important;
    margin-bottom: 30px !important;
    width: 105%;

  }

  .islamic-school-section .container .row .col-lg-6 .routine-table ul li {
    padding: 23px 10px !important;
    margin-left: -20px;
  }


  .islamic-school-section .container .row .col-lg-6 .school-img img {
    width: 100% !important;
    height: 80vh !important;
    margin-left: 20px !important;
    margin-top: 50px !important;
  }




  .islamic-school-section .container .row .col-lg-6 .mosque img {

    margin-left: 160px !important;
    margin-bottom: 50px !important;
  }


  .islamic-school-section .container .row .col-lg-6 .service-item .service-title h2 {

    font-size: 30px !important;
    line-height: 40px !important;
  }



  .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades {

    display: flex;
  }


  .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades .grade {

    margin-right: 35px !important;

  }


  .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades .grade h2 {

    font-size: 32px !important;
  }



  .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades .grade p {

    font-size: 14px !important;

    margin-top: 18px !important;
    width: 130% !important;
  }



  /* **********  Pilar section  ****** */



  .pilars-section {
    padding: 80px 200px !important;

  }




  .pilars-section .container {
    flex-direction: column !important;
    margin-left: -32px !important;
  }

  .pilars-section .container .pilar-box {
    width: 202% !important;

  }


  .pilars-section .container .pilar-box .pilars-item {

    width: 202% !important;
  }


  .pilars-section .container .pilar-box .pilars-item .pilarts-img {
    width: 20% !important;

  }

  .pilars-section .container .pilar-box .pilars-item .pilars-text h2 {
    width: 32%;
    margin: -40px 5px 45px 5px;
  }




  /* ***** event section css */


  .event-section .container .row .col-12 .title h2 {

    font-size: 25px !important;


    line-height: 60px;
  }



  .event-section .container .row .col-lg-6 .event-item .event-text {

    width: 80%;
    margin-bottom: 30px;
  }




  .support-section .container .row .col-lg-6 h2 {

    font-size: 30px !important;

  }

  /* ****** support-section ******* */

  .support-section .container .row .col-lg-6 .progress-area .row .col-lg-4 {
    margin-top: 20px;
  }



  .letter-section form>div {
    flex-direction: column !important;

    width: 160%;
    margin-left: -55px;
  }


  .letter-section form>div button {
    margin-top: 60px;
  }



  .letter-section .letter-wrap {


    padding: 84px !important;

  }



  .footer-section .market-widget p {

    width: 90%;
  }



}



/* ****************************************************************************************************** */



/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {

  /* CSS */



  /*********  Global Css   ***********/

  .container {

    width: 80%;
  }



  h2 {

    font-size: 30px !important;
   
  }

  h6{
    font-size: 13px !important;

  }

    p {
      font-size: 14px !important;
    }

    .theme-btn {
      font-size: 13px !important;
    }






    /*********  header Css   ***********/



    .header-section-top .container .topbar .row {
      flex-direction: column;
    }


    .header-section-top .container .topbar .row .col .contact-info ul {

      margin-left: 8px !important;
      padding-bottom: 20px;
      padding-top: 10px;
    }

    .header-section-top .container .topbar .row .col .contact-info ul li .theme-btn {

      font-size: 13px !important;

    }





    .header-section-top .container .topbar .row .col .contact-intro {
      display: flex;
    }

    .header-section-top .container .topbar .row .col {}


    .header-section-top .container .topbar .row .col .contact-intro ul {

      width: 100%;
      padding-bottom: 10px;
    }



    .header-section-top .container .topbar .row .col .contact-info ul {

      display: flex;
      margin-left: -90px !important;
      width: 120%;
    }


    .header-section-bottom .container .mid-bar .row .col-lg-8 nav ul {
      flex-direction: column;
    }


    .header-section-bottom .container .mid-bar .row .col-lg-1 ul {

      margin-left: -6px !important;
    }


    /*********  banner Css   ***********/


    .banner-section .container .col-lg-7 .top h6 {
      width: 45% !important;
      font-size: 13px !important;
    }


    .banner-section .container .col-lg-7 .mid h2 {

      font-size: 30px !important;
      width: 90% !important;


    }


    .banner-section .container .col-lg-7 {
      margin-top: -150px;
      margin-bottom: 50px;
    }


    .banner-section .container .col-lg-5 .banner-img {
      height: 80vh !important;
    }



    .banner-section .container .col-lg-5 .banner-img img {
      width: 80% !important;
      animation: bounce 0.9s infinite !important;
      transition: 0.9s !important;
    }

    @keyframes bounce {

      10% {

        width: 70%;
        transition: 0.20s;
      }

    }



    /* ******* About us css****** */


    .about-us-section .container .row .col-lg-6 .about-us-right .top h6 {
     font-size: 18px !important;
    }


    .about-us-section .container .row .col-lg-6 .about-us-left img {
      height: 70vh !important;
      width: 80% !important;
      margin-bottom: 50px !important;
    }




    .about-us-section .container .row .col-lg-6 .about-us-right .mid h2 {

      width: 90% !important;

      line-height: 45px !important;
      height: 20vh !important;
    }



    .about-us-section .container .row .col-lg-6 .about-us-right .btn ul {

      margin-right: -25px !important;
    }




    .about-us-section .container .row .col-lg-6 .about-us-right .btn .theme-btn {

      padding: 7px 12px !important;

    }



    /* *****  prayer-time-section ********/


    .prayer-time-section {

      width: 60% !important;
      /* padding: 20px !important; */
      height: 156vh !important;

    }


    .prayer-time-section .container .row .col-lg-5 .timer-num ul li {

      font-size: 18px !important;
    }



    .prayer-time-section .container .row .col-lg-5 .timer-text {
      margin-left: -70px;
    }


    .prayer-time-section .container .row .col-lg-5 .timer-text h2 {

      font-size: 32px !important;
      width: 175% !important;

    }

    .prayer-time-section .container .row .col-lg-5 .timer-text p {
      width: 118%;
      font-size: 20px !important;
    }




    .prayer-time-section .container .row .col-lg-5 .timer-text span {
      font-size: 16px !important;

    }

    .prayer-time-section .container .row .col-lg-5 .timer-num {
      margin-top: 50px;
      margin-right: 45px;
      margin-left: -188px;
      margin-bottom: 183px;
    }



    /* ******** Islamic school css ***** */


    .islamic-school-section .container .row .col-lg-6 .title h2 {
      font-size: 26px !important;
      line-height: 36px !important;
      margin-bottom: 30px !important;
      width: 105%;

    }

    .islamic-school-section .container .row .col-lg-6 .routine-table ul li {
      padding: 23px 10px !important;
      margin-left: -20px;
    }


    .islamic-school-section .container .row .col-lg-6 .btn a {
      font-size: 13px !important;
    }




    .islamic-school-section .container .row .col-lg-6 .school-img img {
      width: 85% !important;
      height: 62vh !important;
      margin-left: 20px !important;
      margin-top: 50px !important;
    }




    .islamic-school-section .container .row .col-lg-6 .mosque img {
      margin-left: 160px !important;
      margin-bottom: 50px !important;
      width: 80%;
    }


    .islamic-school-section .container .row .col-lg-6 .service-item .service-title h2 {

      font-size: 30px !important;
      line-height: 40px !important;
    }



    .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades {

      display: flex;
    }


    .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades .grade {

      margin-right: 35px !important;

    }


    .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades .grade h2 {
      font-size: 32px !important;
      margin-left: 25px;
    }



    .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades .grade p {

      font-size: 14px !important;

      margin-top: 18px !important;
      width: 130% !important;
    }



    /* **********  Pilar section  ****** */



    .pilars-section {
      padding: 80px 200px !important;

    }




    .pilars-section .container {
      flex-direction: column !important;
      margin-left: -32px !important;
    }

    .pilars-section .container .pilar-box {
      width: 202% !important;

    }


    .pilars-section .container .pilar-box .pilars-item {
      width: 200% !important;
      margin-left: -30%;
    }


    .pilars-section .container .pilar-box .pilars-item .pilarts-img {
      
    }


    .pilars-section .container .pilar-box .pilars-item .pilars-text h2 {
      width: 32%;
      margin: -40px 5px 45px 5px;
    }

    .pilars-section .container .pilar-box .pilars-item .pilars-text h2 a {
      
      margin-left: 30px;
    }

    .pilars-section .container .pilar-box .pilars-item .pilars-text h2 .Shahada-text {
     
      margin-left: 5px;
    }



    /* ***** event section css */

    .event-section .container .row .col-12 .title h6 {
      
      font-size: 18px !important;

    }

    .event-section .container .row .col-12 .title h2 {

      font-size: 25px !important;
      line-height: 60px;
    }



    .event-section .container .row .col-lg-6 .event-item .event-text {

      width: 80%;
      margin-bottom: 30px;
    }


/* ************ Support Section *********** */

    .support-section .container .row .col-lg-6 h6 {
      font-size: 18px !important;
      
    }

    .support-section .container .row .col-lg-6 h2 {

      font-size: 30px !important;

    }

    .support-section .container .row .col-lg-6 .progress-area .row .col-lg-4 {
      margin-top: 20px;
    }


/* ****************** Blog section ********** */


    .blog-section .container .row .col-l2 .section-title h6 {
     font-size: 18px !important;
    }


/* ************ Letter Section *************/

    .letter-section form>div {
      flex-direction: column !important;

      width: 160%;
      margin-left: -55px;
    }


    .letter-section form > div button {
      margin-top: 60px;
      font-size: 14px;
      width: 125px !important;
      height: 40px !important;
      line-height: 32px !important;
    }



    .letter-section .letter-wrap {


      padding: 84px !important;

    }

    .letter-section h3 {
      font-size: 18px !important;
      width: 97%;
      
      padding-bottom: 15px;
    }



    .footer-section .market-widget p {

      width: 90%;
    }





  }











  /************************************************************************************************************/








  /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

  @media (min-width: 320px) and (max-width: 480px) {

    /* CSS */


    /*********  Global Css   ***********/

    .container {

      width: 70% !important;
    }



    h2 {

      font-size: 30px !important;
     
    }
  
    h6{
      font-size: 13px !important;
  
    }
  
      p {
        font-size: 14px !important;
      }
  
      .theme-btn {
        font-size: 13px !important;
      }
  











    /*********  header Css   ***********/



    .header-section-top .container .topbar .row .col .contact-intro {
      display: flex !important;
    }

    .header-section-top .container .topbar .row .col {}


    .header-section-top .container .topbar .row .col .contact-intro ul {
      width: 100%;
    }

    .header-section-top .container .topbar .row .col .contact-intro ul li {
      margin-left: -8px;
      display: flex !important;
      font-size: 10px !important;
    }



    .header-section-top .container .topbar .row .col .contact-intro ul li i {

      margin-right: 8px;
    }



    .header-section-top .container .topbar .row .col .contact-info ul {

      display: flex;
      margin-left: -90px;

    }


    .header-section-top .container .topbar .row .col .contact-info ul li {
      font-size: 13px !important;


    }

    .header-section-top .container .topbar .row .col .contact-info ul li .theme-btn {
      font-size: 7px !important;
     
      padding: 9px 12px !important;
    }




    /*********** ****** Mid Bar **************** */

    .header-section-bottom .container .mid-bar .row .col-lg-8 nav ul {
      flex-direction: column;
    }


    .header-section-bottom .container .mid-bar .row .col-lg-1 ul {

      margin-left: -6px !important;
    }


    /*********  banner Css   ***********/

    .banner-section .container .col-lg-7 .top h6 {
      width: 75% !important;

    }

    .banner-section .container .col-lg-7 .mid h2 {

      /* font-size: 40px !important; */
      width: 100% !important;

    }


    .banner-section .container .col-lg-7 {
      margin-top: -150px;
      margin-bottom: 50px;
    }


    .banner-section .container .col-lg-5 .banner-img img {
      width: 100% !important;
    }



    .banner-section .container .col-lg-5 .banner-img {
      height: 80vh !important;
    }


    /* ******* About us css****** */

    .about-us-section .container .row .col-lg-6 .about-us-left img {
      height: 77vh !important;
      width: 100% !important;
      margin-bottom: 50px;
    }




    .about-us-section .container .row .col-lg-6 .about-us-right .mid h2 {

      width: 100% !important;
      /* font-size: 38px !important; */
      line-height: 50px !important;
    }


    .about-us-section .container .row .col-lg-6 .about-us-right .btn {
    
      margin-left: -25px;

    }


    .about-us-section .container .row .col-lg-6 .about-us-right .btn ul {

      margin-right: -25px !important;
    }

    .about-us-section .container .row .col-lg-6 .about-us-right .btn ul li {
    
      margin-left: 10px !important;
    }


    .about-us-section .container .row .col-lg-6 .about-us-right .btn .theme-btn {

      padding: 5px 30px !important;
      font-size: 12px !important;
    }



    .about-us-section .container .row .col-lg-6 .about-us-right .btn ul li .Video-text{

      font-size: 13px !important;

    }




    /* *****  prayer-time-section ********/

    .prayer-time-section  {
    display: none;
    }


    .prayer-time-section .container .row .col-lg-5 .timer-text {
      margin-left: -70px;
    }


    .prayer-time-section .container .row .col-lg-5 .timer-text h2 {

      font-size: 32px !important;
      width: 175% !important;

    }

    .prayer-time-section .container .row .col-lg-5 .timer-text p {
      width: 118%;
      font-size: 20px !important;
    }




    .prayer-time-section .container .row .col-lg-5 .timer-text span {
      font-size: 16px !important;

    }

    .prayer-time-section .container .row .col-lg-5 .timer-num {
      margin-top: 50px;
      margin-left: -165px;
    }



    .prayer-time-section .container .timer-shape-1 {
      
      display: none;
    }

    .prayer-time-section .container .timer-shape-2 {
      
      display: none;
    }

    .prayer-time-section .container .timer-shape-3 {
      
      display: none;
    }




    /* ******** Islamic school css ***** */


    .islamic-school-section .container .row .col-lg-6 .title h2 {
      /* font-size: 26px !important; */
      line-height: 36px !important;
      margin-bottom: 30px !important;
      width: 105%;

    }

    .islamic-school-section .container .row .col-lg-6 .routine-table {
     
      width: 115%;
    }



    .islamic-school-section .container .row .col-lg-6 .routine-table ul {
      
      margin-left: -45px ;
    }



    .islamic-school-section .container .row .col-lg-6 .routine-table ul li {
      padding: 23px 10px !important;
      margin-left: -20px;
    }


    .islamic-school-section .container .row .col-lg-6 .school-img img {
      width: 100% !important;
      height: 80vh !important;
      margin-left: 20px !important;
      margin-top: 50px !important;
    }




    .islamic-school-section .container .row .col-lg-6 .mosque img {

      margin-left: 160px !important;
      margin-bottom: 50px !important;
    }


    .islamic-school-section .container .row .col-lg-6 .service-item .service-title h2 {

      /* font-size: 30px !important; */
      line-height: 40px !important;
    }



    .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades {
      display: flex;
      width: 115%;
      margin-left: -25px;
    }

    .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades .grade {

      margin-right: 35px !important;

    }


    .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades .grade h2 {
/* 
      font-size: 32px !important; */
    }



    .islamic-school-section .container .row .col-lg-6 .service-item .counter-grades .grade p {
/* 
      font-size: 14px !important; */

      margin-top: 18px !important;
      width: 80% !important;
    }



    /* **********  Pilar section  ****** */



    .pilars-section {
      padding: 80px 125px !important;

    }




    .pilars-section .container {
      flex-direction: column !important;
      margin-left: -32px !important;
    }

    .pilars-section .container .pilar-box {
      width: 202% !important;

    }


    .pilars-section .container .pilar-box .pilars-item {

      width: 160% !important;
    }




    .pilars-section .container .pilar-box .pilars-item .pilars-text {
     
    }




    /* ***** event section css */


    .event-section .container .row .col-12 .title h2 {

      /* font-size: 25px !important; */


      line-height: 60px;
    }







    .event-section .container .row .col-lg-6 .event-item .event-text {

      width: 80%;
      margin-bottom: 30px;
    }




    .support-section .container .row .col-lg-6 h2 {
/* 
      font-size: 30px !important; */

    }

    /* ****** support-section ******* */

    .support-section .container .row .col-lg-6 .progress-area .row .col-lg-4 {
      margin-top: 20px;
    }



    .letter-section h3 {
    
      font-size: 22px !important;
      
    }

    .letter-section p {
    
      font-size: 13px !important;
    }



    .letter-section form>div {
      flex-direction: column !important;
      font-size: 14px !important;

      width: 160%;
      margin-left: -30px;
    }
    .letter-section form>div input{

      font-size: 14px !important;

    }

    .letter-section form>div button {
      margin-top: 60px;
      font-size: 14px !important;
    }







  }

  /* ****************************************** END ************************************************************ */